1. Three.js 材质属性：颜色、透明度、反射、折射

在 Three.js 中，材质（Material）决定了物体表面的外观。以下是几个关键材质属性的详细说明：

1.1. 颜色（Color）

1.1.1. 基础颜色设置

javascript

// 1. 基本颜色
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000, // 红色（十六进制）
  // 或
  color: '#ff0000', // CSS颜色字符串
  // 或
  color: new THREE.Color('rgb(255, 0, 0)')
});

// 2. 顶点颜色（用于渐变效果）
material.vertexColors = true;

1.1.2. 纹理贴图

javascript

// 漫反射贴图
const textureLoader = new THREE.TextureLoader();
material.map = textureLoader.load('texture.jpg');

// 自发光贴图
material.emissiveMap = textureLoader.load('emissive.jpg');
material.emissive = new THREE.Color(0x333333);

1.2. 透明度（Transparency）

1.2.1. 基本透明度

javascript

const material = new THREE.MeshBasicMaterial({
  transparent: true,    // 必须设置为true
  opacity: 0.5,        // 透明度值：0（完全透明）~ 1（完全不透明）

  // 高级透明度控制
  alphaTest: 0.5,      // 丢弃透明度低于此值的片段
  side: THREE.DoubleSide // 渲染两面（透明物体常用）
});

// 透明度贴图
material.alphaMap = textureLoader.load('alpha.png');

1.2.2. 混合模式

javascript

material.transparent = true;
material.opacity = 0.7;

// 混合模式选项
material.blending = THREE.NormalBlending;    // 默认
// material.blending = THREE.AdditiveBlending;  // 加法混合
// material.blending = THREE.SubtractiveBlending; // 减法混合

// 深度写入控制（透明物体排序）
material.depthWrite = false; // 避免透明物体深度冲突

1.3. 反射（Reflection）

1.3.1. 环境贴图反射

javascript

// 1. 创建立方体贴图
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMap = cubeTextureLoader.load([
  'px.jpg', 'nx.jpg', // +X, -X
  'py.jpg', 'ny.jpg', // +Y, -Y
  'pz.jpg', 'nz.jpg'  // +Z, -Z
]);

// 2. 标准材质反射
const material = new THREE.MeshStandardMaterial({
  envMap: envMap,
  roughness: 0.1,      // 粗糙度：0（镜面）~ 1（漫反射）
  metalness: 0.9       // 金属度：0（非金属）~ 1（金属）
});

// 反射强度
material.envMapIntensity = 1.0;

1.3.2. 镜面反射材质

javascript

// 使用 MeshPhysicalMaterial 获得更精确的反射
const material = new THREE.MeshPhysicalMaterial({
  envMap: envMap,
  roughness: 0.05,
  metalness: 1.0,

  // 清漆效果（涂层反射）
  clearcoat: 1.0,
  clearcoatRoughness: 0.1,

  // IOR（折射率）
  ior: 2.333
});

1.4. 折射（Refraction）

1.4.1. 基础折射

javascript

const material = new THREE.MeshPhysicalMaterial({
  transmission: 1.0,     // 透射率：0（不透明）~ 1（完全透明）
  ior: 1.5,             // 折射率（玻璃约1.5，水约1.33）
  thickness: 0.5,       // 材质厚度（影响折射强度）
  roughness: 0.0,       // 表面粗糙度

  // 折射贴图
  envMap: envMap,
  transparent: true
});

// 色散（彩虹效果）
material.dispersion = 0.1;

1.4.2. 高级折射设置

javascript

const material = new THREE.MeshPhysicalMaterial({
  transmission: 0.9,
  ior: 1.5,
  thickness: 1.0,

  // 衰减颜色（距离效果）
  attenuationColor: new THREE.Color(0xffffff),
  attenuationDistance: 1.0,

  // 镜面反射
  specularIntensity: 1.0,
  specularColor: new THREE.Color(0xffffff)
});

1.5. 常用材质类型对比

1.6. 实用示例

javascript

// 创建玻璃材质
function createGlassMaterial() {
  const envMap = createEnvironmentMap(); // 创建环境贴图

  return new THREE.MeshPhysicalMaterial({
    color: 0xffffff,
    transmission: 1.0,
    transparent: true,
    opacity: 0.2,
    ior: 1.5,
    thickness: 0.5,
    roughness: 0,
    metalness: 0,
    envMap: envMap,
    envMapIntensity: 1.0
  });
}

// 创建金属材质
function createMetalMaterial() {
  return new THREE.MeshStandardMaterial({
    color: 0xcccccc,
    roughness: 0.1,
    metalness: 1.0,
    envMap: envMap,
    envMapIntensity: 2.0
  });
}

1.7. 性能优化建议

1. 合理使用透明：透明渲染消耗大，尽量减少透明物体数量

2. 贴图优化：使用合适分辨率的贴图，启用mipmap

3. 材质复用：相同材质的网格共享材质实例

4. LOD系统：根据距离使用不同细节的材质

这些属性可以组合使用，创建出各种复杂而真实的材质效果。建议从简单材质开始，逐步添加高级特性以达到理想的视觉效果和性能平衡。