← LeaderboardThe Skill Leaderboard

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

Description awaits a fresh source check.

Published by scottstts ↗scottstts/Threejs-Awesome-Graphics-Agent-Skills

Try your first task

Plan a scale-aware camera design frame

Start a fresh conversation. Replace the highlighted placeholders.

Use the threejs-camera-direction skill to create a small camera design plan for [Three.js subject or scene]. Specify subject size and screen occupancy, lens and clipping range, the horizon or up convention, one semantic camera target, and how camera state will be restored when the scene is disposed.

Required inputs

  • Description and dimensions of the subject
  • Desired shot or camera mode
  • Scene scale and horizon/up convention

Previously published starter task based on a pinned source version; check the source and required inputs before running. Task evidence ↗

SKILL.md

name: threejs-camera-directiondescription: Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

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.