Three.js 中的 OrbitControls 是一个用于相机控制的便捷类，它允许用户通过鼠标或触摸输入进行旋转、缩放和平移操作。以下是默认情况下各个鼠标按钮可以执行的操作：

1. 左键（鼠标左键单击并拖动）：

   • 旋转：允许您围绕目标点旋转相机。这通常用于观察场景中的不同角度。

2. 中键（鼠标中键单击并拖动，或滚动滚轮）：

   • 缩放：允许您通过移动鼠标或滚动滚轮来放大或缩小场景。这可以让您更仔细地查看细节或拉远来看到更大的场景部分。

3. 右键（鼠标右键单击并拖动）：

   • 平移：允许您沿视图平面垂直和水平移动相机。这使您可以在不旋转视图的情况下查看场景的不同部分。

OrbitControls 还提供了许多属性，以便定制这些操作的行为，例如限制旋转的范围、设置缩放的最小/最大值或禁用某些操作。如果需要，可以修改这些默认行为，以便更好地适应特定应用或用户需求。

threejs版本

当前笔记使用threejs版本号

"three": "^0.154.0",

效果截图

动态效果

实例演示地址

相机控件OrbitControls

引入控件

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

使用控件

Three.js 的 OrbitControls 允许用户通过鼠标或触摸事件来旋转、缩放和平移摄像机。以下是常用参数和方法的说明。

创建 OrbitControls

创建 OrbitControls 时，需要传入摄像机和渲染元素。

const controls = new THREE.OrbitControls(camera, renderer.domElement);

主要属性

• enabled: 是否启用控件。
• target: 目标位置。
• minDistance: 最小缩放距离。
• maxDistance: 最大缩放距离。
• minZoom: 最小缩放等级。
• maxZoom: 最大缩放等级。
• minPolarAngle: 垂直旋转的最小角度（弧度）。
• maxPolarAngle: 垂直旋转的最大角度（弧度）。
• minAzimuthAngle: 水平旋转的最小角度（弧度）。
• maxAzimuthAngle: 水平旋转的最大角度（弧度）。
• enableDamping: 是否启用阻尼（惯性）。
• dampingFactor: 阻尼系数。
• enableZoom: 是否启用缩放。
• zoomSpeed: 缩放速度。
• enableRotate: 是否启用旋转。
• rotateSpeed: 旋转速度。
• enablePan: 是否启用平移。
• panSpeed: 平移速度。
• screenSpacePanning: 是否使用屏幕空间平移。
• keyPanSpeed: 键盘平移速度。
• autoRotate: 是否自动旋转。
• autoRotateSpeed: 自动旋转速度。
• enableKeys: 是否启用键盘控制。

主要方法

• update(): 更新控制器。
• reset(): 重置控制器。
• dispose(): 清除控制器的事件监听器。
• saveState(): 保存当前状态。
• getPolarAngle(): 获取当前极角。
• getAzimuthalAngle(): 获取当前方位角。

要确保 OrbitControls 正常工作，请确保在动画或渲染循环中调用 controls.update()。

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

注意：OrbitControls 的具体属性和方法可能会随着 Three.js 版本的不同而略有变化，因此建议查看您使用的 Three.js 版本的官方文档。

视频教程地址

今天学习视频教程 《WebGL/Three.js前端高薪3D可视化》-大屏3D地图可视化-渲染循环和相机控件OrbitControls

地图Web3D可视化-WebGL/Three.js 课程介绍

threejs 大屏3D地图可视化学习笔记汇总

threejs 大屏3D地图可视化学习笔记汇总

实例代码下载

当前学习笔记演示实例代码

项目运行环境 vue3 vite js nodejs 14