Add 3D to your site without slowing it down

3D sells, but only if it stays at 60fps on a mid-range phone. The trick is to keep the 3D budget tiny: one canvas, one light, one low-poly mesh.

We use Three.js with a custom ShaderMaterial and no post-processing. The cube or product spins at 0.003 rad/frame and reacts to pointer with a small tilt — no physics, no shadows.

Load only once: the 3D chunk is lazy-loaded after the hero, and we respect prefers-reduced-motion. If the device cannot do WebGL, we fall back to a static image — no blank space.

Result: the DLI Coweb products page shows a Three.js mockup per product plus a small accent cube, all under 80KB JS extra. Pages still score 95+ on Lighthouse.

If you add 3D, measure with PageSpeed Insights before and after — if LCP moves, the 3D costs too much.