three.js：部分透明网格投射的阴影

Question

three.js：部分透明网格投射的阴影

javascriptthree.js

5

我有一个带纹理的模型，但其中一些区域的纹理是透明的（alpha为零）。

然而，当该模型投射阴影时，阴影出现时就像该模型是实心的。

我该如何解决这个问题？

- feixiangsnail

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

在three.js中投射阴影时，从光的角度来看，网格被视为实心。

然而，如果您的网格有透明纹理或alpha贴图，则可以通过为网格指定CustomDepthMaterial来实现正确的阴影。

有几种方法可以做到这一点。其中一种方式是通过自定义ShaderMaterial。在此three.js示例中有一个使用该方法的示例。

对于简单的场景，使用以下模式就足够了：

var customDepthMaterial = new THREE.MeshDepthMaterial( {

    depthPacking: THREE.RGBADepthPacking,

    map: myTexture, // or, alphaMap: myAlphaMap

    alphaTest: 0.5

} );

mesh.customDepthMaterial = customDepthMaterial;

three.js r.85