React Three Fiber (R3F) 3D Experience Skill

Guides building production 3D web experiences that are performant, SSR-safe (Next.js), and don't tank Core Web Vitals or mobile framerate.

Setup essentials

npm i three @react-three/fiber @react-three/drei
npm i -D @types/three

R3F components are client-only — the Canvas and everything inside it must live in a "use client" boundary. In Next.js, dynamically import the whole 3D scene with ssr: false to avoid hydration mismatches:

const Scene = dynamic(() => import('@/components/three/Scene'), { ssr: false });