Building a WebGL hero with Three.js

The best 3D on a marketing site is the kind you feel before you notice. It should never fight the content, never spin the fans on a MacBook, and never load at all on a device that can't afford it.

Three rules before any geometry

• Cap the pixel ratio — DPR 3 renders 9× the fragments of DPR 1.
• Pause on blur and off-screen — never burn GPU on a hidden tab.
• Detect low-power up front and render one static frame instead.

Those three decisions matter more than the shader itself. Get them right and you can afford something genuinely beautiful in the frames that remain.

The render loop

const dpr = Math.min(window.devicePixelRatio, 1.6);
renderer.setPixelRatio(dpr);

let raf = 0;
const tick = () => {
  if (document.hidden || !inView) { raf = requestAnimationFrame(tick); return; }
  mesh.rotation.y += 0.0016;
  material.uniforms.uTime.value = clock.getElapsedTime();
  renderer.render(scene, camera);
  raf = requestAnimationFrame(tick);
};

Everything else — dispose geometries and materials on unmount, drop the WebGL context, remove listeners — is just being a good guest in someone's browser tab.