Question

我目前正在学习WebGL和ThreeJS（r86），我在THREE.PlaneGeometry网格物体上投射阴影时遇到了困难。以下是与我场景中的灯光相关的代码片段

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0,5,5);
    light.target.position.set(0,0,0);
    light.shadow.camera.near = 0.1;       
    light.shadow.camera.far = 1000;      
    light.shadow.camera.left = -500;
    light.shadow.camera.bottom = -500;
    light.shadow.camera.right = 500;
    light.shadow.camera.top = 500;
    light.castShadow = true;
    scene.add(light);

这是一个说明我问题的JSfiddle。我确保为场景中的所有对象设置obj3D.receiveShadow和obj3D.castShadow为true，但THREE.PlaneGeometry网格不会渲染任何阴影效果。任何帮助将不胜感激。

Answer 1

首先，您需要在Renderer上添加enable shadowMap。在您的示例中，您将shadowMap属性指定为'true'，这是错误的。

renderer.shadowMap.enabled = true;

您使用的飞机作为地板旋转到后面，它是双面材料。这是不太推荐的，因为着色器将会这样，但计算可能会丢失或错误。

替换此

floor.rotation.x += Math.PI/2;

用它来投影真实表面上的阴影。

floor.rotation.x -= Math.PI/2;

用户阴影贴图大小为2的数字

light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;

阴影贴图的相机范围非常大。使用较小的。

Updated example

平面几何网格未在threeJS r86中接收阴影

1 个答案: