THREE.JS / FOUNDATIONS 196
Interfaces can orbit.
A shared scene graph drives WebGL geometry, CSS3D cards, and CSS2D labels through one camera. Change the layout and watch ordinary DOM become a spatial interface.
Initializing
WebGL2
Preparing the mixed renderer stack.
- cards
- —
- layout
- —
- labels
- —
- WebGL draws
- —
Spatial layoutCSS transforms
Renderer ownershipone camera
WebGL · rings, frames, and glow
CSS3D · full DOM transforms
CSS2D · translation-only labels
Mixed renderer unavailable.
Drag the transparent stage to orbit · scroll to dolly · press R to reset
Next: instance path →LAB 196 / CSS3D + CSS2D + WEBGL