WebGL入门：Three.js高级材质与光照

Three.js提供了多种高级材质和光照模型，用于创建更真实的3D场景效果。以下是关键技术的实现方法：

---

高级材质类型

MeshStandardMaterial
基于物理渲染(PBR)的材质，支持金属度和粗糙度参数：

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.7,  // 0-1金属质感程度
  roughness: 0.2  // 0-1表面粗糙度
});

MeshPhysicalMaterial
扩展标准材质，增加清漆层和折射率控制：

const material = new THREE.MeshPhysicalMaterial({
  clearcoat: 1.0,
  clearcoatRoughness: 0.1,
  ior: 1.5  // 折射率
});

ShaderMaterial
自定义着色器材质，实现特殊效果：

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

---

光照系统配置

环境光(AmbientLight)
提供基础场景照明：

const light = new THREE.AmbientLight(0x404040, 2); // 颜色,强度
scene.add(light);

方向光(DirectionalLight)
模拟太阳光效果：

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
light.castShadow = true; // 启用阴影

点光源(PointLight)
球形辐射光源：

const light = new THREE.PointLight(0xff0000, 1, 100);
light.position.set(5, 5, 5);
light.decay = 2; // 衰减系数

---

阴影优化技巧

阴影贴图设置
提高阴影质量：

renderer.shadowMap.type = THREE.PCFSoftShadowMap;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;

性能平衡
通过参数控制质量与性能：

light.shadow.radius = 3; // 模糊半径
light.shadow.bias = -0.0001; // 消除阴影失真

---

材质特殊效果

法线贴图
增加表面细节：

const textureLoader = new THREE.TextureLoader();
const normalMap = textureLoader.load('normal.jpg');
material.normalMap = normalMap;
material.normalScale.set(1, 1);

环境贴图
实现反射效果：

const envMap = new THREE.CubeTextureLoader()
  .setPath('path/to/')
  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
material.envMap = envMap;
material.envMapIntensity = 1.5;

---

性能优化建议

• 对静态物体使用MeshBasicMaterial减少计算
• 合并几何体使用BufferGeometryUtils.mergeBufferGeometries
• 限制实时阴影投射物体的数量
• 对远处物体使用低分辨率贴图

通过组合不同材质和光照类型，可以创建从风格化到写实的各种视觉效果。实际开发中建议通过GUI工具实时调整参数观察效果变化。