THREE.js 中阴影的奇怪行为

Question

我正在尝试渲染一组位于 3 维空间中的照片，这些照片相互投射阴影。我从两个矩形开始，这是我的代码

function loadScene() {
    var WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        world = document.getElementById('world'),
        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() {
            renderer.render(scene, camera);
        }),
        material = new THREE.MeshLambertMaterial({map: texture}),
        solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}),
        rectangle = new THREE.PlaneGeometry(200, 120),
        mesh = new THREE.Mesh(rectangle, material),
        mesh1 = new THREE.Mesh(rectangle, material),
        spotLight = new THREE.SpotLight(0xFFFFFF, 1.3);

    camera.position.set(0, 0, 200);
    mesh.translateX(140);
    mesh.translateZ(-70);
    mesh.receiveShadow = true;
    mesh1.castShadow = true;
    spotLight.position.x = -100;
    spotLight.position.y = 230;
    spotLight.position.z = 230;
    spotLight.castShadow = true;

    scene.add(spotLight);
    scene.add(mesh);
    scene.add(mesh1);
    renderer.setSize(WIDTH, HEIGHT);
    renderer.shadowMapEnabled = true;
    renderer.render(scene, camera);
    world.appendChild(renderer.domElement);
}

，这里 solidMaterial 是纯红色，material 是纹理材质。我得到的结果如下：

• 如果我对两个网格使用 material，则矩形将按预期显示，但没有阴影。如果我对两者都使用 solidMaterial ，则相同。
• 如果我使用 material 表示 mesh（较远的那个），使用 solidMaterial 表示 mesh1，我会看到一个红色矩形它在有纹理的物体上投射阴影。这是唯一符合我预期的情况。
• 如果我将 solidMaterial 用于 mesh（较远的一个），将 material 用于 mesh1，我会看到一个红色矩形上面有阴影，但是前面的纹理矩形根本没有绘制。

阴影的正确使用是什么？

Answer 1

事实证明，当两个矩形具有相同材质时，阴影不会出现。我想知道这是否是 THREE.js 中的一个错误。

另一方面，如果我使用两种不同的材质，即使它们具有相同的纹理，阴影也会按预期显示。