| name | threejs |
| description | Three.js — WebGL library for 3D graphics in the browser with scene graph, materials, loaders, and post-processing. |
scene setup
new THREE.Scene(), new THREE.PerspectiveCamera(75, aspect, 0.1, 1000), new THREE.WebGLRenderer({ antialias: true }). renderer.setSize(), renderer.setAnimationLoop(). Append canvas to DOM.
geometries & materials
BoxGeometry, SphereGeometry, PlaneGeometry, BufferGeometry with custom attributes. MeshStandardMaterial, MeshPhysicalMaterial (PBR), MeshBasicMaterial (unlit). Map textures via material.map.
lighting
AmbientLight (base fill), DirectionalLight (sun), PointLight (bulb), SpotLight (cone). HemisphereLight for sky/ground color. Shadows: renderer.shadowMap.enabled = true, light.castShadow = true.
animations
requestAnimationFrame loop or renderer.setAnimationLoop. Update properties per frame. GSAP + three.js for tweened values. Use Clock for delta time.
OrbitControls
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. Attach to camera + domElement. Enable damping, zoom limits, auto-rotate.
loaders
GLTFLoader (models), FBXLoader, TextureLoader, DRACOLoader (compressed). Use useLoader in R3F + React. Manage loading state with LoadingManager.
shaders
ShaderMaterial with custom vertex/fragment GLSL. RawShaderMaterial for no built-in uniforms. uniforms object for JS-to-GPU data. Post-processing via EffectComposer.
post-processing
EffectComposer, RenderPass, UnrealBloomPass, SSAOPass, DotScreenPass. Import from three/addons/postprocessing/. Multi-pass rendering pipeline.
best practices
Dispose geometries/materials on unmount (geometry.dispose()). Use BufferGeometry over Geometry. Batch draw calls. Use LOD for distance-based detail. Prefer instancing for many similar objects.
