1. 网格材质：基础材质、法线材质、Lambert、Phong

在Three.js中，网格材质（MeshMaterial） 用于定义3D物体表面的外观。以下是四种基础材质的对比：

1.1. MeshBasicMaterial（基础材质）

最基本的材质，不考虑光照影响。

javascript

const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,      // 红色
  wireframe: false,     // 是否显示线框
  transparent: true,    // 是否透明
  opacity: 0.5         // 透明度
});

特点：

• 不受光照影响，恒定的颜色

• 性能最好

• 适合不需要光照效果的物体（UI元素、背景等）

1.2. MeshNormalMaterial（法线材质）

将法线向量显示为RGB颜色。

javascript

const material = new THREE.MeshNormalMaterial({
  wireframe: false,
  flatShading: false   // 平面着色或平滑着色
});

特点：

• 法线方向映射到颜色（X→红，Y→绿，Z→蓝）

• 不受光照影响

• 常用于调试或特殊视觉效果

1.3. MeshLambertMaterial（兰伯特材质）

考虑光照的漫反射材质，适合哑光表面。

javascript

const material = new THREE.MeshLambertMaterial({
  color: 0xff0000,
  emissive: 0x000000,   // 自发光颜色
  emissiveIntensity: 0  // 自发光强度
});

特点：

• 计算漫反射（Diffuse）

• 性能较好

• 不支持镜面高光

• 适合粗糙表面（布料、石膏等）

1.4. MeshPhongMaterial（冯氏材质）

包含镜面高光的材质，适合光滑表面。

javascript

const material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0xffffff,   // 高光颜色
  shininess: 30,        // 高光亮度（0-100）
  shininess: 100
});

特点：

• 计算漫反射 + 镜面高光（Specular）

• 效果更真实，但计算量更大

• 适合光滑表面（金属、塑料、陶瓷等）

1.5. 对比总结

2. 使用建议

javascript

// 根据需求选择材质
const materials = {
  // 性能优先或不需要光照
  basic: new THREE.MeshBasicMaterial({ color: 0x00ff00 }),

  // 调试法线
  normal: new THREE.MeshNormalMaterial(),

  // 粗糙表面（性能与效果平衡）
  lambert: new THREE.MeshLambertMaterial({ color: 0xff0000 }),

  // 光滑表面（需要高光）
  phong: new THREE.MeshPhongMaterial({ 
    color: 0xff0000,
    shininess: 100
  })
};

2.1. 现代替代方案

• MeshStandardMaterial：基于物理的渲染（PBR），更真实

• MeshPhysicalMaterial：标准材质的扩展，支持更多特性

对于新项目，推荐优先使用MeshStandardMaterial，除非有特定的性能或兼容性需求。