Monolook

English

Español

English

Español

Appearance

Hello World ​

Minimal first experience with Monolook Image and Three.js.

Minimal example ​

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 found:', id))
    tracker.on('lost', (id) => console.log('Target lost:', id))
    tracker.on('frame', () => {
      if (cube.visible) cube.rotation.y += 0.02
      renderer.render(scene, camera)
    })

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

Step by step ​

  1. Create MonolookImage with an Image license key.
  2. Call tracker.init() to validate the license and load the WASM.
  3. Create the Three.js adapter and connect it with adapter.attach(tracker).
  4. Register AR content with adapter.addARContent(targetId, object3D).
  5. Load the target image with tracker.addTarget(targetId, image).
  6. Start camera and tracking with tracker.start(), then call adapter.setup().

Next step ​