@particle-academy/fancy-3d-three 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Particle Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# @particle-academy/fancy-3d-three
+
+three.js adapter for [`@particle-academy/fancy-3d`](https://www.npmjs.com/package/@particle-academy/fancy-3d).
+
+`fancy-3d` ships an engine-agnostic core (Scene types + a `CanvasEngine` interface + a DOM/CSS-3D renderer). This package adds a full WebGL renderer on top with **three.js**, plus the React components that mount onto a three `Scene`: `Stage`, `Monitor`, primitives (`Card3D`, `Monitor`, `Panel`, `Sign`, …), and layout helpers (`placeOnGrid`, `placeOnArc`, `placeOnWall`, `placeOnSphere`, `placeOnPath`).
+
+It's the three.js sibling of `@particle-academy/fancy-3d-babylon` — same API surface (`createThreeAdapter`/`createBabylonAdapter`, the same primitive + layout functions, the same `<Stage>`/`<Monitor>`), so a scene authored for one renders recognizably on the other. They implement the same `CanvasEngine` interface from the core and don't depend on each other.
+
+## Install
+
+```bash
+npm install @particle-academy/fancy-3d @particle-academy/fancy-3d-three three
+```
+
+You install three packages together: the core (types + `<Canvas>`), this adapter, and three.js itself. None pull in the others, so the core stays lightweight for non-three consumers.
+
+## Usage
+
+### Mount the three engine on `<Canvas>`
+
+```tsx
+import { Canvas } from "@particle-academy/fancy-3d";
+import { threeEngine } from "@particle-academy/fancy-3d-three/engine";
+
+<Canvas engine={threeEngine} style={{ height: 480 }} />;
+```
+
+`EngineHandle.root` is the live `THREE.Scene` — add meshes to it alongside the 2D node graph.
+
+### Declarative `<Stage>` + `<Monitor>` (mount mode)
+
+Render **real, interactive React** onto a 3D display — full text crispness, accessibility, and event handling (not a rasterized texture):
+
+```tsx
+import { Stage, Monitor } from "@particle-academy/fancy-3d-three/react";
+import { Card, Button } from "@particle-academy/react-fancy";
+
+<Stage style={{ height: 520 }}>
+  <Monitor position={[0, 1.6, 0]} width={4} height={2.4} bezel="#0b0f17">
+    <Card>
+      <Card.Header>Live dashboard</Card.Header>
+      <Card.Body>
+        <Button color="violet">Real, clickable React on a 3D screen</Button>
+      </Card.Body>
+    </Card>
+  </Monitor>
+</Stage>;
+```
+
+`<Stage>` owns the renderer + `OrbitControls` camera + render loop. `<Monitor>` builds a bezel mesh and projects its corners to screen space each frame, mapping a DOM overlay onto the 3D quad via a CSS `matrix3d` homography.
+
+### Painted scenes (texture mode)
+
+Render a JSON `Scene` to textured planes:
+
+```tsx
+import { renderScene, type Scene } from "@particle-academy/fancy-3d";
+import { createThreeAdapter, placeOnArc, sceneBounds } from "@particle-academy/fancy-3d-three";
+import * as THREE from "three";
+
+const scene3D = new THREE.Scene();
+const adapter = createThreeAdapter({ scene3D, sizeFor: () => ({ w: 240, h: 150 }) });
+const bounds = sceneBounds(scene);
+renderScene(scene, adapter, (node) => ({ nodeId: node.id, selected: false })).forEach(({ node, rendered }) => {
+  placeOnArc(node, rendered, bounds, { radius: 6 });
+});
+```
+
+### Primitives
+
+Build content-bearing meshes directly. Each takes a `SurfaceContent` (`{ type: "color" }`, `{ type: "paint" }`, or `{ type: "widget" }`) and returns a `THREE.Mesh` (or a `Group` for composites). Pass `scene` to also add it.
+
+```ts
+import { createCard3D, createMonitor, createSign, createCurvedPanel } from "@particle-academy/fancy-3d-three";
+
+const card = createCard3D({ scene, width: 3, height: 2, front: { type: "widget", widget: kpi } });
+const { root } = createMonitor({ scene, width: 4, height: 2.5, screen: { type: "paint", paint } });
+```
+
+Available: `createPanel`, `createBillboard`, `createBuilding`, `createPillar`, `createCylinder`, `createCurvedPanel`, `createSphere`, `createDisc`, `createCard3D`, `createSign`, `createMonitor`, `createDecal`, `createWidgetTexture`.
+
+### Layouts
+
+Map 2D scene positions onto 3D arrangements: `placeOnGrid`, `placeOnWall`, `placeOnArc` (alias `placeOnCylinder`), `placeOnPath`, `placeOnSphere`. Each mutates `obj.position` / `obj.rotation` in place; pair with `sceneBounds(scene)`.
+
+## Notes vs. the Babylon adapter
+
+- `scene` is **optional** on primitives (three meshes exist independent of a scene); pass it to auto-add, matching Babylon's behavior.
+- `createBillboard({ faceCamera: true })` flags the mesh (`userData.faceCamera`); `<Stage>` honors it each frame. Outside a Stage, call `mesh.lookAt(camera.position)` in your own loop.
+- Panels accept `doubleSided?: boolean` instead of Babylon's `sideOrientation` enum.
+- `@types/three` is a dev-only dependency (three ships no declarations); consumers don't need it at runtime.
+
+## License
+
+MIT

package/dist/engine.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var THREE = require('three');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+// src/engine.ts
+var threeEngine = {
+  name: "three",
+  mount(host, _viewport) {
+    const renderer = new THREE__namespace.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(window.devicePixelRatio || 1);
+    const overlay = renderer.domElement;
+    overlay.style.position = "absolute";
+    overlay.style.inset = "0";
+    overlay.style.width = "100%";
+    overlay.style.height = "100%";
+    overlay.style.pointerEvents = "none";
+    overlay.dataset.fancy3dCanvasEngine = "three";
+    host.appendChild(overlay);
+    const scene = new THREE__namespace.Scene();
+    const camera = new THREE__namespace.PerspectiveCamera(50, 1, 0.1, 1e3);
+    camera.position.set(0, 0, 8);
+    camera.lookAt(0, 0, 0);
+    const hemi = new THREE__namespace.HemisphereLight(11781887, 1710638, 1);
+    scene.add(hemi);
+    const resize = () => {
+      const w = host.clientWidth || 1;
+      const h = host.clientHeight || 1;
+      renderer.setSize(w, h, false);
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    let raf = 0;
+    const loop = () => {
+      raf = requestAnimationFrame(loop);
+      renderer.render(scene, camera);
+    };
+    loop();
+    function updateViewport(_v) {
+    }
+    function dispose() {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      renderer.dispose();
+      if (overlay.parentElement === host) host.removeChild(overlay);
+    }
+    return {
+      name: "three",
+      root: scene,
+      updateViewport,
+      dispose
+    };
+  }
+};
+
+exports.threeEngine = threeEngine;
+//# sourceMappingURL=engine.cjs.map
+//# sourceMappingURL=engine.cjs.map

package/dist/engine.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine.ts"],"names":["THREE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,IAAM,WAAA,GAA4B;AAAA,EACvC,IAAA,EAAM,OAAA;AAAA,EACN,KAAA,CAAM,MAAmB,SAAA,EAAwC;AAC/D,IAAA,MAAM,QAAA,GAAW,IAAUA,gBAAA,CAAA,aAAA,CAAc,EAAE,KAAA,EAAO,MAAM,SAAA,EAAW,IAAA,EAAM,qBAAA,EAAuB,IAAA,EAAM,CAAA;AACtG,IAAA,QAAA,CAAS,aAAA,CAAc,MAAA,CAAO,gBAAA,IAAoB,CAAC,CAAA;AACnD,IAAA,MAAM,UAAU,QAAA,CAAS,UAAA;AACzB,IAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,UAAA;AACzB,IAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,GAAA;AACtB,IAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,MAAA;AACtB,IAAA,OAAA,CAAQ,MAAM,MAAA,GAAS,MAAA;AACvB,IAAA,OAAA,CAAQ,MAAM,aAAA,GAAgB,MAAA;AAC9B,IAAA,OAAA,CAAQ,QAAQ,mBAAA,GAAsB,OAAA;AACtC,IAAA,IAAA,CAAK,YAAY,OAAO,CAAA;AAExB,IAAA,MAAM,KAAA,GAAQ,IAAUA,gBAAA,CAAA,KAAA,EAAM;AAC9B,IAAA,MAAM,SAAS,IAAUA,gBAAA,CAAA,iBAAA,CAAkB,EAAA,EAAI,CAAA,EAAG,KAAK,GAAI,CAAA;AAC3D,IAAA,MAAA,CAAO,QAAA,CAAS,GAAA,CAAI,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAC3B,IAAA,MAAA,CAAO,MAAA,CAAO,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAErB,IAAA,MAAM,IAAA,GAAO,IAAUA,gBAAA,CAAA,eAAA,CAAgB,QAAA,EAAU,SAAU,CAAG,CAAA;AAC9D,IAAA,KAAA,CAAM,IAAI,IAAI,CAAA;AAEd,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,MAAM,CAAA,GAAI,KAAK,WAAA,IAAe,CAAA;AAC9B,MAAA,MAAM,CAAA,GAAI,KAAK,YAAA,IAAgB,CAAA;AAC/B,MAAA,QAAA,CAAS,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,KAAK,CAAA;AAC5B,MAAA,MAAA,CAAO,SAAS,CAAA,GAAI,CAAA;AACpB,MAAA,MAAA,CAAO,sBAAA,EAAuB;AAAA,IAChC,CAAA;AACA,IAAA,MAAA,EAAO;AACP,IAAA,MAAM,EAAA,GAAK,IAAI,cAAA,CAAe,MAAM,CAAA;AACpC,IAAA,EAAA,CAAG,QAAQ,IAAI,CAAA;AAEf,IAAA,IAAI,GAAA,GAAM,CAAA;AACV,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,GAAA,GAAM,sBAAsB,IAAI,CAAA;AAChC,MAAA,QAAA,CAAS,MAAA,CAAO,OAAO,MAAM,CAAA;AAAA,IAC/B,CAAA;AACA,IAAA,IAAA,EAAK;AAEL,IAAA,SAAS,eAAe,EAAA,EAAmB;AAAA,IAG3C;AAEA,IAAA,SAAS,OAAA,GAAU;AACjB,MAAA,oBAAA,CAAqB,GAAG,CAAA;AACxB,MAAA,EAAA,CAAG,UAAA,EAAW;AACd,MAAA,QAAA,CAAS,OAAA,EAAQ;AACjB,MAAA,IAAI,OAAA,CAAQ,aAAA,KAAkB,IAAA,EAAM,IAAA,CAAK,YAAY,OAAO,CAAA;AAAA,IAC9D;AAEA,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,OAAA;AAAA,MACN,IAAA,EAAM,KAAA;AAAA,MACN,cAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF;AACF","file":"engine.cjs","sourcesContent":["/**\n * three.js engine adapter for `@particle-academy/fancy-3d`'s <Canvas>.\n *\n * Mounts a three `WebGLRenderer` + `Scene` + camera into a `<canvas>` overlaid\n * on the Canvas DOM container, then exposes the live `Scene` via\n * `EngineHandle.root` so child components can register meshes alongside the 2D\n * node graph.\n *\n *   import { Canvas } from \"@particle-academy/fancy-3d\";\n *   import { threeEngine } from \"@particle-academy/fancy-3d-three/engine\";\n *\n *   <Canvas engine={threeEngine} style={{ height: 480 }} />\n */\nimport * as THREE from \"three\";\nimport type { CanvasEngine, EngineHandle, ViewportState } from \"@particle-academy/fancy-3d\";\n\nexport const threeEngine: CanvasEngine = {\n  name: \"three\",\n  mount(host: HTMLElement, _viewport: ViewportState): EngineHandle {\n    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });\n    renderer.setPixelRatio(window.devicePixelRatio || 1);\n    const overlay = renderer.domElement;\n    overlay.style.position = \"absolute\";\n    overlay.style.inset = \"0\";\n    overlay.style.width = \"100%\";\n    overlay.style.height = \"100%\";\n    overlay.style.pointerEvents = \"none\"; // the 2D node graph owns interaction\n    overlay.dataset.fancy3dCanvasEngine = \"three\";\n    host.appendChild(overlay);\n\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);\n    camera.position.set(0, 0, 8);\n    camera.lookAt(0, 0, 0);\n\n    const hemi = new THREE.HemisphereLight(0xb3c6ff, 0x1a1a2e, 1.0);\n    scene.add(hemi);\n\n    const resize = () => {\n      const w = host.clientWidth || 1;\n      const h = host.clientHeight || 1;\n      renderer.setSize(w, h, false);\n      camera.aspect = w / h;\n      camera.updateProjectionMatrix();\n    };\n    resize();\n    const ro = new ResizeObserver(resize);\n    ro.observe(host);\n\n    let raf = 0;\n    const loop = () => {\n      raf = requestAnimationFrame(loop);\n      renderer.render(scene, camera);\n    };\n    loop();\n\n    function updateViewport(_v: ViewportState) {\n      // The 3D camera owns its own view; 2D viewport changes are observed but\n      // don't move the camera. Consumers can drive the camera off the scene.\n    }\n\n    function dispose() {\n      cancelAnimationFrame(raf);\n      ro.disconnect();\n      renderer.dispose();\n      if (overlay.parentElement === host) host.removeChild(overlay);\n    }\n\n    return {\n      name: \"three\",\n      root: scene,\n      updateViewport,\n      dispose,\n    };\n  },\n};\n"]}

