Updated
Three.js is the base for most of the sites here, usually through React Three Fiber on React and Next.js projects. Spline is the no-code option — designers build the scene visually and embed it. Blender does the modelling either way. For simple depth and perspective, CSS 3D transforms are enough and add no JavaScript. WebGPU is starting to appear for heavier scenes but browser support is still patchy.
Small models — under 1MB, compressed with Draco or Meshopt. Baked lighting instead of real-time shadows. Textures at the size they’re displayed, not 4K. Load the scene after the page is readable, not before. And render a still or a video on devices that can’t handle it. The good sites here are interactive in two seconds; the weak ones hide behind a loader for ten.
Usually not the full scene. Phones can render it, but it drains battery, heats the device and stutters on anything older than two years. Most sites in this collection serve a pre-rendered video or image on mobile and keep the interactive scene for desktop. If you must keep it, drop the polygon count and turn off post-processing.
It’s neutral if the content is in the HTML and the scene loads after it. It’s bad if the scene blocks rendering or the text lives inside a canvas. Keep your headings, copy and links as normal HTML. Treat the 3D as a layer on top. And watch Core Web Vitals — a heavy scene can push Largest Contentful Paint past the threshold on its own.
When the product is physical or spatial — hardware, furniture, architecture, anything the visitor would want to turn over in their hands. Also for brands where the object is the identity. It isn’t worth it as decoration. A floating shape that has nothing to do with the product costs days of work and a second of load time for no gain.