Image Tracking with Three.js

Setup

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

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

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

Add AR content

Any Three.js Object3D can be AR content:

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

Options

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

Load marker and start

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('myMarker', img)

await tracker.start()
adapter.setup()

Render loop

You have two options:

Manual (recommended for more control)

tracker.on('frame', () => {
  // Your animation logic
  if (cube.visible) cube.rotation.y += 0.02
  renderer.render(scene, camera)
})

Automatic

adapter.startRenderLoop()

Events

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

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

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

// Unsubscribe
const unsub = tracker.on('found', handler)
unsub() // no longer listening

Full example

See Hello World for a complete, working HTML example.