import { Engine, webcamPlugin, defaultProfilePlugin } from "ar.js-core"; import { ThreeJSRendererPlugin } from "@AR-js-org/arjs-plugin-threejs"; // 1) Engine & core plugins const engine = new Engine(); engine.pluginManager.register(defaultProfilePlugin.id, defaultProfilePlugin); engine.pluginManager.register(webcamPlugin.id, webcamPlugin); const ctx = engine.getContext(); await engine.pluginManager.enable(defaultProfilePlugin.id, ctx); await engine.pluginManager.enable(webcamPlugin.id, ctx); // 2) Artoolkit plugin const { ArtoolkitPlugin } = await import( "./vendor/arjs-plugin-artoolkit/arjs-plugin-artoolkit.esm.js" ); const artoolkit = new ArtoolkitPlugin({ cameraParametersUrl: "/path/to/camera_para.dat", minConfidence: 0.6, }); await artoolkit.init(ctx); await artoolkit.enable(); // 3) Projection const proj = artoolkit.getProjectionMatrix?.(); const arr = proj?.toArray ? proj.toArray() : proj; if (Array.isArray(arr) && arr.length === 16) { engine.eventBus.emit("ar:camera", { projectionMatrix: arr }); } // 4) Three.js plugin const threePlugin = new ThreeJSRendererPlugin({ container: document.getElementById("viewport"), useLegacyAxisChain: true, changeMatrixMode: "modelViewMatrix", preferRAF: true, // debugSceneAxes: true, // debugAnchorAxes: true, }); await threePlugin.init(engine); await threePlugin.enable(); // 5) Start engine loop engine.start();

const proj = artoolkit.getProjectionMatrix(); const arr = proj?.toArray ? proj.toArray() : proj; if (Array.isArray(arr) && arr.length === 16) { engine.eventBus.emit("ar:camera", { projectionMatrix: arr }); }

engine.eventBus.on("ar:getMarker", (d) => { const id = String( d?.marker?.markerId ?? d?.marker?.id ?? d?.marker?.pattHandle ?? d?.marker?.uid ?? d?.marker?.index ?? "0", ); // Add content once anchor exists setTimeout(() => { const anchor = threePlugin.getAnchor(id); if (anchor && !anchor.userData._content) { anchor.userData._content = true; const cube = new THREE.Mesh( new THREE.BoxGeometry(0.5, 0.5, 0.5), new THREE.MeshBasicMaterial({ color: 0xff00ff }), ); cube.position.y = 0.25; anchor.add(cube); } }, 0); // Bridge raw to unified if (Array.isArray(d?.matrix) && d.matrix.length === 16) { engine.eventBus.emit("ar:marker", { id, matrix: d.matrix, visible: true }); } });

const fakeRenderer = { domElement: document.createElement("canvas"), setPixelRatio() {}, setClearColor() {}, setSize() {}, render() {}, dispose() {}, }; const plugin = new ThreeJSRendererPlugin({ rendererFactory: () => fakeRenderer, });