Three.js 场景中阴影无法显示？这篇帮你解决！

javascript

2024-07-08 21:00:56

Three.js 场景中阴影无法显示？

你精心打造了一个基于 Three.js 的炫酷 3D 模型，却发现唯独阴影不见踪影？很多开发者在使用 Three.js 时都曾被这个问题困扰。让我们一起抽丝剥茧，找出问题根源，让阴影效果完美呈现。

1. 检查场景是否开启阴影

首先，我们需要确认 Three.js 场景已经开启了阴影渲染。你的代码中已经设置了 renderer.shadowMap.enabled = true; ，这部分没有问题。

2. 选择合适的阴影类型

Three.js 提供了几种不同的阴影类型，每种类型都有其优缺点。你选择了 THREE.PCFSoftShadowMap，这是一种比较常用的阴影类型，能够生成较为柔和的阴影效果，是一个不错的选择。

3. 配置光源投射阴影

并非所有光源都能投射阴影。在 Three.js 中，你需要显式地告诉光源需要投射阴影。你的代码中已经创建了一个方向光 topLight 并设置了 topLight.castShadow = true; 这部分也是正确的。

4. 设置物体投射和接收阴影

试想一下，皮影戏中，只有皮影人才能投射阴影，而幕布则负责接收阴影。在 Three.js 中也是如此，要让物体产生阴影，必须将其 castShadow 属性设置为 true。同样，要让物体显示阴影，需要将其 receiveShadow 属性设置为 true。

你在加载模型后设置了 object.castShadow = true; 和 object.receiveShadow = true; 这部分也正确无误。

5. 调整阴影贴图参数

阴影贴图就像一幅画布，记录了场景中的阴影信息。如果这幅画布的分辨率太低，阴影就会看起来很粗糙或者有锯齿。

你可以尝试在创建 renderer 时设置更高的阴影贴图分辨率：

const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
// 设置更高的阴影贴图分辨率
renderer.shadowMap.width = 2048; 
renderer.shadowMap.height = 2048; 

renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container3D").appendChild(renderer.domElement);

6. 检查模型和光源位置

想象一下，如果太阳光线照射不到的地方，自然就不会有阴影。在 Three.js 中也是如此，如果你的模型距离光源太远，或者光源照射不到的区域，阴影可能无法正确显示。尝试调整光源的位置和方向，或者将模型移近光源。

7. 确保地面接收阴影

即使你的模型和光源设置正确，如果场景中没有可以接收阴影的平面，阴影也不会显示出来。你需要在场景中添加一个平面并将其 receiveShadow 属性设置为 true。

例如，你可以添加一个简单的平面作为地面：

const geometry = new THREE.PlaneGeometry(100, 100, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const plane = new THREE.Mesh( geometry, material );
plane.rotation.x = - Math.PI / 2; 
plane.receiveShadow = true;
scene.add( plane );