Monolook

English

Español

English

Español

Appearance

Hello World ​

Your first AR experience with Monolook in less than 50 lines.

Minimal example with Three.js ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monolook AR - Hello World</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { width: 100%; height: 100%; }
  </style>
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js"
    }
  }
  </script>
</head>
<body>
  <script type="module">
    import * as THREE from 'three'
    import { MiniTrackAR } from './minitrack-core.js'
    import { ThreeAdapter } from './adapters/three.js'

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

    // AR content: a green cube
    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(0.1, 0.1, 0.1),
      new THREE.MeshStandardMaterial({ color: 0x00ff00 })
    )

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

    async function init() {
      // 1. Initialize tracker
      const tracker = new MiniTrackAR({
        licenseKey: 'YOUR_LICENSE_KEY'
      })
      await tracker.init()

      // 2. Connect adapter
      const adapter = new ThreeAdapter({ scene, camera, renderer })
      adapter.attach(tracker)
      adapter.addARContent('myMarker', cube, { scale: 1 })

      // 3. Load marker image
      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)

      // 4. Events
      tracker.on('found', (id) => console.log('Marker found:', id))
      tracker.on('lost', (id) => console.log('Marker lost:', id))

      // 5. Start
      await tracker.start()
      adapter.setup()

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

    init().catch(console.error)
  </script>
</body>
</html>

Step by step ​

  1. Initialize the tracker with your license key. init() validates the license and loads the WASM module.
  2. Create the adapter for Three.js and connect it to the tracker with attach().
  3. Add AR content — any Three.js Object3D associated with a target ID.
  4. Load the marker image — the image the SDK will look for in the camera feed.
  5. Start tracking with start(). This activates the camera and begins searching for markers.
  6. Render loop — on each frame, render the scene.

Next step ​