灯光不会消除另一个光源的阴影

Question

我只是在 three.js 中尝试一些闪电，遇到了一个我似乎是唯一遇到的问题。

设置很简单，两个PointLight，一个PlaneGeometry，一个BoxGeometry。

"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);

var renderer = new THREE.WebGLRenderer({
    antialias: true
});
var scene = new THREE.Scene();

// init
{
    scene.background = new THREE.Color(0x404040);

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.BasicShadowMap;
    renderer.setSize(w, h);

    document.body.appendChild(renderer.domElement);
}

// plane
{
    let geometry = new THREE.PlaneGeometry(40, 40, 10, 10);
    let material = new THREE.MeshLambertMaterial({
        color: 0x70B009,
        side: THREE.DoubleSide
    });
    var plane = new THREE.Mesh(geometry, material);
    plane.lookAt(new THREE.Vector3());
    plane.rotateX(90 / 180 * Math.PI);
    plane.receiveShadow = true;
    scene.add(plane);
}

// box
{
    let geometry = new THREE.BoxGeometry(1, 1, 1);
    let material = new THREE.MeshLambertMaterial({
        color: 0xFF6C00
    });

    var orangeCube = new THREE.Mesh(geometry, material);
    orangeCube.castShadow = true;
    scene.add(orangeCube);
}

// pointlights
{
    var mapSize = 2 << 10;

    var pointLight1 = new THREE.PointLight(0xFFFFFF, 0.6, 100);
    pointLight1.castShadow = true;
    pointLight1.shadow.mapSize.set(mapSize, mapSize);
    scene.add(pointLight1);

    var pointLight2 = new THREE.PointLight(0xFFFFFF, 0.6, 100);
    pointLight2.castShadow = true;
    pointLight2.shadow.mapSize.set(mapSize, mapSize);
    scene.add(pointLight2);
}

// position camera, lights and box
{
    pointLight1.position.set(0, 15, -15);
    pointLight2.position.set(0, 15, 15);

    orangeCube.position.set(0, 5, 0);

    camera.position.set(10, 10, 0);
    camera.lookAt(new THREE.Vector3());
}

// render once
{
    renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>

效果很好，但有一个问题。灯光并没有消除其他PointLight投射的阴影。

有人知道如何解决这个问题吗？

感谢您的帮助。

Answer 1

正如this SO answer 中所述，MeshLambertMaterial 中的阴影是一个近似值。例如，试试MeshPhongMaterial。

在MeshPhongMaterial 和MeshStandardMaterial 中，阴影是指没有光。如果有来自两个光源的光，则阴影重叠处的阴影强度会有所不同。看到这个three.js example。

three.js r.91