yomotsu/camera-controls

这是什么？

核心功能

• 01setLookAt、fitToBox、rotateTo 等方法支持平滑动画过渡，并返回 Promise。
• 02提供轨道旋转、推拉和平移操作，鼠标与触控按键可配置。
• 03支持与网格的碰撞检测，并可设置相机目标的边界范围。
• 04同时支持透视相机和正交相机。
• 05提供 rest、sleep 等事件，便于在相机停止移动时执行逻辑。

适用场景

• 制作可交互的 3D 产品展示器，让相机飞到指定视角或将物体适配到屏幕中。
• 用 await 串联多个相机动作，实现镜头导览或脚本化的过场动画。
• 在 three.js 场景中实现带碰撞检测的第一人称或第三人称导航。

快速上手

1. 1

   安装 three.js，camera-controls 需要它；README 未给出任一包的安装命令

2. 2

   导入库，并在创建实例前调用 CameraControls.install 注册 THREE

3. 3

   用相机和 DOM 元素创建 CameraControls 实例，并在动画循环中调用 update(delta)

使用前须知

• !需要单独安装 three.js，并通过 CameraControls.install 注册，否则会出现运行时错误。
• !使用 colliderMeshes 可能降低性能，因为碰撞检测每帧都会使用射线投射。

标签

常见问题

camera-controls 是什么？

为 three.js 提供的相机控制库，类似 OrbitControls，并支持平滑过渡等更多功能。 camera-controls 是一个用 TypeScript 编写的 three.js 相机控制库，支持轨道旋转、推拉（dolly）和平移（truck）等交互，用法与 THREE.OrbitControls 相近。它的主要特点是带动画的过渡效果：setLookAt、fitToBox、rotateTo 等方法可以让相机在一段时间内平滑移动，并返回 Promise，便于用 await 串联多段动画。

camera-controls 可以免费使用吗？用的什么许可证？

camera-controls 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

camera-controls 还在维护吗？

活跃维护中。camera-controls 最近一次提交是在 2026年10月21日。

camera-controls 适合用来做什么？

制作可交互的 3D 产品展示器，让相机飞到指定视角或将物体适配到屏幕中。 用 await 串联多个相机动作，实现镜头导览或脚本化的过场动画。 在 three.js 场景中实现带碰撞检测的第一人称或第三人称导航。

camera-controls 怎么安装和运行？

安装 three.js，camera-controls 需要它；README 未给出任一包的安装命令 导入库，并在创建实例前调用 CameraControls.install 注册 THREE 用相机和 DOM 元素创建 CameraControls 实例，并在动画循环中调用 update(delta)

在哪里获取 camera-controls？

源代码和安装说明在 GitHub 上：https://github.com/yomotsu/camera-controls