Multi-target Tracking

Monolook permite trackear múltiples markers simultáneamente, cada uno con su propio contenido 3D.

Ejemplo

// Contenido diferente para cada marker
const cube1 = new THREE.Mesh(
  new THREE.BoxGeometry(0.1, 0.1, 0.1),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
)

const cube2 = new THREE.Mesh(
  new THREE.BoxGeometry(0.15, 0.15, 0.15),
  new THREE.MeshStandardMaterial({ color: 0xff0000 })
)

// Asociar contenido a cada target
adapter.addARContent('marker1', cube1, { scale: 1 })
adapter.addARContent('marker2', cube2, { scale: 1 })

// Cargar ambos markers
const img1 = new Image()
img1.src = './marker1.jpg'
await new Promise(r => { img1.onload = r })
await tracker.addTarget('marker1', img1)

const img2 = new Image()
img2.src = './marker2.jpg'
await new Promise(r => { img2.onload = r })
await tracker.addTarget('marker2', img2)

Eventos

Los eventos found y lost reciben el ID del target, así puedes saber qué marker es:

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

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

Siguiente paso

Si necesitas controlar qué targets están activos en cada momento, mira Selective Tracking.