本篇主要學習內容 :

1. 三維坐標系與輔助坐標系
2. 物體位移與父子元素
3. 物體的縮放與物體的旋轉
4. 設置響應式畫布與全屏控制

點贊 + 關注 + 收藏 = 學會了

本文使用 Three.js 的版本：171 基于 Vue3+vite開發調試

1.三維坐標系與輔助坐標系

1.1) 導入three和軌道控制器

// 導入threejs
import * as THREE from 'three'
//導入軌道控制器擴展庫OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

1.2）實例化軌道控制器和坐標輔助器

// 坐標輔助器 （xyz軸繪制） 5代表輔助線長度
const axesHelper = new THREE.AxesHelper(5)
//添加到場景
scene.add(axesHelper)

1.3）OrbitControls本質上就是改變相機的參數，比如相機的位置屬性，改變相機位置也可以改變相機拍照場景中模型的角度，實現模型的360度旋轉預覽效果，改變透視投影相機距離模型的距離，就可以改變相機能看到的視野范圍。

// 軌道控制器 兩種方式
const controls = new OrbitControls(camera, document.body)
// 設置相機控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改變了相機參數，重新調用渲染器渲染三維場景
controls.addEventListener('change', function () {renderer.render(scene, camera); //執行渲染操作
});//監聽鼠標、鍵盤事件

2.物體位移與父子元素

2.1）相機位移動畫基于(.position和.lookAt())屬性，下面完成一段緩動動畫

// 創建相機
const camera = new THREE.PerspectiveCamera(45, //視角window.innerWidth / window.innerHeight, //寬高比0.1, //近平面1000 //遠平面
)
// 渲染函數
;(function animate() {camera.position.x += 0.1//相機直線運動動畫requestAnimationFrame(animate)renderer.render(scene, camera)
})()// 渲染循環 相機圓周運動
let angle = 0; //用于圓周運動計算的角度值
const R = 100; //相機圓周運動的半徑
;(function animate() {angle += 0.01;// 相機y坐標不變，在XOZ平面上做圓周運動camera.position.x = R * Math.cos(angle);camera.position.z = R * Math.sin(angle);renderer.render(scene, camera);requestAnimationFrame(render);
})()

2.2）父子元素

// 創建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1)// 創建材質
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 創建父元素材質
const parMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
// 設置材質為線框模式
parMaterial.wireframe = true// 創建網絡
const cube = new THREE.Mesh(geometry, material)
// 創建父元素網絡
let parentCube = new THREE.Mesh(geometry, parMaterial)//添加到父元素上
parentCube.add(cube)
cube.position.set(-3, 0, 0)
parentCube.position.set(3, 0, 0)

3.物體旋轉與縮放

// 設置放大縮小
cube.scale.set(2, 2, 2) //子放大2
parentCube.scale.set(2, 2, 2) // 父放大2  子基于2再放大2// 旋轉
cube.rotation.x = Math.PI / 4 //父旋轉
cube.rotation.x = Math.PI / 4 //子旋轉，疊加父旋轉

4.設置響應式畫布與全屏控制

threejs渲染輸出的結果就是一個Cavnas畫布，canvas畫布也是HTML的元素之一，這意味著three.js渲染結果的布局和普通web前端習慣是一樣的。

通過renderer.domElement屬性可以訪問threejs的渲染結果，也就是HTML的元素canvas畫布

4.1）非全屏渲染

const width = 800; //寬度
const height = 500; //高度
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
renderer.setSize(width, height); //設置three.js渲染區域的尺寸(像素px)
renderer.render(scene, camera); //執行渲染操作
document.getElementById('wegbl').appendChild(renderer.domElement);

4.2）全屏渲染

const width = window.innerWidth; //窗口文檔顯示區的寬度作為畫布寬度
const height = window.innerHeight; //窗口文檔顯示區的高度作為畫布高度
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

4.3）響應式畫布

// 監聽窗口變化
window.addEventListener('resize', () => {// 重置渲染器寬高比renderer.setSize(window.innerWidth, window.innerHeight)// 重置相機寬高比camera.aspect = window.innerWidth / window.innerHeight// 更新相機投影矩陣camera.updateProjectionMatrix()
})

4.4） 全屏控制

<template><div><button@click="toggleFullscreen"style="position: absolute; left: 10px; top: 10px; z-index: 999">點擊全屏</button><button@click="outToggleFullscreen"style="position: absolute; left: 80px; top: 10px; z-index: 999">退出全屏</button></div>
</template>

// 按鈕全屏
const toggleFullscreen = () => {// renderer.domElement.requestFullscreen()document.body.requestFullscreen()
}
// 退出全屏
const outToggleFullscreen = () => {document.exitFullscreen()
}

?感謝：b站up主：老陳打碼 以及 threejs中文網 教學及參考文檔
到此基礎入門（二）學習告一段落，道阻且長，行則將至。與諸君共勉。 ??