threejs-controls

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此 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"
"轨道", "变换控制器", "漫游"

当用户提到以下内容时，务必使用此 skill：

围绕目标进行环绕、平移和推拉，惯性/阻尼，最小/最大距离/极角
地图式平移（MapControls）或飞行（FlyControls）
使用
```
TransformControls
```
进行变换 gizmo 的平移/旋转/缩放
在平面中拖动对象（DragControls），指针锁定 FPS（PointerLockControls）

重要：controls 与 webxr

场景	Skill
桌面端/浏览器相机导航	threejs-controls
XR 控制器姿态	threejs-webxr

触发短语包括：

“OrbitControls”、“TransformControls”、“MapControls”、“PointerLockControls”
“轨道”、“变换控制器”、“漫游”

How to use this skill

如何使用此 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.

See examples/workflow-orbit-damping.md.

从 addons 路径导入（threejs-dev-setup）。
使用
```
(camera, domElement)
```
构造；对于
```
TransformControls
```
，还需将其附加到 renderer 事件。
动画循环：启用
```
enableDamping
```
时，每帧调用
```
controls.update()
```
。
TransformControls：将
```
dragging-changed
```
连接到临时禁用 Orbit；并与 threejs-objects 的选择状态同步。
约束：设置最小/最大距离/角度，以避免翻转或出现地下视角。
释放：拆卸组件时调用
```
controls.dispose()
```
。

请参阅 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

文档章节	代表性链接
控制器	https://threejs.org/docs/OrbitControls.html
控制器	https://threejs.org/docs/TransformControls.html
控制器	https://threejs.org/docs/MapControls.html
控制器索引	https://threejs.org/docs/#Controls

Scope

范围

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

范围内： 官方 addons 控制器使用模式。
范围外： 完整的物理角色运动控制器；移动端手势框架。

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.

启用阻尼却忘记调用
```
update()
```
，会导致漂移始终无法稳定。
TransformControls 与 Orbit 发生冲突——使用其中一个时应暂停另一个。
指针锁定需要用户手势，并需处理退出操作。

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.

控制器位于 three.js 文档中的 Controls（Addons）章节。API 细节（

enableDamping

、事件等）会不断演变——应根据用户的 three.js 版本提供

OrbitControls

TransformControls

页面链接。

Agent response checklist

Agent 回答检查清单

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.

使用此 skill 回答时，优先采用以下方式：

链接到文档中的具体控制器类。
说明启用阻尼后需每帧调用
```
controls.update()
```
。
使 TransformControls 与选择操作及 threejs-objects 的 raycasting 协同工作。
区分桌面端导航与 threejs-webxr 移动。
卸载 canvas 时对 controls 调用
```
dispose()
```
。

References

参考资料

Keywords

关键词

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

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

英文： orbitcontrols, transformcontrols, mapcontrols, damping, camera controls, three.js

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