4

我安装了(npm)aframe 和 ar.js 库;但是,当我尝试使用<a-marker>or<a-marker-camera>时,出现以下错误:

Unknown custom element: <a-marker-camera>

我能够导入 aframe 库,但是当我想导入和使用 ar.js 库时,我收到一个错误,即找不到 ar.js。

我遵循了来自: https ://aframe.io/blog/arjs/的 AR 实现示例

有人可以告诉我我做错了什么吗?

<template>
  <v-layout>
    AR
    <v-flex height="100%">
      <a-scene embedded>
      <a-sky color="#000"></a-sky>
      <a-entity camera look-controls wasd-controls position="0 1 3" rotation="-15 0 0"></a-entity>
      <a-box v-bind:color="color" opacity="0.75" visible="true"></a-box>
      <a-marker-camera preset='hiro'></a-marker-camera>    

    </a-scene>
    </v-flex>
  </v-layout>
</template>

<script>
import 'aframe'

</script>

<style scoped>
</style>
4

2 回答 2

2

您只导入 A-Frame,但不导入 ar.js,它定义了<a-marker-camera><a-marker>.

在您链接的示例中,这是通过

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
于 2017-10-09T13:14:00.433 回答
1

在 Vue 项目的 src/index.js 文件中添加带有自定义元素的 Vue.config.ignoredElements 属性。该文件是具有 Vue 实例化的文件:

Vue.config.ignoredElements = [
    'a-scene',
    'a-entity',
    'a-camera',
    'a-box',
    'a-sky',
    'a-assets',
    'a-marker',
    'a-marker-camera'
]

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
于 2018-07-22T19:06:24.430 回答