three.js轨道控制器查看物体

一、效果介绍

在上一章节中我们只是将物体和场景渲染到了浏览器中，但是我们并不能实现交互，当我们想用鼠标滑动查看物体时，物体是不会动的，要实现这种交互效果，我们需要借助轨道控制器实现

二、轨道控制器使用步骤

1. 引入three.js库和轨道控制器

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

2. 创建场景、相机、渲染器

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 创建三维物体

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4. 创建轨道控制器，并将相机绑定到轨道控制器上

const controls = new OrbitControls(camera, renderer.domElement);
controls.update();
camera.position.z = 5;

5. 渲染场景，并在动画循环中更新轨道控制器的状态

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

在此基础上，可以通过控制轨道控制器的属性来改变视角、视距等参数，进而实现查看物体的效果。例如：

controls.enableDamping = true; // 开启阻尼效果
controls.rotateSpeed = 0.5; // 旋转速度
controls.target.set(0, 0, 0); // 查看物体时的中心点

三、完整代码如下：

// 导入three
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)

// 设置相机位置
// 参数：x轴，y轴，z轴
camera.position.set(0, 0, 5)

// 将相机添加到场景中
scene.add(camera)

// 创建几何体
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)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
console.log(renderer)
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
// 参数：相机，渲染器dom元素
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true; // 开启阻尼效果
controls.rotateSpeed = 0.5; // 旋转速度
controls.target.set(0, 0, 0); // 查看物体时的中心点

// 使用渲染器，通过相机渲染场景
function animate() {
    requestAnimationFrame( animate ); //帧动画
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();