Image Tracking con Babylon.js

Babylon puede cargarse por CDN o como módulo ES. Si usas CDN, pasa BABYLON al adapter.

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script type="module" src="/main.js"></script>

Setup

La cámara debe ser FreeCamera, estar en (0, 0, 0) y apuntar a (0, 0, 1). El adapter sobrescribe su matriz durante el tracking.

import { MonolookImage } from 'monolook/image'
import { BabylonAdapter } from 'monolook/image/babylon'

const BABYLON = window.BABYLON
const engine = new BABYLON.Engine(canvas, true, { alpha: true })
const scene = new BABYLON.Scene(engine)
scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.2, 1)

const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, 0), scene)
camera.setTarget(new BABYLON.Vector3(0, 0, 1))
camera.minZ = 0.01
camera.maxZ = 1000

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

await tracker.init()

const box = BABYLON.MeshBuilder.CreateBox('box', { size: 0.1 }, scene)
box.setEnabled(false)

const adapter = new BabylonAdapter({ scene, camera, engine, BABYLON })
adapter.attach(tracker)
adapter.addARContent('target', box)

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()
adapter.startRenderLoop()

No necesitas crear otro engine.runRenderLoop; el adapter puede gestionarlo.

Reset

tracker.destroy()
adapter.destroy()