从零开始学习three.js（6）：一文详解three.js中的材质Material

一、材质核心概念

Three.js中的Material定义了3D物体表面的视觉特性，控制光线与物体表面的交互方式。作为几何体的"皮肤"，材质通过颜色、纹理、金属度等属性实现真实感渲染。所有材质继承自基类THREE.Material，常见属性有：

1. ‌基础属性‌：

• color‌：材质的基本颜色，通常是一个THREE.Color对象。
• opacity‌：材质的不透明度，取值范围为0（完全透明）到1（完全不透明）。
• transparent‌：布尔值，指示材质是否透明。如果设置为true，则材质将考虑透明度的影响。
• alphaMap‌：透明度贴图，用于根据纹理图像的灰度值控制材质的透明度。
• side‌：渲染面的方向，可以是THREE.FrontSide、THREE.BackSide或THREE.DoubleSide。
• emissive‌：自发光颜色，通常是一个THREE.Color对象。
• emissiveMap‌：自发光贴图，用于为材质添加自发光效果。
• specular‌：镜面反射颜色，通常是一个THREE.Color对象。
• shininess‌：光泽度，表示材质的光泽程度。
• wireframe‌：布尔值，指示是否以线框模式渲染物体。
• bumpMap‌：凹凸贴图，用于添加材质的凹凸效果。

2. ‌光照属性‌：

• metalness‌：金属质感强度，取值范围为0-1。
• ‌roughness‌：表面粗糙度，取值范围为0-1。
• envMap‌：环境贴图，用于模拟环境光对材质的影响。

3. 高级属性‌：

• ‌alphaTest‌：设置运行alphaTest时要使用的alpha值，低于此值的像素不会被渲染。
• ‌blendDst‌和blendSrc：混合目标因子，用于自定义混合效果。
• ‌blending‌：设置材质的混合模式，如CustomBlending。
• ‌alphaToCoverage‌：启用alpha to coverage，只能在开启了MSAA的渲染环境中使用。

常见方法有：

• setValues(parameters)‌：设置材质的属性。
• ‌clone()‌：克隆材质。
• dispose () : 处理材质。材质的纹理不会被处理。需要通过Texture处理。
• ‌copy(source)‌：复制另一个材质的属性到当前材质。
• ‌toJSON()‌：将材质序列化为JSON对象。
• ‌fromJSON(json)‌：从JSON对象反序列化材质。

二、材质分类与特性对比

1、 基础材质

材质类型	光照支持	性能消耗	典型应用场景
MeshBasicMaterial	否	最低	UI元素/线框模型
PointsMaterial	否	低	粒子系统
LineBasicMaterial	否	低	路径绘制

示例代码：

// 红色半透明立方体
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  wireframe: true
});

2、光照敏感材质

材质类型	反射模型	特性
MeshLambertMaterial	Lambert	漫反射，无高光
MeshPhongMaterial	Blinn-Phong	支持镜面高光
MeshStandardMaterial	PBR	金属度/粗糙度控制

物理渲染(PBR)参数：

• metalness：金属质感强度（0-1）
• roughness：表面粗糙度（0-1）
• envMap：环境贴图

3、 特殊用途材质

材质类型	功能特性
ShadowMaterial	仅接收阴影
MeshDepthMaterial	深度可视化（近白远黑）
MeshNormalMaterial	法线方向可视化（RGB映射）

三、关键属性配置

1、颜色与透明度

// HSL颜色设置
material.color.setHSL(0.5, 1, 0.5); 
// 透明度配置
material.transparent = true;
material.opacity = 0.7;

2、纹理映射

贴图类型	作用描述	代码示例
map	基础颜色纹理	map: textureLoader.load()
normalMap	法线贴图（表面凹凸）	normalScale: new Vector2(1,1)
displacementMap	位移贴图（几何形变）	displacementScale: 0.1

3、高级光照属性

// Phong材质高光配置
const phongMat = new THREE.MeshPhongMaterial({
  specular: 0xffffff,  // 高光颜色
  shininess: 100       // 光泽度(0-100)
});

// 自发光设置
material.emissive.set(0xff0000); 
material.emissiveIntensity = 1.5;

四、自定义材质开发

1、ShaderMaterial

通过GLSL编写自定义着色器：

// 顶点着色器
varying vec3 vPosition;
void main() {
  vPosition = position;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// 片元着色器
uniform vec3 color;
varying vec3 vPosition;
void main() {
  gl_FragColor = vec4(color * vPosition.z, 1.0);
}

2、材质动画

function animate() {
  requestAnimationFrame(animate);
  material.uniforms.time.value += 0.01;
  renderer.render(scene, camera);
}

五、性能优化策略

1. 材质复用：相同材质的网格共享Material实例
2. 纹理压缩：使用.basis或.ktx2格式纹理
3. LOD控制：根据距离切换材质精度
4. 属性冻结：

material.needsUpdate = false; // 停止材质更新

六、调试技巧

1、 法线可视化：

const helper = new THREE.FaceNormalsHelper(mesh, 2);
scene.add(helper);

2、性能监控

import Stats from 'stats.js';
const stats = new Stats();
stats.showPanel(0); 
document.body.appendChild(stats.dom);

更多three.js、cesium.js开源案例，请移至https://gitee.com/giser2017/threejs-cesium-webgpu-vue-js