从零开始学习three.js（17）：一文详解three.js中的阴影Shadow

前端小崔

已于 2025-05-14 11:42:33 修改

阅读量749

点赞数 14

分类专栏： three.js 文章标签：学习 javascript 开发语言 3d webgl 前端数据可视化

于 2025-05-14 11:41:59 首次发布

本文链接：https://blog.csdn.net/qq_26655893/article/details/147950705

版权

three.js 专栏收录该内容

20 篇文章

订阅专栏

Three.js阴影详解：从基础配置到高级优化

在Three.js中，阴影是增强三维场景真实感的核心技术之一。它通过模拟光线与物体的交互关系，为虚拟世界注入空间层次感和物理可信度。本文将从基础原理、实现方式、性能优化到实战技巧，全方位解析Three.js阴影的技术细节。

一、阴影的基础原理与核心概念

1.1 阴影的生成机制

Three.js采用阴影贴图（Shadow Map）技术实现动态阴影效果

。其核心流程分为三步：

光源视角渲染：以光源为视角渲染场景，生成深度贴图（记录物体到光源的距离）。
阴影贴图存储：将深度信息转化为纹理，作为后续计算的依据。
主场景渲染：比对每个片段与阴影贴图的深度值，确定是否处于阴影区域。

https://example.com/shadow-map-process.png

1.2 核心参数与属性

属性/参数	作用说明	示例代码
`renderer.shadowMap.enabled`	全局启用阴影渲染	`renderer.shadowMap.enabled = true` 27
`light.castShadow`	光源是否投射阴影（仅支持方向光、聚光灯、点光源）	`directionalLight.castShadow = true` 14
`mesh.castShadow`	物体是否投射阴影	`cube.castShadow = true` 67
`mesh.receiveShadow`	物体是否接收阴影	`plane.receiveShadow = true` 26
`shadow.mapSize`	控制阴影贴图分辨率（值越大越清晰，但性能消耗越高）	`light.shadow.mapSize.set(2048, 2048)` 39

二、阴影类型与渲染优化

2.1 四种阴影贴图类型

Three.js提供多种阴影算法，满足不同场景需求：

类型	特点	适用场景
`BasicShadowMap`	硬阴影，边缘锐利，性能最优	移动端或低配设备9
`PCFShadowMap`	默认类型，通过百分比渐近滤波实现软阴影	通用场景（平衡质量与性能）38
`PCFSoftShadowMap`	更柔和的边缘效果，但性能消耗较高	高质量PC端应用39
`VSMShadowMap`	基于方差阴影映射，支持动态模糊，但可能出现光晕伪影	需要柔和渐变的高端渲染89

示例代码切换阴影类型：

renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 启用高质量软阴影

2.2 关键性能优化策略

1. 阴影相机视锥调整

通过缩小光源的阴影相机范围（left/right/top/bottom），集中渲染有效区域：

directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10; [3,9](@ref)

2. 动态分辨率适配

根据设备性能动态调整阴影贴图分辨率：

const isMobile = /Mobi|Android/i.test(navigator.userAgent);
light.shadow.mapSize.set(isMobile ? 512 : 2048, isMobile ? 512 : 2048);

3. 假阴影技术

对静态场景使用平面贴图模拟阴影，减少实时计算：

const shadowTexture = textureLoader.load('fake_shadow.png');
const shadowPlane = new THREE.Mesh(
  new THREE.PlaneGeometry(5, 5),
  new THREE.MeshBasicMaterial({ map: shadowTexture, transparent: true })
); [10](@ref)

三、高级技巧与实战案例

3.1 虚拟人阴影优化方案（以数字人为例）

聚焦关键区域：将阴影相机的视锥对准角色头部，提升局部精度

mainLight.shadow.camera.top = -0.5;
mainLight.shadow.camera.bottom = 0.5;
mainLight.shadow.camera.left = -0.5;
mainLight.shadow.camera.right = 0.5;

边缘模糊控制：通过radius参数调整阴影模糊度

directionalLight.shadow.radius = 2; // 值越大边缘越模糊[9](@ref)

调试阴影相机

//可视化光源视锥体：
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);

自定义阴影着色器

通过 ShaderMaterial 修改阴影计算逻辑：

// 片元着色器中访问阴影贴图
uniform sampler2D shadowMap;
varying vec4 vShadowCoord;

float getShadow() {
    vec3 projCoords = vShadowCoord.xyz / vShadowCoord.w;
    float closestDepth = texture2D(shadowMap, projCoords.xy).r;
    float currentDepth = projCoords.z;
    return currentDepth > closestDepth ? 0.0 : 1.0;
}

3.2 动态光源阴影同步

当光源位置动态变化时，需手动更新目标矩阵：

function animate() {
  spotLight.target.position.copy(movingObject.position);
  spotLight.target.updateMatrixWorld(); [5](@ref)
  requestAnimationFrame(animate);
}

四、常见问题与调试技巧

4.1 阴影不显示的排查步骤

检查全局开关：确认renderer.shadowMap.enabled已启用
验证光源类型：确保使用方向光/聚光灯/点光源
材质兼容性：使用MeshStandardMaterial或MeshPhongMaterial等支持光照的材质

相机视锥范围：通过CameraHelper可视化阴影相机范围

const helper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(helper); [3](@ref)

4.2 阴影失真问题处理

Bias参数调整：修正深度偏移导致的伪影
```
light.shadow.bias = -0.005; // 根据场景微调[9](@ref)
```

Far/Near平面优化：避免物体超出阴影相机的渲染范围

directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 100; [3](@ref)

结语

Three.js的阴影系统在真实感与性能之间提供了灵活的平衡点。通过理解阴影贴图原理、掌握类型选择策略，并结合场景需求实施优化方案，开发者能够创造出既逼真又流畅的三维体验。建议结合官方示例库（如webgl_shadowmap）进行实践探索，并关注WebGPU等新技术对阴影渲染的革新。