skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-syntax-controls

Implements camera and object manipulation controls for Three.js scenes with correct lifecycle handling.

1|Updated Aug 20, 2023
Search Tags:#javascript#webgl#three.js#camera controls#orbitcontrols#3d interaction#transformcontrols
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-syntax-controls-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-syntax-controls
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-syntax-controls
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-syntax-controls-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Adding camera controls to a Three.js scene is error-prone: forgetting controls.update() in the render loop freezes damping, skipping dispose() leaks event listeners, and mixing control types causes erratic camera behavior. This Skill provides correct patterns, API references, and anti-patterns for every Three.js control class. ## Core Features & Use Cases - Control Selection Guide: A decision tree mapping use cases (model inspection, map navigation, first-person, free flight, object gizmo editing) to the right control class among OrbitControls, MapControls, FlyControls, PointerLockControls, TransformControls, and more. - Complete API Reference: Full property, method, and event tables for each control, including correct import paths for Three.js r160+. - Anti-Pattern Catalog: Ten documented mistakes with wrong/correct code pairs, such as attaching controls to document instead of renderer.domElement or omitting delta in FlyControls.update(). - Use Case: When building a 3D editor where users orbit the scene and drag objects with a gizmo, this Skill ensures OrbitControls is disabled during TransformControls drags via the dragging-changed event. ## Quick Start Add OrbitControls with damping to my Three.js scene and make sure the render loop and cleanup are handled correctly.

Frequently Asked Questions about threejs-syntax-controls

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

FAQPage Schema
How do I add OrbitControls to a Three.js scene?▼

Import OrbitControls from 'three/addons/controls/OrbitControls.js' and construct it with your camera and renderer.domElement. Call controls.update() every frame in the animation loop when enableDamping or autoRotate is true, and call controls.dispose() during cleanup.

Which Three.js control should I use for first-person camera movement?▼

Use PointerLockControls for first-person games since it hides the cursor and captures mouse movement via the Pointer Lock API. Use FirstPersonControls if you want mouse-look without the browser lock. PointerLockControls only handles look direction, so implement WASD movement yourself.

Why does my Three.js camera freeze after I stop dragging?▼

The camera freezes because controls.update() is missing from the animation loop while enableDamping or autoRotate is true. Add controls.update() inside your requestAnimationFrame loop before renderer.render() so inertia and auto-rotation apply every frame.

How do I use TransformControls and OrbitControls together?▼

Add TransformControls to the scene and listen to its dragging-changed event to toggle orbitControls.enabled with !event.value. This prevents the camera from orbiting while the user drags a gizmo handle, which otherwise makes precise positioning impossible.

Why does PointerLockControls.lock() do nothing on page load?▼

Browsers reject pointer lock requests that are not triggered by a user gesture, so calling lock() on page load silently fails. Call controls.lock() inside a click event listener on the canvas instead.

What is the difference between OrbitControls and MapControls?▼

MapControls is a subclass of OrbitControls with identical properties and methods. The only difference is the default mouse mapping: left-drag pans instead of rotates, and right-drag rotates instead of pans, suiting top-down map navigation.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
11

threejs-impl-shadows

Configure and optimize Three.js shadows, troubleshooting acne, peter panning, and light bleeding.

Official
Advanced
fyunusafyunusa

spline-interactive

Integrate interactive Spline 3D scenes into React and Next.js applications.

Community
Intermediate
nicolasieber-tmnicolasieber-tm

threejs-interaction

Implement raycasting, camera controls, and object selection in Three.js scenes.

Community
Advanced
TenBeltzTenBeltz

react-three-fiber

Render declarative 3D scenes in React using JSX components mapped to Three.js objects.

Official
Advanced