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

Question

我有一架带有透明 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;

Answer 1

你的两个平面在同一个 z 值上。给他们一些距离：

mapPlane.position.z = 100;

Answer 2

我有一个类似的问题。

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

Answer 3

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

Answer 4

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

Answer 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

三.js r.85