【three.js系列三】入门教程——轨道控制器

什么是 OrbitControls 轨道控制

轨道控制器（OrbitControls）是 Three.js 中的一个常用工具，用于控制相机的运动。它可以使相机围绕目标物体进行旋转、缩放和平移操作，就像地球围绕太阳一样运动，方便观察三维场景。

使用轨道控制器

要使用轨道控制器，首先需要在项目中引入 OrbitControls.js 文件。然后，可以按照以下步骤创建并使用轨道控制器：

1. 创建一个 OrbitControls 对象，并传入相机对象和渲染器对象。
2. 将 OrbitControls 对象添加到场景中。
3. 监听 OrbitControls 对象的事件，以便在相机发生变化时更新场景。

以下代码基于vue项目，搭建vue项目，安装threejs即可

// main.js
import * as THREE from "three";

// 引入轨道控制器扩展库OrbitControls.js（必须）
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建场景
const scene = new THREE.Scene();

// 创建轨道控制器
// 2个参数：要控制的摄像机，用于事件侦听器的 HTML 元素
const controls = new OrbitControls(camera, renderer.domElement);

// 添加阻尼
controls.enableDamping = true
controls.dampingFactor = 0.01

// 自动旋转
controls.autoRotate = true
controls.autoRotateSpeed = 0.5

// 将轨道控制器添加到场景中
scene.add(controls);

// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加网格
// 4个参数分别为：网格的大小(默认值为 `10`),网格中的分区数(默认值为 `10`),中心线的颜色(可选)，网格线颜色（可选）
const gridHelper =new THREE.GridHelper(10,10, 0x00ff00, 'red')
scene.add(gridHelper)

// 监听相机变化事件
controls.addEventListener('change', () => {
  renderer.render(scene, camera);
});

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update(); // 更新轨道控制器

  renderer.render(scene, camera);
}

animate();

打开浏览器：http://localhost:5173/

结语

对于添加几何体、相机、场景等不熟悉的童鞋可以参考上一篇 【three.js系列二】入门教程——几何体