Three.js Essentials

# Three.js Essentials

## Minimal scene
```js
import * as THREE from 'three'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000)
camera.position.z = 5

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(innerWidth, innerHeight)
renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
document.body.appendChild(renderer.domElement)

const geo = new THREE.BoxGeometry(1, 1, 1)
const mat = new THREE.MeshStandardMaterial({ color: 0x00ff88 })
const cube = new THREE.Mesh(geo, mat)
scene.add(cube)

scene.add(new THREE.AmbientLight(0xffffff, 0.5))
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(5, 5, 5)
scene.add(dir)

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(innerWidth, innerHeight)
})
```

## Cameras
- `PerspectiveCamera(fov, aspect, near, far)` -- natural perspective
- `OrthographicCamera(left, right, top, bottom, near, far)` -- no perspective
- Orbit controls: `import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'`

## Geometries
`BoxGeometry`, `SphereGeometry`, `PlaneGeometry`, `CylinderGeometry`, `TorusGeometry`, `TorusKnotGeometry`, `BufferGeometry` (custom)

## Materials
- `MeshBasicMaterial` -- no lighting
- `MeshStandardMaterial` -- PBR (roughness + metalness)
- `MeshPhysicalMaterial` -- PBR + clearcoat, transmission
- `ShaderMaterial` -- custom GLSL
- `MeshNormalMaterial` -- debug normals

## Lights
- `AmbientLight` -- uniform fill
- `DirectionalLight` -- sun-like parallel rays
- `PointLight` -- omnidirectional from point
- `SpotLight` -- cone
- `HemisphereLight` -- sky/ground gradient

## Loading models (GLTF)
```js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

const draco = new DRACOLoader()
draco.setDecoderPath('/draco/')
const loader = new GLTFLoader()
loader.setDRACOLoader(draco)
loader.load('/model.glb', (gltf) => {
  scene.add(gltf.scene)
  // Play animation
  const mixer = new THREE.AnimationMixer(gltf.scene)
  mixer.clipAction(gltf.animations[0]).play()
  // update mixer in animate loop: mixer.update(delta)
})
```

## Textures
```js
const loader = new THREE.TextureLoader()
const map = loader.load('/diffuse.jpg')
const mat = new THREE.MeshStandardMaterial({ map, roughnessMap, normalMap })
```

## Performance tips
- Reuse geometries and materials across meshes.
- Use `InstancedMesh` for many identical objects.
- Compress models with Draco / Meshopt.
- `renderer.shadowMap.enabled = true` only when needed.
- Dispose: `geo.dispose()`, `mat.dispose()`, `texture.dispose()`.
- Limit draw calls; merge static meshes with `BufferGeometryUtils.mergeGeometries`.