Image Tracking with A-Frame

A-Frame is loaded from a CDN before your app script. The adapter uses window.AFRAME.THREE internally.

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script type="module" src="/main.js"></script>

Scene

Use <a-entity camera>, not <a-camera>, and disable controls so they do not interfere with the AR camera.

<style>
  .a-enter-vr,
  .a-enter-ar {
    display: none !important;
  }
</style>

<a-scene id="scene" embedded vr-mode-ui="enabled: false" renderer="alpha: true; antialias: true">
  <a-entity
    camera
    position="0 0 0"
    look-controls="enabled: false"
    wasd-controls="enabled: false"
  ></a-entity>

  <a-entity id="ar-content">
    <a-box color="#2563eb" width="0.1" height="0.1" depth="0.1"></a-box>
  </a-entity>
</a-scene>

Setup

import { MonolookImage } from 'monolook/image'
import { AFrameAdapter } from 'monolook/image/aframe'

const sceneEl = document.getElementById('scene')
const arContent = document.getElementById('ar-content')

if (!sceneEl.hasLoaded) {
  await new Promise((resolve) => sceneEl.addEventListener('loaded', resolve, { once: true }))
}

const tracker = new MonolookImage({
  licenseKey: '<IMAGE_LICENSE_KEY>'
})

await tracker.init()

const adapter = new AFrameAdapter({ sceneEl })
adapter.attach(tracker)
adapter.addARContent('target', arContent)

Load target and start

const img = new Image()
img.crossOrigin = 'anonymous'
img.src = '/targets/marker.jpg'
await img.decode()

await tracker.addTarget('target', img)

tracker.on('found', (id) => console.log('Target found:', id))
tracker.on('lost', (id) => console.log('Target lost:', id))

await tracker.start()
adapter.setup()

Reset

tracker.destroy()
adapter.destroy()
arContent.object3D.visible = false