three-camera-rig-cinematography

Installation
SKILL.md

Three.js Camera Rigs and Cinematography

What this builds

A production camera system that manages camera positioning, movement, transitions between viewpoints, and cinematic techniques (dolly, truck, crane, focus pull). The finished system supports multiple rig types (orbit, path, static), smooth interpolation between them, scroll-driven camera movement, and correct resize/aspect-ratio handling.

  • Rig abstraction: orbit, dolly path, static, follow, first-person
  • Smooth interpolation between viewpoints (position + target + FOV)
  • Scroll-driven camera path with CatmullRomCurve3 waypoints
  • Focal length / FOV control with cinematic presets
  • Lerped transitions with configurable easing and duration
  • Correct aspect ratio handling on resize
  • Full disposal of controls and animation state

When to use / when not to

  • Use when your 3D scene needs camera movement beyond a static viewpoint: product orbit, fly-through, scroll-driven cinematic, cut between shots.
  • Use when you need to control the "feel" of the camera: focal length, damping, constraints, look-at smoothing.
  • Do NOT use for simple pointer-based scene interaction (hover, click). That is three-raycast-interaction.
  • Do NOT use for fullscreen shader backgrounds that track mouse position. That is a uniform, not a camera rig.
  • If you just need basic OrbitControls with no cinematography, Three.js's OrbitControls from examples or drei's <OrbitControls> is sufficient without this toolkit.
Installs
2
First Seen
Aug 30, 2026
three-camera-rig-cinematography — avnehsbhatia/ultraui