a-marker не работает с рамкой

Я установил (npm) библиотеки aframe и ar.js; однако, когда я пытаюсь использовать <a-marker> или <a-marker-camera>, я получаю следующую ошибку:

Unknown custom element: <a-marker-camera>

Мне удалось импортировать библиотеку aframe, но когда я хочу импортировать и использовать библиотеку ar.js, я получаю сообщение об ошибке, что ar.js не найден.

Я следил за примером реализации AR из: https://aframe.io/blog/arjs/

Может кто подскажет, что я делаю не так?

<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>

vue.js augmented-reality aframe ar.js
person Fenno    schedule 09.10.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы импортируете только A-Frame, но не ar.js, который определяет <a-marker-camera> и <a-marker>.

В примере, который вы связали, это делается через

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
person oha    schedule 09.10.2017
comment
Я понимаю это, но я хочу импортировать его так же, как я импортировал кадр (например, импорт 'кадра'). Когда я импортирую aframe.js, он не работает! У вас есть решение для этого? - person Fenno; 09.10.2017
comment
Файл, который вы хотите импортировать, - это aframe-ar.js, а не aframe.js. Вот репозиторий GitHub с примером (ищите src/App.vue, строка import firebase from './firebase' похожа на то, что вам нужно): github.com / okwme / bubblehub - person oha; 10.10.2017

arrow_upward
1
arrow_downward

Добавьте свойство Vue.config.ignoredElements с вашими таможенными элементами в файл src / index.js вашего проекта Vue. Это тот файл, в котором есть экземпляр 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/>'
})
person Derzu    schedule 22.07.2018