使用MeshLambertMaterial重叠PointLight阴影

Question

我在ThreeJS建立了一个小房子的代表，我有墙壁和这样的分类，我正在添加灯光。我使用PointLights代表灯泡。

我遇到的问题是，有两盏灯，只有它们所覆盖的区域都会被点亮，剩下的半阴影会被点亮。是黑色的，当我希望它们以一半的强度点亮时。下面的图形表示。

图形表示法

在此图像中，圆圈代表灯光，光束代表我期望光线在较小的房间内落下的方式。带有阴影的区域＆＃39;代表我期望拥有半阴影的地方。

在我看来，在场景中实际点亮的唯一区域是两个PointLights的两个亮点，当只有一个会影响一个区域时，该区域是漆黑。

墙壁被添加为BoxGeometries，门周围的墙壁作为Shape的ExtrudeGeometry。

以下是灯光的代码：

scene.add( function() {
    var mainLight1 = new THREE.PointLight( 0xFFFFFF, 0.33 );
    mainLight1.position.set( -middleFloorDim.width / 5, middleFloorDim.height * 9.75 / 10, -middleFloorDim.depth / 4 );
    mainLight1.castShadow = true;

    return mainLight1;
}());

scene.add( function() {
    var mainLight2 = new THREE.PointLight( 0xFFFFFF, 0.33 );
    mainLight2.position.set( -middleFloorDim.width / 5, middleFloorDim.height * 9.75 / 10, middleFloorDim.depth / 4 );
    mainLight2.castShadow = true;

    return mainLight2;
}());

以下是渲染器的代码：

var renderer = new THREE.WebGLRenderer({ antialias: true, });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

其中一面墙的一个例子：

scene.add( function() {
    var northWall = new THREE.Mesh(
      new THREE.BoxGeometry( middleFloorDim.depth, middleFloorDim.height , 0.01 ),
      new THREE.MeshLambertMaterial({
        color: PALETTE.MIDDLE_FLOOR_WALLS,
      })
    );
    northWall.rotation.y = Math.PI / 2;
    northWall.position.set( -middleFloorDim.width / 2, middleFloorDim.height / 2, 0 );
    northWall.castShadow = true;
    northWall.receiveShadow = true;
    return northWall;
}());

Answer 1

当您有多个光源并且接收阴影的材质为MeshLambertMaterial时，您遇到阴影问题。

这是MeshLambertMaterial的限制，因为它使用了Gouraud阴影 - 照明计算是在顶点着色器中计算的。由于阴影是在片段着色器中计算的，因此无法在该点识别光源。

要获得正确的阴影，请使用MeshPhongMaterial或MeshStandardMaterial，例如。

three.js r.88