a-marker does not work with aframe

Question

I installed (npm) the aframe and ar.js libaries; however, when I try to use the <a-marker> or <a-marker-camera>, I get the following error:

Unknown custom element: <a-marker-camera>

I was able to import the aframe library, but when I want to import and use the ar.js library, I get an error that the ar.js was not found.

I followed the AR implementation example from: https://aframe.io/blog/arjs/

Can someone tell me what I'm doing wrong?

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

score 2 · Answer 1 · answered Oct 09 '17 at 13:14

2

You only import A-Frame, but not ar.js, which defines <a-marker-camera> and <a-marker>.

In the example you linked, this is done via

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

answered Oct 09 '17 at 13:14

oha

79
5

1

I understand this, but I want to import it the way I imported the aframe (so like import 'aframe'). When i do import 'aframe.js' it does not work! You have a solution for this as well? – Fenno Oct 09 '17 at 14:05
1

The file you want to import is `aframe-ar.js`, not `aframe.js`. Here is a GitHub repository with an example (look for `src/App.vue`, the line `import firebase from './firebase'`is similar to what you need): https://github.com/okwme/bubblehub – oha Oct 10 '17 at 06:13

score 1 · Answer 2 · answered Jul 22 '18 at 19:06

Add the Vue.config.ignoredElements property with your customs elements at the file src/index.js of your Vue project. This file is the one that has the instantiation of the 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/>'
})

a-marker does not work with aframe

2 Answers2