Three.js搭建小米SU7三维汽车实战（3）轨道控制器

往期内容：
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.innerHeight
  camera.updateProjectionMatrix()

  // 设置渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
})

大家可以+下方小助手↓回复关键词 su7 免费获取视频版和笔记文档