往期內容：
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)
})
大家可以+下方小助手↓回復關鍵詞 su7 免費獲取視頻版和筆記文檔
