threejs-controls Skill | Agent Skills

When to use this skill

ALWAYS use this skill when the user mentions:

Orbiting/panning/dolly around a target, inertia/damping, min/max distance/polar angles
Map-like pan (MapControls) or flying (FlyControls)
Transform gizmo translate/rotate/scale with TransformControls
Dragging objects in plane (DragControls), pointer lock FPS (PointerLockControls)

IMPORTANT: controls vs webxr

| Context | Skill | |---------|--------| | Desktop/browser camera nav | threejs-controls | | XR controller poses | threejs-webxr |

Trigger phrases include:

"OrbitControls", "TransformControls", "MapControls", "PointerLockControls"
"轨道", "变换控制器", "漫游"

How to use this skill

Import from addons path (threejs-dev-setup).
Construct with (camera, domElement); for TransformControls also attach to renderer events.
Animation loop: when enableDamping, call controls.update() each frame.
TransformControls: wire dragging-changed to disable Orbit temporarily; sync with selection from threejs-objects.
Constraints: set min/max distance/angles to avoid flipping or underground views.
Dispose: controls.dispose() when tearing down.

Example: OrbitControls with damping

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 2;
controls.maxDistance = 50;

// Must call update() each frame when damping is enabled
function animate() {
  controls.update();
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

See examples/workflow-orbit-damping.md.

Doc map (official)

| Docs section | Representative links | |--------------|----------------------| | Controls | https://threejs.org/docs/OrbitControls.html | | Controls | https://threejs.org/docs/TransformControls.html | | Controls | https://threejs.org/docs/MapControls.html | | Controls (index) | https://threejs.org/docs/#Controls |

Scope

In scope: Official addons controls usage patterns.
Out of scope: Full physics character motor; mobile gesture frameworks.

Common pitfalls and best practices

Forgetting update() with damping enabled causes drift never settling.
TransformControls fighting with Orbit—pause one while using the other.
Pointer lock requires user gesture and exit handling.

Documentation and version

Controls are under Controls (Addons) in three.js docs. API details (enableDamping, events) evolve—link OrbitControls / TransformControls pages for the user’s three.js version.

Agent response checklist

When answering under this skill, prefer responses that:

Link the specific controls class from the docs.
State controls.update() when damping is on, every frame.
Coordinate TransformControls with selection / threejs-objects raycasting.
Separate desktop navigation from threejs-webxr locomotion.
Call dispose() on controls when unmounting canvas.

References

https://threejs.org/docs/#Controls
https://threejs.org/docs/OrbitControls.html
https://threejs.org/docs/TransformControls.html

Keywords

English: orbitcontrols, transformcontrols, mapcontrols, damping, camera controls, three.js

中文： OrbitControls、轨道、TransformControls、变换控制器、阻尼、three.js

Agent Skills: threejs-controls

Install this agent skill to your local

Skill Files