Installation

Install the monolook package and the 3D engine used by your integration.

npm install monolook

For Three.js:

npm install three

For Babylon.js:

npm install @babylonjs/core

A-Frame is usually loaded from a CDN in the HTML.

Imports

Monolook uses sub-paths. Import only the product and adapter you need.

Sub-path	Description
monolook/world	Monolook World facade for surface tracking.
monolook/world/three	Three.js adapter for World.
monolook/world/aframe	A-Frame adapter for World.
monolook/world/babylon	Babylon.js adapter for World.
monolook/image	Monolook Image core for image tracking.
monolook/image/three	Three.js adapter for Image.
monolook/image/aframe	A-Frame adapter for Image.
monolook/image/babylon	Babylon.js adapter for 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

If you use Monolook Image with Vite, exclude monolook from optimizeDeps so the WASM module resolves correctly in development.

import { defineConfig } from 'vite'

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

Peer dependencies

three, aframe, and @babylonjs/core are optional peer dependencies. Install only the engine used by your project.