Image Tracking with Three.js

Imports

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

Vite

If you use Vite, add this config so the Monolook Image WASM module resolves correctly in development:

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() validates the license and loads the WASM. It can take a moment; show a loading state to the user.

Add AR content

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 })

Option	Type	Default	Description
scale	number	1	Scale multiplier
flipX	boolean	false	Flip horizontally

Load target and start

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 found:', id))
tracker.on('lost', (id) => console.log('Target lost:', id))
tracker.on('frame', () => renderer.render(scene, camera))

await tracker.start()
adapter.setup()

The id used in addTarget() must match the id used in adapter.addARContent().

Reset

tracker.destroy()
adapter.destroy()