Three.js 快速入门教程【六】相机控件 OrbitControls
·
系列文章目录
Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
文章目录
- 系列文章目录
- 一、前言
- 二、OrbitControls控件作用
- 三、工作原理
- 操作指南:
- 三、项目中添加 OrbitControls 控件
- 1、新建控件实例
- 2、更新控件状态
- 四、OrbitControls 属性
- 1、基础行为控制
- 2、 视角限制
- 3、 自定义按键配置
- 4、 禁用某个按钮的操作
- 五、OrbitControls 方法
- 六、OrbitControls 事件监听
- 五、总结
一、前言
在3D可视化开发中，用户交互体验直接影响项目的成败。OrbitControls 是 Three.js 库中一个非常实用的相机控制辅助工具，它能极大地增强用户与 3D 场景的交互性，让用户可以像在现实世界中观察物体一样对场景进行操作，从而更好地观察 3D 场景。
二、OrbitControls控件作用
OrbitControls作为官方推荐的交互解决方案，能够实现：
-
鼠标拖拽旋转视图
-
滚轮缩放场景
-
平移观察视角
-
移动端触摸支持
三、工作原理
OrbitControls 会监听鼠标事件（如鼠标移动、鼠标滚轮滚动、鼠标按键点击等），根据用户的操作实时计算相机应该移动到的新位置和角度，然后更新相机的相关属性，从而改变相机在 3D 场景中的视角。例如，当用户按下鼠标左键并拖动时，OrbitControls 会计算鼠标移动的距离和方向，进而旋转相机；当用户滚动鼠标滚轮时，它会根据滚轮的滚动量来缩放相机。
操作指南:
- 旋转功能：用户按下鼠标左键并拖动，可以围绕一个目标点旋转相机，就像在现实中围绕一个物体走动观察一样。这样可以从不同的角度查看场景中的物体，全面了解其外观和结构。
- 平移功能：按下鼠标右键并拖动，能够在水平和垂直方向上平移相机。这在需要查看场景中特定区域或者调整观察范围时非常有用。
- 缩放功能：滚动鼠标滚轮可以实现相机的缩放操作，拉近或拉远与场景中物体的距离，以便更清晰地观察细节或者查看整个场景的全貌。
三、项目中添加 OrbitControls 控件
1、新建控件实例
const controls=new OrbitControls(camera, domElement);
构造函数接受两个参数：
camera：要控制的相机对象。
domElement：用于监听鼠标事件的 DOM 元素，通常是渲染器的 DOM 元素。
2、更新控件状态
controls.update()
该方法用于更新控件的状态，通常在每一帧渲染时调用。如果启用了阻尼效果，必须在每一帧调用此方法，以确保阻尼效果正常工作。
示例：
// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);// 设置阻尼（惯性），让控件的操作更平滑
controls.enableDamping = true;
controls.dampingFactor = 0.05;// 更新控件
function animate() {requestAnimationFrame(animate);// 必须每帧更新！controls.update();renderer.render(scene, camera);
}
animate();
在上述代码中，我们创建了 OrbitControls 实例，然后启用了阻尼效果，并设置了阻尼因子，这样在操作相机时会有惯性的感觉，让交互更加自然。同时，在 animate 函数中，我们调用 controls.update() 方法来更新控件的状态，确保相机能够根据用户的操作实时更新。
四、OrbitControls 属性
常用属性大全：
| 属性名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| enableDamping | Boolean | 用于启用或禁用阻尼（惯性）效果，启用后，相机的运动会更平滑，就像有惯性一样 | false |
| dampingFactor | Number | 用于控制阻尼（惯性）效果强度的属性，通常取值范围在 0 到 1 之间 | 0.05 |
| autoRotate | Boolean | 相机是否围绕着目标点自动旋转 | false |
| autoRotateSpeed | Number | 自动旋转的速度 | 1.0 |
| enableRotate | Boolean | 用于控制是否启用鼠标旋转相机 | true |
| enablePan | Boolean | 用于控制是否启用鼠标平移相机 | true |
| enablePan | Boolean | 用于控制是否启用鼠标滚轮缩放相机 | true |
| maxDistance | Number | 设置相机到目标点的最大距离，限制缩放范围 | Infinity |
| minDistance | Number | 设置相机到目标点的最小距离，限制缩放范围 | 0 |
| minPolarAngle | Number | 相机垂直方向的最小角度（弧度制） | 0 |
| maxPolarAngle | Number | 相机垂直方向的最大角度（弧度制） | Math.PI |
| minAzimuthAngle | Number | 相机水平方向的最小角度（弧度制） | -Infinity |
| maxAzimuthAngle | Number | 相机水平方向的最大角度（弧度制） | Infinity |
| target | THREE.Vector3对象 | 相机观察目标点 | new THREE.Vector3(0, 0, 0) |
| screenSpacePanning | Boolean | 相机的平移操作是否基于屏幕空间 | true |
| mouseButtons | Object | 配置鼠标按钮与相机控制操作之间的映射关系。通过修改这个属性，你可以自定义鼠标不同按键对应的操作，默认鼠标左键旋转（THREE.MOUSE.ROTATE），滚轮缩放（THREE.MOUSE.DOLLY），右键平移（THREE.MOUSE.PAN） | { LEFT: THREE.MOUSE.ROTATE,MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN } |
1、基础行为控制
controls.enableDamping = true; // 启用阻尼惯性
controls.dampingFactor = 0.05; // 惯性系数（0-1）
controls.autoRotate = true; // 启用自动旋转
controls.autoRotateSpeed = 2.0; // 旋转速度（默认1.0）controls.enableZoom = false; // 禁用缩放
controls.enablePan = false; // 禁用平移
2、 视角限制
controls.minDistance = 3; // 最小缩放距离
controls.maxDistance = 50; // 最大缩放距离controls.minPolarAngle = Math.PI/4; // 垂直视角下限（弧度）
controls.maxPolarAngle = Math.PI/2; // 垂直视角上限controls.minAzimuthAngle = -Math.PI/2; // 水平旋转下限
controls.maxAzimuthAngle = Math.PI/2; // 水平旋转上限
3、 自定义按键配置
修改左键平移，右键旋转
controls.mouseButtons = {LEFT:THREE.MOUSE.PAN,//平移MIDDLE: THREE.MOUSE.DOLLY,RIGHT: THREE.MOUSE.ROTATE//旋转
};
4、 禁用某个按钮的操作
把对应按键配置设置为null
// 禁用鼠标滚轮的操作
controls.mouseButtons.MIDDLE = null;
五、OrbitControls 方法
| 方法名称 | 说明 |
|---|---|
| update | 该方法用于更新控件的状态，通常在每一帧渲染时调用。如果启用了阻尼效果，必须在每一帧调用此方法，以确保阻尼效果正常工作 |
| reset | 将相机的位置和角度重置为初始状态 |
| saveState | 保存当前相机的位置、角度和目标点等状态 |
| restoreState | 恢复之前保存的相机状态 |
六、OrbitControls 事件监听
| 事件名称 | 说明 | 使用场景 |
|---|---|---|
| change | 当相机的位置、角度或者目标点发生变化时，就会触发 change 事件 | 可用于实时更新与相机状态相关的 UI 元素，或者在相机视角改变时执行一些特定操作。 |
| start | 当用户开始与控件进行交互（如按下鼠标按钮开始旋转、平移或缩放）时，会触发 start 事件。 | 可以在用户开始操作相机时，播放一些提示音或者显示操作提示信息。 |
| end | 当用户结束与控件的交互（如松开鼠标按钮）时，会触发 end 事件。 | 可用于在用户操作结束后，进行一些资源清理或者数据保存的操作 |
// 变化事件监听
controls.addEventListener('change', () => {console.log('Camera position:', camera.position);console.log('Camera rotation:', camera.rotation);
});// 特定事件处理
controls.addEventListener('start', () => {console.log('交互开始');
});controls.addEventListener('end', () => {console.log('交互结束');
});
五、总结
OrbitControls 作为 Three.js 生态中的重要控件，极大地简化了开发者在处理 3D 场景交互时的复杂度。它就像是一把钥匙，为用户打开了自由探索 3D 世界的大门，让用户能够以直观的方式与场景进行互动，从不同的角度、距离去观察和体验 3D 模型和场景。无论是在产品展示、建筑可视化还是游戏开发等领域，OrbitControls 都能发挥出巨大的作用，为项目增添独特的魅力。
更多three.js入门知识点请关注该系列教程后续的更新。