SuperAPI AI 工具集

threejs-controls

前端与建站

查看项目

更新于 10-15 15:10

技能介绍

用途

threejs-controls 用于在 three.js 项目中添加相机与物体的操控交互,属于官方 addons 控制器的使用模式指南。当用户提到围绕目标轨道旋转/平移/推拉、惯性阻尼、最小/最大距离与极角限制,类地图平移(MapControls)或飞行(FlyControls),变换 Gizmo 的平移/旋转/缩放(TransformControls),在平面内拖拽物体(DragControls),或指针锁定第一人称(PointerLockControls)时,应使用本技能。

需要区分控制器与 WebXR:桌面/浏览器相机导航使用 threejs-controls,XR 控制器姿态使用 threejs-webxr。

主要能力

技能覆盖的控制器包括:OrbitControls、MapControls、FlyControls、FirstPersonControls、TrackballControls、ArcballControls、DragControls、TransformControls、PointerLockControls 等。

触发词包括:"OrbitControls"、"TransformControls"、"MapControls"、"PointerLockControls",以及中文"轨道"、"变换控制器"、"漫游"。

使用方式

  1. 从 addons 路径导入(参见 threejs-dev-setup)。
  2. 以 (camera, domElement) 构造;TransformControls 还需挂接到 renderer 事件。
  3. 动画循环:当启用 enableDamping 时,每帧调用 controls.update()。
  4. TransformControls:将 dragging-changed 事件接线以临时禁用 Orbit;与 threejs-objects 的选择同步。
  5. 约束:设置最小/最大距离与角度,避免翻转或地下视角。
  6. 销毁:拆除时调用 controls.dispose()。

可参考示例 examples/workflow-orbit-damping.md。

适用场景

适用于桌面/浏览器端的相机导航与物体变换交互,例如围绕目标的轨道浏览、类地图平移、飞行漫游、第一人称指针锁定、平面拖拽以及变换 Gizmo 操作。

限制与范围

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

常见陷阱与最佳实践

  • 启用阻尼却忘记调用 update() 会导致漂移无法收敛。
  • TransformControls 与 Orbit 相互冲突——使用其中一个时暂停另一个。
  • 指针锁定需要用户手势并处理退出。

文档与版本

控制器位于 three.js 文档的 Controls (Addons) 部分。API 细节(enableDamping、事件)会演进——请针对用户所用 three.js 版本链接 OrbitControls / TransformControls 页面。

代理响应清单

在本技能下回答时,优先:从文档链接具体的控制器类;说明阻尼开启时每帧调用 controls.update();将 TransformControls 与选择/threejs-objects 射线拾取协同;将桌面导航与 threejs-webxr 移动分开;卸载画布时对控制器调用 dispose()。

参考链接

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

关键词

英文:orbitcontrols, transformcontrols, mapcontrols, damping, camera controls, three.js 中文:OrbitControls、轨道、TransformControls、变换控制器、阻尼、three.js