mcpField
T
threejs-camera-direction

threejs-camera-direction

github.com/scottsttsCreative & media946109 installsUpdated 6d ago
Repository

About threejs-camera-direction

threejs-camera-direction is a skill for designing camera composition, motion, and mode handoffs in Three.js scenes. It is for developers building cinematic or interactive views, and emphasizes explicit camera ownership, constrained input, and transition testing.

Key features

  1. 01Defines framing, scale, lens, and horizon
  2. 02Builds targets in semantic frames
  3. 03Separates position and orientation derivation
  4. 04Constrains orbit and look input
  5. 05Covers camera state restoration and transition tests

Use cases

  1. 01Designing chase, side, or orbit camera rigs
  2. 02Adding bounded pointer-look controls
  3. 03Testing camera handoffs and resize behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-camera-direction

After installing, type/threejs-camera-directionin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlreferences/camera-rig-and-cinematic-systems.md

Details

From the project README

Camera Direction

Treat the camera as an authored visual system, not a passive viewport. Compose the subject, establish scale, choose a stable up frame, and make every mode handoff explicit.

Build order

  1. Define the design frame: subject size, screen occupancy, lens, near/far, motion, and horizon/up convention.
  2. Build camera targets in semantic frames: ship, body surface, docking axis, or scene-authored shot.
  3. Derive position and orientation independently, then combine them once.
  4. Add input orbit/look only inside declared yaw/pitch and spatial constraints.
  5. Add frame-rate-independent follow or a bounded spring where the reference uses inertia.
  6. Snapshot and restore camera projection/state when a scene owns it.
  7. Test mode transitions, cuts, pointer-lock reacquisition, resize, and large coordinates.

Read references/camera-rig-and-cinematic-systems.md for exact chase/side/orbit rigs, projection values, transition rules, floating-origin shot, pointer controls, and implementation limits.

Non-negotiable rules

  • Use subject dimensions to derive offsets; do not tune one fixed distance for differently scaled assets.
  • For planetary motion, derive up from the dominant body rather than global Y.
  • Interpolate position with lerp and orientation with slerp.
  • During an explicit handoff, use one interpolation stage. Do not stack a transition blend and a second follow smoother over the same interval.
  • Re-sync yaw/pitch from the camera when pointer lock is acquired.
  • Update the projection matrix whenever FOV, near, far, or aspect changes.
  • Keep stars or infinite backgrounds camera-relative when large translation would create false parallax or precision loss.
  • Restore camera and input ownership on scene disposal.

Routing boundary

Use $threejs-procedural-animation for object motion timelines, springs, docking, staging, and debris. This skill owns how the scene is viewed and how camera modes hand off.

Comments

Markdown supported