Multi-target Tracking

Monolook allows tracking multiple markers simultaneously, each with its own 3D content.

Example

// Different content for each 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 })
)

// Associate content with each target
adapter.addARContent('marker1', cube1, { scale: 1 })
adapter.addARContent('marker2', cube2, { scale: 1 })

// Load both 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)

Events

The found and lost events receive the target ID, so you can tell which marker it is:

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

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

Next step

If you need to control which targets are active at any given time, see Selective Tracking.