React Three Fiber

Declarative Three.js in React. The GPU is rarely the bottleneck — React reconciliation, draw calls, and per-frame allocations usually are.

Canvas setup

<Canvas
  dpr={[1, 2]}                 // clamp pixel ratio; Retina at 3x is brutal
  gl={{ powerPreference: 'high-performance', antialias: true }}
  frameloop="demand"           // render only when something changes (static scenes)
  camera={{ position: [0, 0, 5], fov: 50 }}
>

• powerPreference: 'high-performance' asks the OS for the discrete GPU, not the iGPU. Big win on laptops.
• Use frameloop="demand" for scenes that come to rest (configurators, viewers). Use the default loop only when something always moves.

The #1 rule: animate by mutation in useFrame, never setState