Monolook

Español

English

Español

English

Appearance

Hello World ​

Primera experiencia mínima con Monolook Image y Three.js.

Ejemplo mínimo ​

html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monolook Image - Hello World</title>
  <style>
    body { margin: 0; overflow: hidden; background: #000; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'three'
    import { MonolookImage } from 'monolook/image'
    import { ThreeAdapter } from 'monolook/image/three'

    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 light = new THREE.DirectionalLight(0xffffff, 0.8)
    light.position.set(5, 5, 5)
    scene.add(light)

    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(0.1, 0.1, 0.1),
      new THREE.MeshStandardMaterial({ color: 0x2563eb })
    )

    const tracker = new MonolookImage({
      licenseKey: '<IMAGE_LICENSE_KEY>'
    })

    await tracker.init()

    const adapter = new ThreeAdapter({ scene, camera, renderer })
    adapter.attach(tracker)
    adapter.addARContent('target', cube)

    const img = new Image()
    img.src = '/targets/marker.jpg'
    await img.decode()
    await tracker.addTarget('target', img)

    tracker.on('found', (id) => console.log('Target encontrado:', id))
    tracker.on('lost', (id) => console.log('Target perdido:', id))
    tracker.on('frame', () => {
      if (cube.visible) cube.rotation.y += 0.02
      renderer.render(scene, camera)
    })

    await tracker.start()
    adapter.setup()
  </script>
</body>
</html>

Paso a paso ​

  1. Crea MonolookImage con una license key de Image.
  2. Llama a tracker.init() para validar licencia y cargar el WASM.
  3. Crea el adapter de Three.js y conéctalo con adapter.attach(tracker).
  4. Registra contenido AR con adapter.addARContent(targetId, object3D).
  5. Carga la imagen target con tracker.addTarget(targetId, image).
  6. Arranca cámara y tracking con tracker.start() y después adapter.setup().

Siguiente paso ​