Monolook

Español

English

Español

English

Appearance

Hello World ​

Tu primera experiencia AR con Monolook en menos de 50 líneas.

Ejemplo mínimo con 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'

    // Escena Three.js
    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)

    // Contenido AR: un cubo verde
    const cube = new THREE.Mesh(
      new THREE.BoxGeometry(0.1, 0.1, 0.1),
      new THREE.MeshStandardMaterial({ color: 0x00ff00 })
    )

    // Luces
    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. Inicializar tracker
      const tracker = new MiniTrackAR({
        licenseKey: 'YOUR_LICENSE_KEY'
      })
      await tracker.init()

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

      // 3. Cargar imagen del marker
      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('miMarker', img)

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

      // 5. Arrancar
      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>

Paso a paso ​

  1. Inicializar el tracker con tu license key. init() valida la licencia y carga el módulo WASM.
  2. Crear el adapter de Three.js y conectarlo al tracker con attach().
  3. Añadir contenido AR — cualquier Object3D de Three.js asociado a un target ID.
  4. Cargar la imagen del marker — la imagen que el SDK buscará en la cámara.
  5. Arrancar el tracking con start(). Esto activa la cámara y empieza a buscar markers.
  6. Render loop — en cada frame, renderiza la escena.

Siguiente paso ​