THREE.JS / FOUNDATIONS 149

Make the scene speak.

Canvas pixels are only one layer of a 3D interface. Attach accessible HTML labels, transform DOM cards in 3D, and keep a crisp SVG diagram beside the scene while the same camera and interaction model stay live.

Initializing Preparing renderer

Preparing the WebGPU/WebGL scene and overlay renderers...

selection: -
CSS2D: -
CSS3D: -
SVG faces: -
camera: -
draws: -

Overlay layerssame scene graph, different outputs

SVG quality animate station orbit

CSS2D labels use translation only. CSS3D cards use browser transforms; SVG is a vector fallback with no texture, shadow, or advanced shading support.

SVG vector companionreadying

SVGRenderer will render a small accessible vector status diagram beside the 3D scene.

Ownership and interactionwaiting

3D station meshes-

HTML objects-

SVG objects-

The canvas owns geometry and materials; overlay renderers own their DOM/SVG elements and are released separately.

Try ?forceWebGL=1 for the WebGL2 canvas path. CSS2D/CSS3D/SVG are addon renderers with different capabilities; they are compositing layers, not interchangeable material systems.

THREE.JS FOUNDATIONS LAB