Three.js 的第一個(gè)工程-創(chuàng)建一個(gè)旋轉(zhuǎn)方塊
工程結(jié)構(gòu)
每個(gè)three.js工程至少需要一個(gè) HTML 文件用于定義一個(gè)網(wǎng)頁(yè)，一個(gè) JavaScript 文件來運(yùn)行 three.js 代碼。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js
import * as THREE from 'three';
public/ 文件夾
靜態(tài)文件夾，用于存放所有要推送到網(wǎng)頁(yè)的文本、音頻、三維模型。
至此，把基本的工程文件結(jié)構(gòu)已經(jīng)建好了，接下來，需要在本地運(yùn)行這個(gè)工程，并且通過一個(gè)網(wǎng)頁(yè)瀏覽器進(jìn)行訪問查看。可以通過 npm 和 構(gòu)建工具 或者通過 CDN 導(dǎo)入 three.js 來完成安裝和本地開發(fā)。
安裝 NPM 和 構(gòu)建工具
在終端進(jìn)行操作，安裝NPM和VITE。
安裝NPM
安裝 three.js
npm install --save three
安裝vite
npm install --save-dev vite
上述安裝操作會(huì)在工程路徑下生成 node_modules/文件夾和 package.json文件。
可以在工程根目錄新建一個(gè) jsconfig.json 文件，添加以下配置有助于編輯器定位 three.js 文件，從而實(shí)現(xiàn)更強(qiáng)大的自動(dòng)補(bǔ)全功能。
{
"compilerOptions": {
// other options...
"paths": {
"three/webgpu": ["node_modules/three/build/three.webgpu.js"],
"three/tsl": ["node_modules/three/build/three.tsl.js"],
},
}
}
試運(yùn)行
服務(wù)器終端運(yùn)行
npx vite --host
可見
VITE v7.0.6 ready in 101 ms
? Local: http://localhost:5173/
? Network: http://192.168.254.160:5173/
? press h + enter to show help
瀏覽器訪問
本機(jī)訪問：瀏覽器，輸入http://localhost:5173/
遠(yuǎn)程訪問：瀏覽器，輸入http://192.168.254.160:5173/
three.js應(yīng)用整體結(jié)構(gòu)
渲染器(Renderer)
將三維場(chǎng)景渲染成一個(gè)二維圖片現(xiàn)實(shí)在畫布上。
場(chǎng)景圖（Scene)
場(chǎng)景圖由很對(duì)對(duì)象組成，包括網(wǎng)格(Mesh)、光源（Light)、群組（Group)、三維物體(Object3D)和攝像機(jī)(Camera)對(duì)象。
攝像機(jī)(Camera)
攝像機(jī)有一半在場(chǎng)景圖中，一般在場(chǎng)景圖外，且可以放置多個(gè)攝像機(jī)在一個(gè)場(chǎng)景中。
接下來，創(chuàng)建一個(gè)最基本的three.js場(chǎng)景，一個(gè)旋轉(zhuǎn)方塊。
設(shè)置場(chǎng)景(scene) 相機(jī)（Camera) 渲染器（renderer)
1. 場(chǎng)景（Scene）
場(chǎng)景是 Three.js 中所有 3D 對(duì)象的容器。類似一個(gè)“舞臺(tái)”，所有的物體、燈光、相機(jī)都放置在這個(gè)舞臺(tái)上。
const scene = new THREE.Scene();
2. 相機(jī)（Camera）
相機(jī)決定了從哪個(gè)角度觀看場(chǎng)景，就像真實(shí)世界中的攝像機(jī)一樣。
最常用的是透視相機(jī)（PerspectiveCamera），它模擬人眼的視覺效果，近大遠(yuǎn)小。
第一個(gè)屬性是視場(chǎng)角（field of view）。視場(chǎng)角是指在任意給定時(shí)刻，屏幕上能看到的場(chǎng)景范圍，其值以角度為單位，選75，較大的值意味著更寬廣的視角和更多的場(chǎng)景可見，而較小的值則會(huì)產(chǎn)生類似望遠(yuǎn)鏡的效果。
第二個(gè)屬性是寬高比（aspect ratio），設(shè)置window.innerWidth / window.innerHeight，匹配瀏覽器窗口，確保渲染出的3D場(chǎng)景不會(huì)因?yàn)榇翱诔叽绲淖兓д妫瑥亩３终_的視角。
三、四連個(gè)屬性是：近裁剪面（near）和遠(yuǎn)裁剪面（far）。表示比“遠(yuǎn)”值1000更遠(yuǎn)或比“近”值0.1更近的物體將不會(huì)被渲染。
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene.add(camera);
3. 渲染器（Renderer）
渲染器負(fù)責(zé)將場(chǎng)景和相機(jī)的內(nèi)容繪制到屏幕上。
通過const renderer = new THREE.WebGLRenderer();創(chuàng)建一個(gè)名叫renderer的渲染器THREE.WebGLRenderer的實(shí)例。
設(shè)置渲染器實(shí)例畫布的尺寸是窗口尺寸。
把渲染器renderer的DOM元素添加為網(wǎng)頁(yè)主體body的子元素。
three.js使用WebGL渲染時(shí)，會(huì)創(chuàng)建一個(gè)
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
添加三維模型
創(chuàng)建立方體實(shí)例gepmetry，是BoxGeometry，寬高深的均為1。
創(chuàng)建材質(zhì)實(shí)例material，材質(zhì)是MeshBasicMaterial基礎(chǔ)材質(zhì)，不需要光照也能看到（適合測(cè)試），顏色為0x00ff00，綠色。
將形狀和材質(zhì)組合，創(chuàng)建實(shí)際物體cube，網(wǎng)格對(duì)象Mesh。
將cube添加到場(chǎng)景scene中。
因?yàn)槲矬w在(0,0,0)，所以把相機(jī)沿z軸向前移動(dòng)5個(gè)單位，讓cube可觀測(cè)。
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 );
camera.position.z = 5;
渲染場(chǎng)景
添加動(dòng)畫循環(huán)，持續(xù)渲染。
定義一個(gè)animate函數(shù)，用renderer這個(gè)渲染器實(shí)例的方法render 將當(dāng)前的 scene（場(chǎng)景）和 camera（相機(jī)）渲染出來。再通過方法setAnimationLoop啟動(dòng)持續(xù)的動(dòng)畫渲染，仿佛調(diào)用animation。
function animate() {
renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );
添加旋轉(zhuǎn)動(dòng)畫
在animation函數(shù)/方法中，添加rotation邏輯。動(dòng)畫會(huì)每幀執(zhí)行一次。可以看到綠色方塊在旋轉(zhuǎn)。
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
浙公網(wǎng)安備 33010602011771號(hào)