【Three.js】鼠标操作移动视角

在网页中导入了三维模型或构造了三维场景后，我们通常需要使用鼠标进行操作，以便更好地观察模型或进行交互。那么在Three.js中，提供了一个很常见的控制器OrbitControls,允许用户通过鼠标来操作三维场景的视角，核心功能如下：

• 旋转：按住鼠标左键，移动鼠标来旋转视角
• 缩放：使用鼠标滚轮进行视角远近的缩放（在触摸设备中可使用双指缩放实现）
• 平移：按住鼠标右键或shift+鼠标左键

在Three.js中，一个完整的虚拟三维场景需要包含：场景(Scene)、相机(Camera)、灯光(Light)。OrbitControls的本质就是通过控制相机绕着一个目标点做轨道运动，来呈现不同的视角。

引入

在渲染三维场景的组件中模块化引入：

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

也可以使用CDN引入：

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>

使用

初始化：在声明了camera和render以后，将它们作为参数，声明控制器

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

在animate中调用：

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 必须调用，否则惯性旋转/阻尼等无法生效
  renderer.render(scene, camera);
}

调用animate

//一般在onMounted中调用
animate()

通常在animate调用以后，打开项目就可以通过鼠标来操作视角。

常用配置项

阻尼Damping：启用阻尼效果后，相机的移动会有惯性，更加自然流畅

controls.enableDamping = true;   //是否开启阻尼效果
controls.dampingFactor = 0.05;   //阻尼效果大小

旋转：通过target设置相机围绕哪个点旋转，通过PolarAngle设置相机垂直旋转的最大最小角度，防止用户操作视角穿过模型影响体验。

controls.target.set(x, y, z)  //设置围绕哪个点旋转
controls.minPolarAngle = 0; // 0弧度 (0度)
controls.maxPolarAngle = Math.PI; // π弧度 (180度)

缩放：设置相机与目标点的最大最小距离，防止距离过近或过远。

controls.minDistance = 3; // 最小距离
controls.maxDistance = 20; // 最大距离

自动旋转autoRotate:使场景在无交互的情况下自动旋转，适用于产品展示等。

controls.autoRotate = true;
controls.autoRotateSpeed = 2.0; // 旋转速度

常用方法

controls.update();      // 每帧更新，尤其在启用 damping 时必需
controls.reset();       // 恢复初始设置
controls.dispose();     // 销毁控制器，释放内存

注：

• 必须在渲染循环中调用 controls.update()，否则阻尼、自动旋转等不会生效。
• 若切换相机或 DOM 元素，需重新初始化 OrbitControls。