使用 MeshLambertMaterial 重叠 PointLight 阴影答案

【问题标题】：Overlapping PointLight Shadows using MeshLambertMaterial使用 MeshLambertMaterial 重叠 PointLight 阴影
【发布时间】：2018-04-23 18:52:16
【问题描述】：

我正在 ThreeJS 中构建我的房子的一个小表示，我已经对墙壁等进行了分类，并且正在添加灯光。我正在使用 PointLights，因为它们代表灯泡。

我遇到的问题是，有两个灯，只有它们都覆盖的区域被照亮，而剩余的“半阴影”是漆黑的，而我希望它们以一半的强度被照亮.下面的图形表示。

图形表示

在这张图片中，圆圈代表灯光，光束代表我希望灯光如何落在较小的房间中。带有“阴影”的区域代表我希望有“半阴影”的区域。

在我看来，场景中唯一真正被照亮的区域是两个点灯都发光的地方，当只有一个点灯会影响一个区域时，该区域是一片漆黑。

墙壁作为 BoxGeometry 添加，门周围的墙壁作为 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;
}());

【问题讨论】：

试试MeshPhongMaterial而不是MeshLambertMaterial作为你的墙。
啊，我现在觉得自己很蠢，这很好用！想把它作为答案发布，我可以接受吗？
我会的。不要觉得自己很愚蠢。

标签： three.js

【解决方案1】：

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

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

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

three.js r.88

【讨论】：