threeEngine solves the problem of rendering 3D scenes using three.js alongside fancy-3d's 2D node graph on a single surface. Without it, you'd need to manually wire up a three.js WebGLRenderer, Scene, camera, lights, and resize handling—a boilerplate tangle that couples your layout to graphics plumbing and breaks the moment you reposition a 2D node that should move 3D meshes with it.

threeEngine is a CanvasEngine adapter (a plain object, not a React component) that implements the three.js half of the contract. It wires a WebGLRenderer + Scene + PerspectiveCamera + HemisphereLight into the Canvas host, exposes the live three.js Scene via EngineHandle.root so meshes can be registered alongside the 2D node graph, and owns the animation loop and resize observer. It is a rendering-only adapter—stable handles for agent mutation are not yet wired into the three.js runtime (unlike future Mouse3D or GeometryBrush widgets); if you need agent-driven 3D manipulation, compose your own bridge using the exposed scene root.

Import threeEngine from @particle-academy/fancy-3d-three/engine, then pass it to . The scene root is accessible inside child adapters or hooks that branch on engine?.name === "three"; from there, call three.js directly to add meshes. It requires three (>=0.160.0) as a peer dependency and works alongside the DOM 2D surface with no extra configuration.