作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。
185篇入门文章
文章目录
THREE.OrbitControls 是 Three.js 中一个非常常用的交互控件，它允许用户通过鼠标或触摸设备来控制相机的旋转、缩放和平移。这个控件非常适合用于浏览三维场景，提供了类似于地球仪的交互体验，用户可以轻松地旋转、缩放和平移视图。
构造函数
构造函数 new THREE.OrbitControls(camera, domElement) 创建一个新的 OrbitControls 实例。
- camera：要控制的相机对象。
- domElement：可选参数，指定与控件交互的 DOM 元素，默认为渲染器的
domElement。
属性
enabled
一个布尔值，表示控件是否可用，默认为 true。当设为 false 时，控件不会响应用户的输入。
target
一个 THREE.Vector3 对象，表示相机的目标点。这是相机试图对准的场景中的点，默认为 (0, 0, 0)。
autoRotate
一个布尔值，表示是否自动旋转，默认为 false。如果设为 true，则相机将自动绕目标点旋转。
autoRotateSpeed
一个数值，表示自动旋转的速度，默认为 2。较高的值会使自动旋转更快。
enableDamping
一个布尔值，表示是否启用阻尼效果，默认为 false。如果设为 true，则旋转和平移会有平滑过渡的效果。
dampingFactor
一个数值，表示阻尼因子，默认为 0.05。较高的值会使阻尼效果更强。
`enableZoom**
一个布尔值，表示是否允许缩放，默认为 true。
`zoomSpeed**
一个数值，表示缩放速度，默认为 1.0。较高的值会使缩放更快。
`enablePan**
一个布尔值，表示是否允许平移，默认为 true。
`panSpeed**
一个数值，表示平移速度，默认为 0.3。较高的值会使平移更快。
`enableRotate**
一个布尔值，表示是否允许旋转，默认为 true。
`rotateSpeed**
一个数值，表示旋转速度，默认为 1.0。较高的值会使旋转更快。
`minDistance**
一个数值，表示相机到目标点的最小距离，默认为 0。
`maxDistance**
一个数值，表示相机到目标点的最大距离，默认为 Infinity。
`minPolarAngle**
一个数值，表示极角的最小值，默认为 0。这是相机在垂直方向上的下限。
`maxPolarAngle**
一个数值，表示极角的最大值，默认为 Math.PI。这是相机在垂直方向上的上限。
方法
update()
更新控件的状态。这个方法通常在渲染循环中被调用，以确保控件的状态得到及时更新。
dispose()
释放控件使用的资源。当不再需要控件时可以调用此方法来释放相关资源。
使用示例
下面是一个简单的示例，展示如何使用 THREE.OrbitControls 来创建一个基本的交互场景：
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20); // 设置相机初始位置
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建 OrbitControls
const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
// 设置属性
orbitControls.target.set(0, 0, 0); // 设置目标点
orbitControls.zoomSpeed = 1.0; // 缩放速度
orbitControls.panSpeed = 0.3; // 平移速度
orbitControls.rotateSpeed = 1.0; // 旋转速度
orbitControls.minDistance = 5; // 最小距离
orbitControls.maxDistance = 50; // 最大距离
orbitControls.minPolarAngle = 0; // 最小极角
orbitControls.maxPolarAngle = Math.PI / 2; // 最大极角
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 更新 OrbitControls
orbitControls.update();
// 渲染场景
renderer.render(scene, camera);
}
animate();
事件监听
为了使 OrbitControls 能够响应用户的输入，需要监听鼠标和触摸事件。OrbitControls 会在内部处理这些事件，但你需要确保 DOM 元素是可交互的，并且适当地设置事件监听器来响应用户的输入。
注意事项
- 鼠标和触摸事件：确保在支持
Pointer EventsAPI 的浏览器上使用OrbitControls，因为OrbitControls依赖于Pointer Events来处理鼠标和触摸事件。 - 相机定位：通过设置
target属性来确定相机对准的中心点。这有助于用户更好地理解场景的布局。 - 速度调整：通过设置
zoomSpeed、panSpeed和rotateSpeed来调整交互的速度。较高的值会使交互更快。 - 距离和角度限制：通过设置
minDistance、maxDistance、minPolarAngle和maxPolarAngle来限制相机的移动范围和旋转角度。这有助于保持用户在合理的范围内查看场景。 - 阻尼效果：通过设置
enableDamping和dampingFactor来启用阻尼效果，这可以使交互更加平滑。 - 自动旋转：通过设置
autoRotate和autoRotateSpeed可以使相机自动绕目标点旋转，这对于演示或动画场景非常有用。
总结
THREE.OrbitControls 是 Three.js 中用于实现三维场景浏览的交互控件。通过使用 OrbitControls，你可以让用户通过鼠标或触摸设备来控制相机的旋转、缩放和平移。在使用时，确保正确设置相机和渲染器，并监听必要的事件来处理用户的输入。如果你需要更复杂的交互功能，如锁定特定的视角或实现特定的动画效果，可以进一步扩展 OrbitControls 或结合其他控件来实现。