Three.js模型材质调整与性能优化实战

一、材质基础调整

1.1 颜色与透明度控制

通过Material.color属性可直接修改材质颜色：

material.color = new THREE.Color(0xff0000); // 红色

结合opacity属性实现透明效果：

material.opacity = 0.5; // 50%透明度

如需动态调整，可通过Color.set()方法实现渐变过渡。

---

二、高级材质属性优化

2.1 材质物理属性调整

项目中通过自定义MaterialPatch.ModifyMtlProperties批量修改材质属性：

MaterialPatch.ModifyMtlProperties(object, {
  roughness: 1.0,   // 粗糙度
  metalness: 0.0,   // 金属感
  flatShading: true, // 扁平着色
  emissive: new Color(0x111111), // 自发光
  emissiveIntensity: 0.2
});

• 粗糙度/金属感：通过PBR物理渲染参数，可模拟真实材质质感。
• 扁平着色：flatShading: true可生成卡通风格效果，避免光滑过渡。
• 自发光效果：通过emissive属性实现材质发光，常用于科技感场景。

2.2 材质混合模式

代码中通过alphaTest控制透明度阈值：

material.alphaTest = 0.5; // 透明度低于0.5时不渲染

结合blending属性可实现粒子特效、玻璃穿透等效果。

---

三、性能优化关键技术

3.1 几何体合并与实例化

项目采用mergeGeometry优化三角形数量：

// 合并多个几何体减少Draw Call
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(geometries);

3.2 阴影优化策略

动态调整阴影参数平衡效果与性能：

directionalLight.shadow.mapSize.set(2048, 2048); // 降低分辨率
directionalLight.shadow.radius = 1; // 软阴影半径
renderer.shadowMap.type = PCFSoftShadowMap; // 软阴影算法

通过ShadowMapViewer实时调试阴影范围。

---

四、环境与后期处理

4.1 HDR环境贴图

通过RGBELoader加载HDR贴图增强材质反射：

async createEnvHDR(urlHdr, scene) {
  const textureEvn = await new RGBELoader().loadAsync(urlHdr);
  scene.environment = textureEvn; // 设置环境光
}

环境贴图使材质表面产生真实的反射与漫反射效果。

4.2 后期抗锯齿处理

使用SMAAEffect实现高性能抗锯齿：

postprocessing(renderer, scene, camera) {
  const composer = new EffectComposer(renderer);
  composer.addPass(new RenderPass(scene, camera));
  if (window.devicePixelRatio <= 1) {
    composer.addPass(new EffectPass(camera, new SMAAEffect()));
  }
}

相比MSAA，SMAA在移动端表现更优。

---

五、动态材质交互

5.1 光照动态调整

通过Tween实现灯光渐变动画：

directionalLight.modifyIntensity(2.0, { duration: 800 }); 

结合GUI调试面板实时修改光源参数。

5.2 材质置换技术

代码中通过顶点着色器实现动态扭曲：

// 在顶点着色器中修改顶点位置
vec3 newPosition = position + normal * sin(time) * 0.1;