Image Tracking con Three.js

Imports

import * as THREE from 'three'
import { MonolookImage } from 'monolook/image'
import { ThreeAdapter } from 'monolook/image/three'

Vite

Si usas Vite, añade esta configuración para que el WASM de Monolook Image se resuelva correctamente en desarrollo:

export default {
  optimizeDeps: {
    exclude: ['monolook']
  }
}

Setup

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 0.01, 1000)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(innerWidth, innerHeight)
document.body.appendChild(renderer.domElement)

scene.add(new THREE.AmbientLight(0xffffff, 0.6))

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

await tracker.init()

const adapter = new ThreeAdapter({ scene, camera, renderer })
adapter.attach(tracker)

tracker.init() valida la licencia y carga el WASM. Puede tardar; muestra un estado de carga al usuario.

Añadir contenido AR

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.1, 0.1, 0.1),
  new THREE.MeshStandardMaterial({ color: 0x2563eb })
)

adapter.addARContent('target', cube, { scale: 1 })

Opción	Tipo	Default	Descripción
scale	number	1	Multiplicador de escala
flipX	boolean	false	Voltear horizontalmente

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))
tracker.on('frame', () => renderer.render(scene, camera))

await tracker.start()
adapter.setup()

El id usado en addTarget() debe coincidir con el id usado en adapter.addARContent().

Reset

tracker.destroy()
adapter.destroy()