mcpbeat Sign in

Threejs Camera Direction Agent 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 lifecycle restoration.

3k tokens
context cost
the whole folder, loaded on every use
3
files
instructions only
0
copies elsewhere
how many repositories repackaged it
527
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-camera-direction

The instruction itself

4 sections, as written by the author

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

  • Define the design frame: subject size, screen occupancy, lens, near/far,

motion, and horizon/up convention.

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

or scene-authored shot.

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

uses inertia.

  • Snapshot and restore camera projection/state when a scene owns it.
  • 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.

Other skills for the same job

different authors, same section of the catalogue
Skill Creator
by anthropics
vendor ×10

Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

56k tokens scripts
Skill Creator
by vercel-labs
vendor ×10

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

12k tokens scripts
Skill Creator
by JayZeeDesign
×9

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

10k tokens scripts
Template Skill
by JayZeeDesign
×7

Replace with description of the skill and when Claude should use it.

35 tokens
Dispatching Parallel Agents
by ZhanlinCui
×5

Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies

2k tokens
Skill Development
by anthropics
vendor ×4

This skill should be used when the user wants to "create a skill", "add a skill to plugin", "write a new skill", "improve skill description", "organize skill content", or needs guidance on skill structure, progressive disclosure, or skill development best practices for Claude Code plugins.

9k tokens
Find Skills
by sanity-io
vendor ×4

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

1k tokens
Writing Skills
by ZhanlinCui
×4

Use when creating new skills, editing existing skills, or verifying skills work before deployment

26k tokens scripts

How to use it

Copy the folder

Take scottstts/threejs-camera-direction from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.