Instalación

Instala el paquete monolook y el motor 3D que vaya a usar tu integración.

npm install monolook

Para Three.js:

npm install three

Para Babylon.js:

npm install @babylonjs/core

A-Frame se carga normalmente por CDN en el HTML.

Imports

Monolook usa sub-paths. Importa solo el producto y adapter que necesites.

Sub-path	Descripción
monolook/world	Core/facade de Monolook World para surface tracking.
monolook/world/three	Adapter Three.js para World.
monolook/world/aframe	Adapter A-Frame para World.
monolook/world/babylon	Adapter Babylon.js para World.
monolook/image	Core de Monolook Image para image tracking.
monolook/image/three	Adapter Three.js para Image.
monolook/image/aframe	Adapter A-Frame para Image.
monolook/image/babylon	Adapter Babylon.js para Image.

World

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

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

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

Image

import { MonolookImage } from 'monolook/image'
import { ThreeAdapter } from 'monolook/image/three'

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

await tracker.init()

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

Vite

Si usas Monolook Image con Vite, excluye monolook de optimizeDeps para que el WASM se resuelva correctamente en desarrollo.

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['monolook']
  }
})

Peer dependencies

three, aframe y @babylonjs/core son peer dependencies opcionales. Instala solo el motor que use tu proyecto.