World Tracking — Three.js

Integración completa de Monolook World con Three.js para detectar superficies y anclar contenido 3D.

Requisitos

• three instalado (npm install three)
• License key de Monolook World
• HTTPS + Chrome en Android, o Monolook App / AppClip en iOS

Setup

import * as THREE from 'three'
import { Monolook } from 'monolook/world'

const scene    = new THREE.Scene()
const camera   = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 100)
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true })
renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
renderer.setSize(innerWidth, innerHeight)

scene.add(new THREE.HemisphereLight(0xffffff, 0x303030, 2.4))

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.35, 0.35, 0.35),
  new THREE.MeshStandardMaterial({ color: 0xf4f4f4 })
)
cube.visible = false
scene.add(cube)

const monolook = new Monolook({
  adapter: 'three',
  THREE,
  scene,
  camera,
  renderer,
  domOverlayRoot: document.getElementById('dom_overlay'),
})

Eventos

Registra los eventos antes de llamar a start():

monolook.on('surfacefound', () => {
  // superficie detectada — muestra indicador al usuario
})

monolook.on('select', () => {
  // usuario tocó la pantalla — coloca contenido en la pose del indicador
  const pose = monolook.getIndicatorPose()
  if (pose?.visible) {
    cube.position.set(pose.position.x, pose.position.y, pose.position.z)
    monolook.pauseTracking()
    monolook.setIndicatorVisible(false)
  }
})

monolook.on('sessionend', () => {
  // sesión AR cerrada
})

Iniciar AR

await monolook.start({
  mode: 'surface',
  licenseKey: '<WORLD_LICENSE_KEY>',
})

monolook.startTracking()

monolook.setRenderLoop(() => {
  monolook.updateTracking()
  renderer.render(scene, camera)
})

await monolook.enterAR()

Reposicionar y resetear

// reposicionar — retoma el tracking desde la posición actual
monolook.startTracking()
monolook.setIndicatorVisible(false)

// reset completo tras cerrar la sesión
monolook.reset()

Ejemplo completo

import * as THREE from 'three'
import { Monolook } from 'monolook/world'

const scene    = new THREE.Scene()
const camera   = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 100)
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('scene'), alpha: true, antialias: true })
renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
renderer.setSize(innerWidth, innerHeight)

scene.add(new THREE.HemisphereLight(0xffffff, 0x303030, 2.4))

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.35, 0.35, 0.35),
  new THREE.MeshStandardMaterial({ color: 0xf4f4f4 })
)
cube.visible = false
scene.add(cube)

const monolook = new Monolook({
  adapter: 'three',
  THREE,
  scene,
  camera,
  renderer,
  domOverlayRoot: document.getElementById('dom_overlay'),
})

let isPlaced = false

monolook.on('surfacefound', () => setStatus('Superficie detectada — toca para colocar'))
monolook.on('select', colocarCubo)
monolook.on('sessionend', () => {
  isPlaced = false
  cube.visible = true
  renderer.render(scene, camera)
})

async function startAR() {
  await monolook.start({ mode: 'surface', licenseKey: '<WORLD_LICENSE_KEY>' })
  cube.visible = false
  isPlaced = false
  monolook.startTracking()
  monolook.setRenderLoop(() => {
    monolook.updateTracking()
    renderer.render(scene, camera)
  })
  await monolook.enterAR()
}

function colocarCubo() {
  if (!monolook.isPresenting() || isPlaced) return
  const pose = monolook.getIndicatorPose()
  if (!pose?.visible) return

  isPlaced = true
  cube.position.set(pose.position.x, pose.position.y, pose.position.z)
  cube.visible = true
  monolook.pauseTracking()
  monolook.setIndicatorVisible(false)
}

document.getElementById('startButton').addEventListener('click', startAR)
window.addEventListener('pointerup', colocarCubo)