package/dist/engine.d.cts

@@ -0,0 +1,5 @@
+import { CanvasEngine } from '@particle-academy/fancy-3d';
+
+declare const threeEngine: CanvasEngine;
+
+export { threeEngine };

package/dist/engine.d.ts

@@ -0,0 +1,5 @@
+import { CanvasEngine } from '@particle-academy/fancy-3d';
+
+declare const threeEngine: CanvasEngine;
+
+export { threeEngine };

package/dist/engine.js

@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+
+// src/engine.ts
+var threeEngine = {
+  name: "three",
+  mount(host, _viewport) {
+    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(window.devicePixelRatio || 1);
+    const overlay = renderer.domElement;
+    overlay.style.position = "absolute";
+    overlay.style.inset = "0";
+    overlay.style.width = "100%";
+    overlay.style.height = "100%";
+    overlay.style.pointerEvents = "none";
+    overlay.dataset.fancy3dCanvasEngine = "three";
+    host.appendChild(overlay);
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1e3);
+    camera.position.set(0, 0, 8);
+    camera.lookAt(0, 0, 0);
+    const hemi = new THREE.HemisphereLight(11781887, 1710638, 1);
+    scene.add(hemi);
+    const resize = () => {
+      const w = host.clientWidth || 1;
+      const h = host.clientHeight || 1;
+      renderer.setSize(w, h, false);
+      camera.aspect = w / h;
+      camera.updateProjectionMatrix();
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(host);
+    let raf = 0;
+    const loop = () => {
+      raf = requestAnimationFrame(loop);
+      renderer.render(scene, camera);
+    };
+    loop();
+    function updateViewport(_v) {
+    }
+    function dispose() {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      renderer.dispose();
+      if (overlay.parentElement === host) host.removeChild(overlay);
+    }
+    return {
+      name: "three",
+      root: scene,
+      updateViewport,
+      dispose
+    };
+  }
+};
+
+export { threeEngine };
+//# sourceMappingURL=engine.js.map
+//# sourceMappingURL=engine.js.map

