javascript - three.js:部分透明网格转换的阴影

Question

我有一个带有纹理的模型，纹理在某些区域是透明的(alpha 为零)。

但是，当模型转换阴影时，阴影看起来就像模型是实体一样。

我该如何解决这个问题？

Answer 1

在 three.js 中转换阴影时，从光线的 Angular 来看，网格被视为实体。

但是，如果您的网格具有透明纹理或 alpha 贴图，您可以通过为网格指定 CustomDepthMaterial 来获得适当的阴影。

有几种方法可以做到这一点。一种方法是通过自定义 ShaderMaterial。 this three.js example 中有该方法的示例.

对于比较简单的场景，使用这种模式就足够了:

var customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    map: myTexture, // or, alphaMap: myAlphaMap

    alphaTest: 0.5

} );

mesh.customDepthMaterial = customDepthMaterial;

three.js r.85