Building 3D scenes requires UI surfaces that project real content onto geometry without the labor of per-face texture mapping. A flat plane lacks physical presence—sign signage, monitors, and dashboards need visible depth (thickness) to read as solid objects inhabiting 3D space, not floating cardboard cutouts. Without primitives like Card3D, authors map canvases to six mesh faces manually or resort to DOM-overlay hacks that ignore 3D depth.

createCard3D is a Babylon.js mesh factory that returns an extruded rectangular box: a width × height front face (painted with color, canvas paint callback, or a WidgetSpec from react-fancy) and thin dark edges wrapping the depth. The depth parameter (default 0.06 world units, like foam-board) controls visual thickness. The optional edge surface colors the five non-front faces; if omitted, they default to near-black. The returned Mesh is ready to position, rotate, and parent in your scene.

Import from @particle-academy/fancy-3d-babylon, call createCard3D({ scene: myBabylonScene, width: 2, height: 1.5, front: { type: 'widget', widget: myReactFancySpec } }) inside your scene setup, and position the returned mesh via mesh.position = new Vector3(x, y, z). The front face auto-renders the widget to a texture; agents can populate the widget spec JSON to drive content agenically.