Without a declarative 3D scene wrapper, you're hand-rolling three.js setup, camera controls, render loops, and 2D-to-3D projection math — a tedious barrier to embedding React components as first-class 3D objects. DOM scraping and static screenshots don't work for interactive surfaces shared with agents.

Stage is a React component container that owns the three.js WebGLRenderer, Scene, PerspectiveCamera with OrbitControls, and render loop. It exposes scene context (renderer, scene, camera, canvas, overlay root, frame subscription) via useStage() and pairs with Monitor — which projects world-space 3D screens into interactive DOM overlays — to host real React children at arbitrary 3D positions. Default setup includes hemisphere + directional lights and an orbiting camera; bare={true} skips those for custom lighting.

Import Stage and Monitor from @particle-academy/fancy-3d-three/react, wrap Monitor elements (each positioned at [x, y, z] with width and height) inside <Stage cameraRadius={10}>, and place real React components — including react-fancy primitives — as Monitor children. Call useStage() from within to access the scene and subscribe to frame ticks for custom effects; three is a required peer dependency.