Why 3D is worth it
A globe of installations, a product you can turn, a map of case results: interactive 3D can show in two seconds what a paragraph fails to say. The goal isn't spectacle. It's giving visitors something they can use to decide.
Rule 1: don't load it until it matters
var io = new IntersectionObserver(function (entries) {
if (!entries[0].isIntersecting) return;
io.disconnect();
loadScene(); // import Three.js, build the scene
}, { rootMargin: '400px' });
io.observe(document.querySelector('[data-scene]'));The library, the models and the textures all wait. Until then, a lightweight poster image holds the space so nothing jumps when the scene arrives.
Rule 2: pause it when nobody's looking
A render loop that keeps running below the fold burns battery and steals frames from scrolling. Keep the same observer and pause and resume. Stop it on hidden tabs too.
Rule 3: draw fewer pixels on phones
Phones have very dense screens. Rendering at their full pixel ratio multiplies the work for detail nobody can see at arm's length.
renderer.setPixelRatio(matchMedia('(pointer: coarse)').matches ? 1 : Math.min(devicePixelRatio, 2));Rule 4: a fallback that still tells the story
For visitors with reduced motion turned on, and for older devices, show a still frame of the scene with the same information. The point of the 3D is the information; the motion is a bonus. (Designing that still frame on purpose, rather than just switching things off, is the subject of Reduced motion without losing the magic.)
Rule 5: measure on a real phone
Lighthouse on a desktop tells you very little. Test on a mid-range phone over a normal connection, and look at when the first screen appears and whether scrolling stays smooth once the scene is running.
What to put in the CMS
Keep the data (locations, products, results) in Webflow collections and let the scene read it from data- attributes on hidden list items. Your team adds an item, publishes, and the 3D updates itself, no developer needed.