Without a pluggable engine adapter, Canvas would either be locked into a single 3D backend (forcing Babylon onto non-Babylon users, or requiring rewrites to swap engines) or limited to 2D only. Custom engines demand ad-hoc integration code scattered across consumers. babylonEngine solves this by implementing a stable CanvasEngine interface that decouples the core from Babylon—other engines (Three.js, WebGPU, WebXR) plug in identically.

babylonEngine is a CanvasEngine object that mounts a Babylon.js Scene onto <Canvas>'s DOM container via a transparent <canvas> overlay. It exposes the live Scene via EngineHandle.root, so children can register 3D meshes — and layers the 2D pan/zoom surface on top with full interactivity. It is an optional peer dependency: only projects building 3D scenes need @babylonjs/core.

Import from @particle-academy/fancy-3d-babylon/engine and pass it directly to <Canvas engine={babylonEngine}>. The overlay mounts immediately; access the scene via context-aware children (e.g., <Stage> and <Monitor> from @particle-academy/fancy-3d-babylon/react) or by narrowing EngineHandle.root as BJScene when the engine name is "babylon".