Three.js：为不同光源配置不同阴影映射类型

Three.js 默认通过 renderer.shadowMap.type 全局控制阴影质量，但你可以为每个光源单独配置阴影类型，以此在性能和质量间做针对性平衡。以下是具体实现步骤：

核心实现逻辑 #

每个光源的 shadow.map 属性可以手动赋值为不同类型的 WebGLRenderTarget，以此指定该光源的阴影过滤类型。同时配合调整阴影分辨率，进一步优化性能。

1. 初始化渲染器 #

无需设置全局 shadowMap.type（单个光源的配置会覆盖全局设置），只需开启阴影支持：

const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; // 全局开启阴影支持
document.body.appendChild(renderer.domElement);

2. 配置灯光A（PCFShadowMap，中等质量/性能） #

以方向光为例，启用阴影后，创建对应类型的阴影渲染目标：

const lightA = new THREE.DirectionalLight(0xffffff, 1);
lightA.position.set(5, 10, 7.5);
lightA.castShadow = true;

// 配置阴影分辨率（根据场景需求调整，分辨率越高性能开销越大）
lightA.shadow.mapSize.width = 1024;
lightA.shadow.mapSize.height = 1024;

// 创建PCFShadowMap类型的阴影渲染目标
lightA.shadow.map = new THREE.WebGLRenderTarget(
  lightA.shadow.mapSize.width,
  lightA.shadow.mapSize.height,
  {
    type: THREE.PCFShadowMap,
    format: THREE.DepthFormat,
    depthBuffer: true,
    stencilBuffer: false
  }
);

// 可选：调整阴影相机参数，避免无效区域浪费分辨率
lightA.shadow.camera.left = -10;
lightA.shadow.camera.right = 10;
lightA.shadow.camera.top = 10;
lightA.shadow.camera.bottom = -10;

scene.add(lightA);

3. 配置灯光B（BasicShadowMap，低质量/高性能） #

以点光源为例，使用更低的分辨率+BasicShadowMap最大化性能：

const lightB = new THREE.PointLight(0xffffff, 1);
lightB.position.set(-5, 5, -5);
lightB.castShadow = true;

// 降低分辨率减少性能开销
lightB.shadow.mapSize.width = 512;
lightB.shadow.mapSize.height = 512;

// 创建BasicShadowMap类型的阴影渲染目标
lightB.shadow.map = new THREE.WebGLRenderTarget(
  lightB.shadow.mapSize.width,
  lightB.shadow.mapSize.height,
  {
    type: THREE.BasicShadowMap,
    format: THREE.DepthFormat,
    depthBuffer: true,
    stencilBuffer: false
  }
);

scene.add(lightB);

性能优化要点 #

• 阴影分辨率：对性能敏感的光源（如灯光B）使用更低的 mapSize（如512x512或256x256），避免不必要的计算开销。
• 阴影类型选择：BasicShadowMap 无边缘过滤，渲染速度最快但阴影边缘有锯齿；PCFShadowMap 提供软边缘，质量更好但性能开销略高。
• 阴影相机裁剪：合理设置光源阴影相机的视锥体范围，确保只渲染需要生成阴影的区域，减少绘制调用。

内容的提问来源于stack exchange，提问作者Szymon Gołąb