【threejs】每天一个小案例讲解：常见材质

  代码仓

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