Three.js

Overview

Three.js is a JavaScript library for creating interactive 3D graphics in the browser. It provides a scene graph, PBR materials, lighting, model loaders (glTF, FBX), and performance tools such as instanced rendering. React Three Fiber (R3F) is a declarative React renderer for it, with Suspense-based loading and automatic disposal.

Versions checked: three 0.186 (r186), @react-three/fiber 9.8, @react-three/drei 10.7. Things that differ from older tutorials:

• Install from npm and import addons from three/addons/... (for example three/addons/controls/OrbitControls.js); the old three/examples/jsm/... paths and outputEncoding / Texture.encoding (removed in r152, now outputColorSpace / colorSpace) are legacy.
• THREE.Clock is deprecated since r182; use THREE.Timer (timer.update() then timer.getDelta()).
• WebGPURenderer and node materials come from three/webgpu, shaders written in TSL from three/tsl. WebGPU renderer async methods (renderAsync, computeAsync) are deprecated since r180.
• DRACOLoader.setDecoderConfig() is deprecated (r185); Draco will always use WASM.
• @react-three/fiber 9 pairs with React 19; v8 pairs with React 18. @react-three/drei 10 needs R3F 9.

Instructions