Skip to main content
skill CX Codex

build-game-camera-controls — Claude Code skill for Three.js cameras

A skill for building and tuning Three.js game cameras: isometric framing, follow, orbit limits, occlusion, lock-on, shake and touch gestures.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-code
Open on GitHub

What build-game-camera-controls does

The skill sets an order for camera work in a Three.js game. Readable gameplay first, cinematic feel second: one authoritative target, camera bounds, zoom range, collision and occlusion policy, reduced-motion behavior.

Two instruction blocks sit inside. Implement asks you to smooth position and look-at targets separately and never bind the camera straight to jittery render state. Orbit, pitch and zoom get clamped, and walls or props must not hide the player without making geometry invisible globally. Lock-on, scripted moments and shake are treated as temporary modifiers layered over the base camera. On touch, camera gesture zones stay separate from movement and action controls, with a reset framing option.

Verify lists what to test: corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion, portrait and landscape. It also says to confirm camera behavior does not break targeting, UI or performance. If your game already ties the camera directly to render state, that is a reason to rewrite the binding before you start tuning feel.

What it helps with

  • smooth camera follow without jitter
  • clamp orbit, pitch and zoom to sane limits
  • keep walls and props from hiding the player
  • layer lock-on and shake as temporary modifiers
  • separate touch camera gestures from movement controls

Example prompts for the agent

  • Set up an isometric camera for my Three.js game, keep the player in frame
  • Add a follow camera with smoothing and zoom limits
  • Check the camera in a tunnel and near tall props, the player should stay visible

How to install build-game-camera-controls

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-code

2Manually: put the files in place

~/.claude/skills/build-game-camera-controls/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/build-game-camera-controls/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about build-game-camera-controls

How do I install build-game-camera-controls in Claude?

Run npx skills add MengTo/Skills --skill build-game-camera-controls -a claude-code. The skill file then lives at ~/.claude/skills/build-game-camera-controls/SKILL.md.

What does build-game-camera-controls do?

It helps implement or tune a Three.js game camera: isometric framing, follow behavior, orbit and zoom limits, occlusion, lock-on, shake and touch controls.

What does the skill tell you to verify?

Corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion and both screen orientations. It also asks you to confirm the camera does not break targeting, UI or performance.

Source text

SKILL.md · MIT
---
name: build-game-camera-controls
description: Implement or tune Three.js game cameras. Use for isometric framing, follow behavior, orbit/zoom limits, occlusion, lock-on, camera shake, touch camera controls, and camera regression tests.
---

# Build Game Camera Controls

Keep gameplay readable before making the camera cinematic. Define one authoritative target, camera bounds, zoom range, collision/occlusion policy, and reduced-motion behavior.

## Implement

- Smooth position and look-at targets independently; never bind the camera directly to jittery render state.
- Preserve player, immediate threat, objective, and interaction cues in frame at the intended distance.
- Clamp orbit, pitch, and zoom; prevent walls or props from hiding the player without making geometry invisible globally.
- Treat lock-on, scripted moments, and shake as temporary modifiers layered over the base camera.
- On touch, separate camera gesture zones from movement/action controls and provide reset framing.

## Verify

Test corners, tall props, tunnels, multiple enemies, lock-on switching, pause, reduced motion, portrait, and landscape. Confirm no camera behavior breaks targeting, UI, or performance.

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →

From the same set148

tune-enemy-ai A skill for building, debugging and balancing combat enemy AI: aggro, target selection, navigation, attack telegraphs and boss behavior. CX Codex +1 1,200installs build-hybrid-game-assets A skill that helps you choose how to build assets for a Three.js or web game: imported meshes, procedural geometry or 2D media. CX Codex +1 1,200installs author-game-levels Builds and refines readable, flat-plane Three.js game levels. Useful for tuning camera corridors, collision layers, motivated lighting, and browser playthroughs. CX Codex +1 1,200installs build-isometric-arpg A skill that walks the agent through building a playable isometric ARPG: game loop, camera, combat, zones, progression and saves. CX Codex +1 1,300installs publish-project-to-github Packages a local project into a GitHub repository, audits files for leaked secrets, generates a verified README, and configures GitHub Pages. CX Codex +1 1,100installs build-interactive-particle-trail A skill for pointer-driven particle trails: the cursor or finger leaves discrete motes that fly on their own path. Useful in 3D scenes and landing pages. CX Codex +1 1,100installs web-technique-to-skill Turns a visual or interaction technique you already built into a reusable web-design skill, with a demo that proves both the mechanism and the visual fidelity. CX Codex +1 1,100installs add-mouse-driven-orbit Adds subtle mouse-driven orbit and parallax to Three.js hero sections without OrbitControls. Useful for cinematic headers that react to cursor movement. CX Codex +1 1,200installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor