threejs-atmosphere-aer…
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
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
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-camera-direction --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/threejs-camera-directionContext preview
The summary Claude sees to decide when to auto-load this skill.
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
name: threejs-camera-direction description: 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.
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.
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](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.
differently scaled assets.
transition blend and a second follow smoother over the same interval.
would create false parallax or precision loss.
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.
Example gallery to visually inspect included examples This is a Three.js agent skills pack for producing awesome graphics.
Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space…
Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom…
Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted…
Build a deliberate final-image pipeline for advanced Three.js scenes. Use for depth, normal, albedo, and history ownership; GTAO…
Build silhouette-aware parallax occlusion mapping in Three.js WebGPU and TSL. Use for height-field ray marching, relief UVs,…
Build coupled precipitation and affected surfaces in Three.js. Use for falling snow, snow accumulation, model snow caps, wet…