飞机可以在 Three.js 中的另一架飞机上投下阴影吗？答案

【问题标题】：Can a plane cast shadow on another plane in Three.js?飞机可以在 Three.js 中的另一架飞机上投下阴影吗？
【发布时间】：2013-05-21 02:22:33
【问题描述】：

我有一架带有透明 PNG 的飞机（世界地图）。
我可以将阴影从一个平面投射到另一个平面上吗？

这段代码我没有成功：

plane = new THREE.Mesh(new THREE.PlaneGeometry(200,200), new THREE.MeshLambertMaterial({color: 0xcccccc}));

var mapTexture = new THREE.ImageUtils.loadTexture("img/map_transp2.png");
    mapTexture.needsUpdate = true;
    var mapMaterial = new THREE.MeshBasicMaterial({
        color:0xaaaaaa,
        transparent:true,
        map:mapTexture,
        side:THREE.DoubleSide
    });

mapPlane = new THREE.Mesh(new THREE.PlaneGeometry(800/5,370/5), mapMaterial);

plane.receiveShadow = true;
mapPlane.castShadow = true;

【问题讨论】：

见stackoverflow.com/questions/16246023/shadowmap-texture-alpha/…

标签： three.js webgl shadow

【解决方案1】：

如果网格的透明部分是用纹理编写的，则应以不同方式处理它们。看看这个例子：http://threejs.org/examples/webgl_animation_cloth.html

【讨论】：

【解决方案2】：

您的两个平面的 z 值相同。与他们保持距离：

mapPlane.position.z = 100;

【讨论】：

【解决方案3】：

// You need also to set this: 

renderer.shadowMapEnabled = true;

// and also you need to add a light and enable its shadow, for example, 

sLight = new THREE.SpotLight(0xFFF4E5,1);

sLight.position.set( 250, 250, 250);

sLight.castShadow = true;

sLight.shadowMapWidth = 1024;

sLight.shadowMapHeight = 1024;

sLight.shadowCameraNear = 300;

sLight.shadowCameraFar = 600;

sLight.shadowCameraFov = 45;

scene.add(sLight);

【讨论】：

【解决方案4】：

我也遇到过类似的问题。

我不知道为什么会这样，但我解决了它，将 planeGeometry 更改为 cubeGeometry（在平面上投射阴影）

【讨论】：

【解决方案5】：

见https://github.com/mrdoob/three.js/issues/9315

设置

renderer.shadowMap.renderReverseSided = false

或/和

renderer.shadowMap.renderSingleSided = false

可以解决问题。

禁用时，必须在光源上设置适当的 shadow.bias，以便可以同时投射和接收阴影的表面才能正确渲染：

let dl = new THREE.DirectionalLight()
dl.shadow.bias = -0.0001

three.js r.85

【讨论】：