??代碼倉

GitHub - TiffanyHoo/three_practices: Learning three.js together!

可自行clone，無需安裝依賴，直接liver-server運行/直接打開chapter01中的html文件

運行效果圖

知識要點

1. MeshBasicMaterial（基礎網格材質）

? 特點：不響應光照，僅顯示顏色或紋理，性能消耗低。

? 適用場景：靜態背景、2D界面元素、不需要光影效果的模型（如線框模型）。

? 關鍵參數：

? color：設置基礎顏色（如0xff0000為紅色）。

? wireframe：是否以線框模式顯示（true/false）。

2. MeshStandardMaterial（標準網格材質）

r71版本開始引入

? 特點：基于物理渲染（PBR），支持金屬度、粗糙度等物理屬性，響應環境光和直射光，效果更真實。

? 適用場景：大多數需要真實光影效果的模型（如金屬、石材、塑料等）。

? 關鍵參數：

? metalness：金屬度（0為非金屬，1為金屬）。

? roughness：粗糙度（0為光滑，1為粗糙）。

? map：紋理貼圖（如木紋、石紋）。

3. MeshPhongMaterial（馮氏材質）

? 特點：經典光照模型，高光效果明顯，計算速度比標準材質快，但真實感稍弱。

? 適用場景：需要高光效果的非金屬物體（如車漆、光滑塑料）。

? 關鍵參數：

? specular：高光顏色。

? shininess：高光強度（值越大，高光點越小越亮）。

4. MeshLambertMaterial（蘭伯特材質）

? 特點：響應光照，但無高光效果，表面呈啞光質感，光線均勻漫反射。

? 適用場景：布料、紙張、泥土等無光澤物體。

? 關鍵參數：

? color：基礎顏色，受光照影響會變化。

5. SpriteMaterial（精靈材質）

? 特點：用于2D精靈對象（始終面向相機），常作為粒子效果或廣告牌。

? 適用場景：煙霧、火焰、草叢等需要快速渲染的2D元素。

? 關鍵參數：

? map：精靈紋理（如火焰貼圖）。

? sizeAttenuation：是否隨距離縮放大小（true/false）。

6. ShaderMaterial（著色器材質）

? 特點：自定義GLSL著色器代碼，靈活性極高，可實現復雜視覺效果（如動態流體、發光效果）。

? 適用場景：特效、動畫、個性化渲染需求。

? 使用要點：需編寫vertexShader（頂點著色器）和fragmentShader（片元著色器），并通過uniforms傳遞參數。

材質選擇建議

? 追求真實感：優先用MeshStandardMaterial（PBR）。

? 性能優先或無光照需求：用MeshBasicMaterial或MeshLambertMaterial。

? 快速實現高光效果：選MeshPhongMaterial。

? 2D粒子或廣告牌：用SpriteMaterial。

? 自定義特效：使用ShaderMaterial。

核心運行代碼

// create a frame
var frameGeometry = new THREE.BoxGeometry(4, 4, 4);
var frameMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var frame = new THREE.Mesh(frameGeometry, frameMaterial);// position the frame
frame.position.x = 10;
frame.position.y = 2;
frame.position.z = 0;// add the frame to the scene
scene.add(frame);

參考官網：https://threejs.org/docs/#api/en/materials