Image Tracking con A-Frame

A-Frame se carga por CDN antes de tu script. El adapter usa window.AFRAME.THREE internamente.

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

Escena

Usa <a-entity camera>, no <a-camera>, y desactiva controles para que no interfieran con la cámara AR.

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

Cargar target y arrancar

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 encontrado:', id))
tracker.on('lost', (id) => console.log('Target perdido:', id))

await tracker.start()
adapter.setup()

Reset

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