往期内容：
Three.js搭建小米SU7三维汽车实战（1）搭建开发环境
Three.js搭建小米SU7三维汽车实战（2）场景搭建

轨道控制器

轨道控制器可以改变相机在空间坐标系中的位置进而方便从不同的角度观察物体 1. 轨道控制器响应鼠标事件(按住左键旋转, 滚轮缩放, 按住右键平移) 2. 调整相机在空间坐标系中的位置(坐标值) 3. 改变坐标后, 重新渲染

:::info
相对运动
这里有两套坐标系统
● 3D世界的坐标系, 由红绿蓝三色线表示
● 相机观察的坐标系
由于人眼的位置是固定不变的, 相当于站在相机的角度看3D世界
相机不变, 3D世界做相对运动

:::

效果

1) 导入组件

OrbitControls是一个附加组件, 在使用之前需要先导入

// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

2) 创建控制器

```javascript // 创建轨道控制器 const controls = new OrbitControls(camera, renderer.domElement) ```

● 相机对象
● 渲染dom

3) 动态渲染

```javascript // 4. 动态渲染 function animation() { controls.update() renderer.render(scene, camera)

requestAnimationFrame(animation)
}
animation()


> <font style="color:rgb(38, 38, 38);">完整示例</font>
>```javascript
// 导入threejs
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'// 1. 创建场景
const scene = new THREE.Scene()
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000
)camera.position.z = 50// 5. 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshNormalMaterial()
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
// 添加到场景
scene.add(cube)// 6. 显示坐标轴(x轴: 红色; y轴: 绿色; z轴: 蓝色 rgb)
// x轴水平方向(右正); y轴垂直方向(上正); z轴垂直xy平面即屏幕(外正)
const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)// 7. 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)// 4. 动态渲染
function animation() {controls.update()renderer.render(scene, camera)requestAnimationFrame(animation)
}
animation()

自适应画布

当浏览器的显示窗口改变时, 会引起尺寸改变(innerWidth/innerHeight). 此时, 需要调整相机的宽高比和渲染器的成像大小

// 监听window的resize事件, 在回调中重绘canvas
window.addEventListener('resize', () => {// 设置相机宽高比camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()// 设置渲染器renderer.setSize(window.innerWidth, window.innerHeight)
})