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

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

Answer 2

您的两架飞机的z值相同。给他们一些距离：

mapPlane.position.z = 100;

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

Answer 4

我遇到了类似的问题。

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

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

three.js r.85

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

5 个答案: