3D scenes without the weight

Decide what the 3D is for

A 3D scene in a hero does one of two jobs. Either it is the product — a printed bracket, a car, a device — or it is atmosphere: an orbit, a field of particles, a slowly turning shape that gives the page depth. Both are legitimate. What fails is a scene that tries to be both, or a scene added because the tooling made it easy.

Name the job in your prompt. "The hero shows the actual bracket customers will receive" leads to accurate materials and a neutral background. "The hero has an abstract orbit that sets a scientific tone" leads to simple geometry and a stronger composition around the headline.

Set a budget first

Three numbers keep a scene honest: file size, draw calls and pixel ratio.

• File size. Under 200KB for a product model as a compressed GLB; under 50KB for abstract geometry that can be generated in code. State the number.
• Draw calls. One or two meshes, one or two lights. A scene with twelve objects and shadows is a desktop demo, not a hero.
• Pixel ratio. Cap devicePixelRatio at 1.5 on desktop and 1 on mobile. Retina rendering of a full-width canvas is the fastest way to a hot phone.

Add a time budget too: the canvas should not block first paint. Lazy-load the scene after the headline renders and show a poster in the meantime.

Lighting that flatters

Most amateur scenes are lit like a laboratory: one white point light overhead. Product scenes look best with a soft key light at 45°, a dimmer fill from the opposite side and a faint rim from behind to separate the object from the background. In react-three-fiber that is two directional lights and an ambient at low intensity — nothing exotic.

Match the scene's background to the page background exactly and let the object float without a visible floor. If a floor is needed, use a contact shadow rather than a real shadow map.

Materials: a slightly rough standard material reads as premium; mirror-perfect metal reads as a stock render. Say "matte" or "satin" in the brief.

Interaction and idle motion

Idle motion should be slow — 10 to 15 degrees per second of rotation, or a gentle float — and interaction should be forgiving. The pattern we use: the object auto-rotates; dragging takes over; releasing eases back to auto-rotation over a second or two. Never require interaction to see the object properly.

Cursor-tracking tilt (the object leaning a few degrees toward the pointer) is cheap and effective on desktop; disable it on touch, where there is no hover.

Fallbacks

Three fallbacks, in order:

1. Reduced motion: render a single still frame of the scene — no rotation, no float.
2. Low power or mobile: replace the canvas with a static poster (a rendered image of the same scene) and keep the layout identical.
3. No WebGL: the same poster. Detect once, never show a broken canvas.

Because the poster is used in three places, ask the builder to export it from the scene itself so it matches.

The brief

A 3D hero paragraph in a library prompt looks like this:

A canvas on the right half with a matte, low-poly bracket (compressed GLB under 200KB) lit by a soft key at 45°, a fill and a faint rim; the background matches the page. The model auto-rotates at 12°/s, dragging rotates it, release eases back over 1.5s. Pixel ratio capped at 1.5 desktop / 1 mobile, scene lazy-loaded after the headline paints. Fallbacks: a still frame under reduced motion, a poster image below 768px and when WebGL is unavailable.

That is a scene a builder can produce in one pass, and one that will still run on a three-year-old phone.