package/dist/engine.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine.ts"],"names":[],"mappings":";;;AAgBO,IAAM,WAAA,GAA4B;AAAA,EACvC,IAAA,EAAM,OAAA;AAAA,EACN,KAAA,CAAM,MAAmB,SAAA,EAAwC;AAC/D,IAAA,MAAM,QAAA,GAAW,IAAU,KAAA,CAAA,aAAA,CAAc,EAAE,KAAA,EAAO,MAAM,SAAA,EAAW,IAAA,EAAM,qBAAA,EAAuB,IAAA,EAAM,CAAA;AACtG,IAAA,QAAA,CAAS,aAAA,CAAc,MAAA,CAAO,gBAAA,IAAoB,CAAC,CAAA;AACnD,IAAA,MAAM,UAAU,QAAA,CAAS,UAAA;AACzB,IAAA,OAAA,CAAQ,MAAM,QAAA,GAAW,UAAA;AACzB,IAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,GAAA;AACtB,IAAA,OAAA,CAAQ,MAAM,KAAA,GAAQ,MAAA;AACtB,IAAA,OAAA,CAAQ,MAAM,MAAA,GAAS,MAAA;AACvB,IAAA,OAAA,CAAQ,MAAM,aAAA,GAAgB,MAAA;AAC9B,IAAA,OAAA,CAAQ,QAAQ,mBAAA,GAAsB,OAAA;AACtC,IAAA,IAAA,CAAK,YAAY,OAAO,CAAA;AAExB,IAAA,MAAM,KAAA,GAAQ,IAAU,KAAA,CAAA,KAAA,EAAM;AAC9B,IAAA,MAAM,SAAS,IAAU,KAAA,CAAA,iBAAA,CAAkB,EAAA,EAAI,CAAA,EAAG,KAAK,GAAI,CAAA;AAC3D,IAAA,MAAA,CAAO,QAAA,CAAS,GAAA,CAAI,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAC3B,IAAA,MAAA,CAAO,MAAA,CAAO,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAErB,IAAA,MAAM,IAAA,GAAO,IAAU,KAAA,CAAA,eAAA,CAAgB,QAAA,EAAU,SAAU,CAAG,CAAA;AAC9D,IAAA,KAAA,CAAM,IAAI,IAAI,CAAA;AAEd,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,MAAM,CAAA,GAAI,KAAK,WAAA,IAAe,CAAA;AAC9B,MAAA,MAAM,CAAA,GAAI,KAAK,YAAA,IAAgB,CAAA;AAC/B,MAAA,QAAA,CAAS,OAAA,CAAQ,CAAA,EAAG,CAAA,EAAG,KAAK,CAAA;AAC5B,MAAA,MAAA,CAAO,SAAS,CAAA,GAAI,CAAA;AACpB,MAAA,MAAA,CAAO,sBAAA,EAAuB;AAAA,IAChC,CAAA;AACA,IAAA,MAAA,EAAO;AACP,IAAA,MAAM,EAAA,GAAK,IAAI,cAAA,CAAe,MAAM,CAAA;AACpC,IAAA,EAAA,CAAG,QAAQ,IAAI,CAAA;AAEf,IAAA,IAAI,GAAA,GAAM,CAAA;AACV,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,GAAA,GAAM,sBAAsB,IAAI,CAAA;AAChC,MAAA,QAAA,CAAS,MAAA,CAAO,OAAO,MAAM,CAAA;AAAA,IAC/B,CAAA;AACA,IAAA,IAAA,EAAK;AAEL,IAAA,SAAS,eAAe,EAAA,EAAmB;AAAA,IAG3C;AAEA,IAAA,SAAS,OAAA,GAAU;AACjB,MAAA,oBAAA,CAAqB,GAAG,CAAA;AACxB,MAAA,EAAA,CAAG,UAAA,EAAW;AACd,MAAA,QAAA,CAAS,OAAA,EAAQ;AACjB,MAAA,IAAI,OAAA,CAAQ,aAAA,KAAkB,IAAA,EAAM,IAAA,CAAK,YAAY,OAAO,CAAA;AAAA,IAC9D;AAEA,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,OAAA;AAAA,MACN,IAAA,EAAM,KAAA;AAAA,MACN,cAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF;AACF","file":"engine.js","sourcesContent":["/**\n * three.js engine adapter for `@particle-academy/fancy-3d`'s <Canvas>.\n *\n * Mounts a three `WebGLRenderer` + `Scene` + camera into a `<canvas>` overlaid\n * on the Canvas DOM container, then exposes the live `Scene` via\n * `EngineHandle.root` so child components can register meshes alongside the 2D\n * node graph.\n *\n *   import { Canvas } from \"@particle-academy/fancy-3d\";\n *   import { threeEngine } from \"@particle-academy/fancy-3d-three/engine\";\n *\n *   <Canvas engine={threeEngine} style={{ height: 480 }} />\n */\nimport * as THREE from \"three\";\nimport type { CanvasEngine, EngineHandle, ViewportState } from \"@particle-academy/fancy-3d\";\n\nexport const threeEngine: CanvasEngine = {\n  name: \"three\",\n  mount(host: HTMLElement, _viewport: ViewportState): EngineHandle {\n    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });\n    renderer.setPixelRatio(window.devicePixelRatio || 1);\n    const overlay = renderer.domElement;\n    overlay.style.position = \"absolute\";\n    overlay.style.inset = \"0\";\n    overlay.style.width = \"100%\";\n    overlay.style.height = \"100%\";\n    overlay.style.pointerEvents = \"none\"; // the 2D node graph owns interaction\n    overlay.dataset.fancy3dCanvasEngine = \"three\";\n    host.appendChild(overlay);\n\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);\n    camera.position.set(0, 0, 8);\n    camera.lookAt(0, 0, 0);\n\n    const hemi = new THREE.HemisphereLight(0xb3c6ff, 0x1a1a2e, 1.0);\n    scene.add(hemi);\n\n    const resize = () => {\n      const w = host.clientWidth || 1;\n      const h = host.clientHeight || 1;\n      renderer.setSize(w, h, false);\n      camera.aspect = w / h;\n      camera.updateProjectionMatrix();\n    };\n    resize();\n    const ro = new ResizeObserver(resize);\n    ro.observe(host);\n\n    let raf = 0;\n    const loop = () => {\n      raf = requestAnimationFrame(loop);\n      renderer.render(scene, camera);\n    };\n    loop();\n\n    function updateViewport(_v: ViewportState) {\n      // The 3D camera owns its own view; 2D viewport changes are observed but\n      // don't move the camera. Consumers can drive the camera off the scene.\n    }\n\n    function dispose() {\n      cancelAnimationFrame(raf);\n      ro.disconnect();\n      renderer.dispose();\n      if (overlay.parentElement === host) host.removeChild(overlay);\n    }\n\n    return {\n      name: \"three\",\n      root: scene,\n      updateViewport,\n      dispose,\n    };\n  },\n};\n"]}