Threejs Camera Direction

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.

1. Build camera targets in semantic frames: ship, body surface, docking axis,

or scene-authored shot.

1. Derive position and orientation independently, then combine them once.
2. Add input orbit/look only inside declared yaw/pitch and spatial constraints.
3. Add frame-rate-independent follow or a bounded spring where the reference

uses inertia.

1. Snapshot and restore camera projection/state when a scene owns it.
2. Test mode transitions, cuts, pointer-lock reacquisition, resize, and large

coordinates.

Read [references/camera-rig-and-cinematic-systems.md](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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: scottstts
• Source: scottstts/Threejs-Awesome-Graphics-Agent-Skills
• License: MIT

Install and usage instructions live in the source repository linked above.