Not everything in the scene needs to be 3D
Technology
Three.js hands you a scene graph, a camera, and a render loop so you are not writing raw WebGL calls by hand. What it will not decide for you is how much of an effect actually has to exist in three dimensions. That decision is usually the one that keeps the frame rate.
We use it for background scenes and launch moments: the metaball field behind IBM's AI Alliance site, the portal and starfield behind Hypermode. Both are backgrounds, which means both spend their budget on something nobody came to the page to look at. That is the constraint we design against.
Scene work
How we build a three.js scene next to a React app
- React owns the page, three.js owns the canvas
On Hypermode the scene is vanilla three.js behind a custom MVC layer, with its methods called from the React frontend through a global store. React never renders the scene, it drives it, and it disposes of the canvas on unmount, because a WebGL context nobody tears down is a leak.
- Use the cheapest dimension that reads
Hypermode's portal looks like a sphere. It is a 2D composite, because the camera orbits the center and a sphere would look identical from every angle anyway. The nebula behind it is tiled Perlin noise, dithered to kill the color banding. Neither one is 3D. Neither one needed to be.
- A background has to yield to the content
On the AI Alliance site the metaballs move away from the camera and go grayscale as you scroll, then come back at the bottom of the page. The scene is not decoration you set once and forget. It is a layer that has to get quieter wherever there is something to read.
