Build Game Camera Controls

From the author

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.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a systematic framework for building robust camera controls in Three.js. It emphasizes gameplay readability by decoupling camera movement from jittery render states and implementing clear policies for framing, occlusion, and input handling. The guide covers the full lifecycle of camera development, from defining core constraints like zoom and orbit limits to implementing complex behaviors such as lock-on, camera shake, and touch-based interactions.

What it does

Defines authoritative targets and framing constraints for 3D game cameras.
Implements smooth interpolation for camera movement and look-at behavior.
Configures collision and occlusion policies to maintain player visibility.
Manages temporary camera modifiers like shake and lock-on effects.
Provides guidelines for touch-based camera control zones and reset functionality.
Outlines a verification process for testing camera behavior across various game scenarios.

When to use it

When developing or tuning camera systems in a Three.js environment.
When you need to ensure consistent player visibility in complex 3D scenes.
When implementing specialized camera behaviors like isometric views or follow-cams.
When preparing a game for multi-platform input, including touch controls.
When performing regression testing on camera behavior and performance.

Advantages

Ensures gameplay readability by prioritizing clear framing.
Prevents common issues like camera jitter and wall clipping.
Provides a modular approach to layering camera effects.
Improves user experience through thoughtful touch control separation.
Reduces bugs through a structured verification checklist.

Usage examples

“Implement a smooth follow camera for a player character in Three.js.”: The agent will provide a structure to decouple the camera from the player's immediate jittery movement, applying smooth interpolation to the position and look-at targets.
“How should I handle camera occlusion when the player walks behind a wall?”: The agent will suggest a collision policy that prevents the camera from being blocked by geometry without making the entire scene invisible.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/mengto/build-game-camera-controls/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip build-game-camera-controls.zip -d .agents/skills

Documentation by Meng To

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.

Files

ATTRIBUTION.mdAdded by AutoGineer880 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md1.2 KiB
agents/openai.yaml216 B

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Web 3d Asset Pipeline
OpenAIOfficial
Prepare and optimize browser-game 3D assets. Use when the user asks for GLB or glTF shipping work, including Blender cleanup and export, collision or LOD setup, compression, texture packaging, and runtime validation.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Link-onlyGitHub stars of the source repository7.8k
3d Sky Background
Meng To· Community
Guidelines for creating camera-correct, coherent sky backgrounds and environment lighting for 3D scenes.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Design Action Combat
Meng To· Community
A framework for designing and testing readable, state-driven tactical combat systems for web-based games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Author Game Levels
Meng To· Community
A structured workflow for designing and validating flat-plane Three.js game levels with a focus on readability and deterministic data.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Build Hybrid Game Assets
Meng To· Community
A structured workflow for planning, creating, and integrating hybrid 3D and 2D assets into Three.js web games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k
Tune Enemy AI
Meng To· Community
A framework for designing, balancing, and testing legible, fair, and deterministic combat AI for action games.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository7.3k