Three.js双PointLight场景：一个光源无法消除另一光源阴影求助

嘿，我之前在做Three.js光照实验时也踩过阴影叠加的坑，来帮你分析下～

首先得明确：Three.js里每个光源的阴影是独立计算并叠加的，没有原生的“一个光源消除另一个阴影”的功能。你遇到的问题大概率是阴影设置不到位，或者对阴影叠加的逻辑理解有偏差，下面是具体的排查和解决方向：

1. 确保阴影相关的基础设置都开启了 #

很多时候阴影不生效是因为漏开了某个开关，你需要检查这些点：

• 渲染器必须开启阴影映射：renderer.shadowMap.enabled = true，可以加上renderer.shadowMap.type = THREE.PCFSoftShadowMap获得更柔和的阴影效果
• 每个PointLight要开启阴影投射：light.castShadow = true
• 接收阴影的物体（比如你的Plane）要设置mesh.receiveShadow = true
• 投射阴影的物体（比如你的Box）要设置mesh.castShadow = true

2. 调整PointLight的阴影相机参数 #

PointLight的阴影是用CubeCamera计算的，如果阴影相机的范围没覆盖到物体，会导致阴影渲染异常，看起来像是没抵消。你需要给每个光源设置合适的阴影相机参数：

// 以其中一个PointLight为例
const light1 = new THREE.PointLight(0xffffff, 1);
light1.position.set(5, 5, 5);
light1.castShadow = true;
// 调整阴影相机的近远裁剪面，确保覆盖场景内的物体
light1.shadow.camera.near = 0.1;
light1.shadow.camera.far = 20;
// 提升阴影贴图分辨率，避免模糊
light1.shadow.mapSize.set(1024, 1024);
scene.add(light1);

3. 模拟“阴影抵消”的效果 #

如果你希望达到类似“一个光源削弱另一个阴影”的视觉效果，可以试试这些技巧：

• 调整光源强度：把其中一个光源的强度调大，它的光照会覆盖另一个光源的阴影区域，视觉上就像阴影被抵消了
• 柔化阴影边缘：给光源设置shadow.radius（部分Three.js版本支持），或者用PCFSoftShadowMap，让阴影边缘更柔和，叠加后不会显得生硬
• 限制阴影投射范围：通过调整light.shadow.camera的视锥体，让其中一个光源的阴影只投射在特定区域，避免和另一个光源的阴影重叠

补充你的代码示例 #

结合你的代码框架，完整的阴影设置大概是这样：

"use strict"; 
var scale = 0.8; 
var w = parseInt('' + Math.floor(innerWidth * scale)); 
var h = parseInt('' + Math.floor(innerHeight * scale)); 

var camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); 
camera.position.set(0, 5, 10);
camera.lookAt(0,0,0);

var renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(w, h);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene(); 

// 第一个PointLight
const light1 = new THREE.PointLight(0xffffff, 1.5);
light1.position.set(3, 4, 3);
light1.castShadow = true;
light1.shadow.camera.near = 0.1;
light1.shadow.camera.far = 15;
light1.shadow.mapSize.set(1024, 1024);
scene.add(light1);

// 第二个PointLight
const light2 = new THREE.PointLight(0xffffff, 1);
light2.position.set(-3, 4, -3);
light2.castShadow = true;
light2.shadow.camera.near = 0.1;
light2.shadow.camera.far = 15;
light2.shadow.mapSize.set(1024, 1024);
scene.add(light2);

// 平面（接收阴影）
const planeGeo = new THREE.PlaneGeometry(10, 10);
const planeMat = new THREE.MeshStandardMaterial({ color: 0xcccccc });
const plane = new THREE.Mesh(planeGeo, planeMat);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);

// 盒子（投射阴影）
const boxGeo = new THREE.BoxGeometry(2, 2, 2);
const boxMat = new THREE.MeshStandardMaterial({ color: 0x4287f5 });
const box = new THREE.Mesh(boxGeo, boxMat);
box.position.set(0, 1, 0);
box.castShadow = true;
scene.add(box);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

你可以试试调整两个光源的强度和位置，看看阴影的叠加效果。如果还是有问题，检查下Three.js的版本，有些旧版本对PointLight阴影的支持可能有bug。

内容的提问来源于stack exchange，提问作者Feirell