【threejs】轨道控制器

轨道控制器

轨道控制器（OrbitControls）是一个用于控制相机视角的工具，它可以让用户通过鼠标或触摸设备来旋转、缩放和平移相机等操作。

文档：https://threejs.rocyuan.top/docs/?q=control#examples/zh/controls/OrbitControls

创建轨道控制器

创建轨道控制器有两个参数，第一个参数是相机，第二个参数是渲染器的 DOM 元素。

1
2
3
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

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

常见操作

启用阻尼效果

阻尼效果可以让相机的旋转和缩放更加平滑。

1
2
controls.enableDamping = true; // 启用阻尼
controls.dampingFactor = 0.05; // 阻尼系数，值越小，阻尼效果越弱

旋转、缩放、平移的禁用

1
2
3
controls.enableRotate = false; // 禁用旋转
controls.enableZoom = false; // 禁用缩放
controls.enablePan = false; // 禁用平移

旋转、缩放、平移的速度

1
2
3
controls.rotateSpeed = 0.5; // 旋转速度
controls.zoomSpeed = 0.5; // 缩放速度
controls.panSpeed = 0.5; // 平移速度

旋转范围

1
2
3
4
controls.minAzimuthAngle = -Math.PI / 4; // 最小水平角度
controls.maxAzimuthAngle = Math.PI / 4; // 最大水平角度
controls.minPolarAngle = Math.PI / 4; // 最小垂直角度
controls.maxPolarAngle = Math.PI / 2; // 最大垂直角度

缩放范围

1
2
controls.minDistance = 1; // 最小缩放距离
controls.maxDistance = 10; // 最大缩放距离

自动旋转

1
2
controls.autoRotate = true; // 自动旋转
controls.autoRotateSpeed = 1; // 自动旋转速度

设置目标点

1
controls.target.set(0, 0, 0); // 设置目标点

监听控制器事件

1
2
3
controls.addEventListener("change", function () {
  console.log("相机位置:", camera.position);
});

更新控制器

在渲染循环中调用 controls.update()，以确保控制器状态更新。

1
2
3
4
5
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}

重置控制器

通过 reset 方法将控制器重置到初始状态。

1
controls.reset(); // 重置控制器