Image Tracking con Three.js

Setup

import * as THREE from 'three'
import { MiniTrackAR } from './minitrack-core.js'
import { ThreeAdapter } from './adapters/three.js'

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

// Luces
scene.add(new THREE.AmbientLight(0xffffff, 0.6))
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8)
dirLight.position.set(5, 5, 5)
scene.add(dirLight)

// Tracker
const tracker = new MiniTrackAR({
  licenseKey: 'YOUR_LICENSE_KEY'
})
await tracker.init()

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

Añadir contenido AR

Cualquier Object3D de Three.js puede ser contenido AR:

// Un cubo
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.1, 0.1, 0.1),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
)
adapter.addARContent('miMarker', cube, { scale: 1 })

Opciones

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

Cargar marker y arrancar

const img = new Image()
img.crossOrigin = 'anonymous'
img.src = './marker.jpg'
await new Promise((res, rej) => { img.onload = res; img.onerror = rej })
await tracker.addTarget('miMarker', img)

await tracker.start()
adapter.setup()

Render loop

Tienes dos opciones:

Manual (recomendado para más control)

tracker.on('frame', () => {
  // Tu lógica de animación
  if (cube.visible) cube.rotation.y += 0.02
  renderer.render(scene, camera)
})

Automático

adapter.startRenderLoop()

Eventos

tracker.on('found', (id) => {
  console.log('Marker encontrado:', id)
})

tracker.on('lost', (id) => {
  console.log('Marker perdido:', id)
})

tracker.on('pose', (pose) => {
  console.log(pose.position, pose.rotationMatrix)
})

// Desuscribirse
const unsub = tracker.on('found', handler)
unsub() // ya no escucha

Ejemplo completo

Ver Hello World para un ejemplo HTML completo y funcional.