three.js:如何让透明的png精灵投射和接收阴影

Question

我不确定这是否可能，但我认为值得一问：是否有允许精灵投射和接收阴影的功能、选项或某种着色器？还包括精灵的alpha通道不会渲染为阴影。

我的所有资产都是透明的PNG，我使用three.js中的精灵将纹理映射到精灵上。除了阴影问题外，这项工作效果很好。理想情况下，从sprite投射的阴影不包括PNG的alpha通道*，这样光线就可以穿过PNG的alpha信道，这将是一件很棒的事情，尽管我在threejs的文档中发现很少对此进行研究。

也许这在threejs下是不可能的，或者根本不可能，这是可以理解的，但要提前感谢。

*我正在考虑一种类似于说唱歌手PaRappa或Adventure Xpress的风格。

Answer 1

three.js中的精灵不会投射阴影。

解决方法是使用PlaneBufferGeometry并使其像这样面向相机：

scene.add( plane );

然后在渲染循环中，

plane.lookAt( camera.position );

如果希望平面不在平面纹理透明的地方投射阴影，则需要创建自定义深度材质。这样做的一个例子可以在这个three.js的例子中看到。

如果不创建自定义深度材质，平面将从灯光的角度显示为实心。

three.js r.76

Answer 2

这些是我最终使用的着色器。

片段着色器。您可以更改像素.a，它是像素的alpha值。如果alpha值低于0.5（从而使其看起来透明），则会丢弃该像素上的片段着色器。

#include <packing>
uniform sampler2D texture;
varying vec2 vUV;
void main() {
    vec4 pixel = texture2D( texture, vUV );
    if ( pixel.a < 0.5 ) discard;
    gl_FragData[ 0 ] = packDepthToRGBA( gl_FragCoord.z );
}

顶点着色器。这没什么特别的，我想我会把它留在这里，以防你的顶点着色器引起问题，我可以确认这个着色器与上面的片段着色器兼容。

varying vec2 vUV;
void main() {
    vUV = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1 );
    gl_Position = projectionMatrix * mvPosition;
}