3D that does not pick an engine for you
Describe a scene as plain JSON. Render it in the DOM with no WebGL at all, or hand the same data to Babylon.js or three.js through an adapter you install only if you want it.
Switch the renderer and the scene stays the same, because it is the same data. Drag nodes in the DOM view, change the widgets below, then pick Babylon.js or three.js: the KPI is a live Monitor, the others are painted Card3D meshes. Without WebGL the WebGL renderers are disabled and the DOM view remains.
What it does
A scene is JSON
A Scene is nodes and edges. Each node has a position, a size and a widget: fourteen kinds, from kpi, chart and profile to kanban, table, timeline and form. An agent can write one without touching an engine API.
An engine-pluggable Canvas
<Canvas> defaults to engine="dom", a CSS matrix projection with pan, zoom, a grid and draggable nodes. Pass babylonEngine, threeEngine or your own CanvasEngine to put a WebGL scene alongside the same node graph.
No WebGL in the core
fancy-3d's only peers are React and react-fancy. @babylonjs/core is a peer of fancy-3d-babylon and three is a peer of fancy-3d-three, so you install an engine only if you pick one.
Stage, Monitor and Card3D
Each adapter's /react entry ships <Stage> and <Monitor>, which mounts live, interactive React onto a mesh. createCard3D paints a widget onto an extruded card. The three.js adapter mirrors the Babylon.js one, call for call.
A scene bridge for agents
registerSceneBridge gives an agent scene_describe, scene_get_state, scene_add_object, scene_update_object, scene_delete_object, scene_set_camera and scene_set_background, over a scene of primitive objects your app owns. Every write broadcasts an agent-activity event, so presence layers see what changed.
How it fits
The core is engine-agnostic; each adapter is an optional sibling that brings one WebGL engine.
Human+ bridge
An agent drives this surface over MCP, through the same state a person sees, never the DOM.
import { registerSceneBridge } from "@particle-academy/agent-integrations/bridges/scene";tools: scene_*
Install
The core alone renders in the DOM. Add an adapter (and its engine) only for WebGL.
npm install @particle-academy/fancy-3dnpm install @particle-academy/fancy-3d-babylonnpm install @particle-academy/fancy-3d-three
The packages
Engine-agnostic 3D core — Scene types, the <Canvas> surface, and a DOM/CSS-3D renderer. WebGL engines (Babylon, three.js, …) ship as sibling fancy-3d-* packages.
Babylon.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D, Screen) that mount onto a Babylon Scene.
three.js adapter for fancy-3d — WebGL renderer + the React components (Stage, Monitor, Card3D) that mount onto a three.js Scene. Mirrors fancy-3d-babylon, three.js underneath.
Start with the DOM, add an engine when you need one
The Canvas page shows the DOM and Babylon.js engines side by side; the Stage, Monitor and Card3D pages run each adapter live.