skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

build-game-camera-controls

Implement and tune Three.js game cameras with follow, orbit, lock-on, and shake behavior.

5.7k|685|Updated Feb 3, 2026
Search Tags:#Three.js#occlusion#camera controls#camera shake#game camera#Game development#lock-on
One-click install
npx skills add https://github.com/MengTo/Skills --skill build-game-camera-controls
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-game-camera-controls
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/game-development/build-game-camera-controls
Command: npx skills add https://github.com/MengTo/Skills --skill build-game-camera-controls

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Game cameras often break readability by jittering, clipping through walls, hiding the player, or fighting with UI and touch controls. This Skill provides a structured playbook for building Three.js camera systems that keep gameplay readable before adding cinematic polish.

Core Features & Use Cases

  • Camera Behavior Implementation: Smooth position and look-at targets independently, clamp orbit/pitch/zoom, and handle occlusion so walls and props never hide the player.
  • Layered Modifiers: Treat lock-on, scripted moments, and camera shake as temporary layers over a stable base camera, with touch gesture zones separated from movement controls.
  • Regression Verification: Test corners, tunnels, multiple enemies, lock-on switching, pause, reduced motion, and portrait/landscape orientations.
  • Use Case: When building an isometric Three.js action game, use this Skill to define one authoritative camera target, set zoom bounds, add lock-on for combat, and verify the camera never breaks targeting or UI.

Quick Start

Use the build-game-camera-controls skill to implement an isometric follow camera with zoom limits and lock-on for my Three.js game.

Frequently Asked Questions about build-game-camera-controls

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a follow camera in Three.js?▼

Smooth the camera position and look-at targets independently rather than binding the camera directly to jittery render state. Define one authoritative target, then clamp orbit, pitch, and zoom so the player, threats, and objectives stay in frame at the intended distance.

How do I stop walls from hiding the player in a Three.js game camera?▼

Handle occlusion by clamping the camera against level geometry or fading blocking props, without making geometry invisible globally. Test corners, tall props, and tunnels to confirm the player stays visible in every scenario.

How should camera shake and lock-on be layered in a game camera?▼

Treat lock-on, scripted moments, and shake as temporary modifiers layered over the base camera rather than replacing it. This keeps the underlying framing stable and lets modifiers be added or removed without breaking targeting or UI.

How do I add touch camera controls without breaking movement controls?▼

Separate camera gesture zones from movement and action controls on touch screens, and provide a reset framing option. Verify behavior in both portrait and landscape orientations so gestures never conflict with gameplay input.

What should I test to verify game camera behavior?▼

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

Related Skills

Explore More Software Engineering Skills→
dcl-regenesislabsdcl-regenesislabs

advanced-input

Manage pointer lock, input polling, and player movement restrictions in Decentraland scenes via InputAction and InputModifier.

Official
Intermediate
Ab-aswiniAb-aswini
2

game-design

Guides game designers through core loop mechanics, GDD structure, and balancing.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-qa

Automate Playwright-based visual regression, gameplay verification, and accessibility checks for browser games.

Official
Advanced
Nice-Wolf-StudioNice-Wolf-Studio
24

unity-cinemachine

Configure Unity Cinemachine virtual cameras, blending, shake, and state-driven cameras.

Official
Intermediate