3D
Engine-agnostic 3D scenes, rendered in the DOM or through Babylon.js or three.js: scenes as data, the WebGL adapters you add only when you need them, and the scene bridge.
0/3 lessons
0%
One scene, swappable engines
~8 min
@particle-academy/fancy-3d is the engine-agnostic core: the Scene types, the <Canvas> surface and a DOM renderer. It has no dependencies at all: its peers are React 19 and, optionally, react-fancy. A page that shows a scene does not ship a WebGL engine.
A scene is plain JSON: { nodes, edges }. A node has an id, a position (x, y, optional z), an optional size and a widget, which is a discriminated union on kind with fourteen kinds, from kpi and chart to table, form and code. An edge joins two node ids, with an optional label and curve.
Rendering is per engine, through a WidgetAdapter: the scene data never changes, only the adapter does. The DOM adapter returns React elements, a Babylon adapter returns a mesh, and a three.js adapter returns an Object3D.
<Canvas> takes the engine as a prop. engine defaults to "dom", and a WebGL engine is passed as an object, engine={babylonEngine}, never as the string "babylon".
The same idea runs through fancy-map, which is not one of the Features: one <Map> over OpenStreetMap (via Leaflet) or Google Maps, swapped with its provider prop.