javascript - three.js:如何让透明的png Sprite 转换和接收阴影?

标签 javascript three.js shader raytracing shadow-mapping

我不确定这是否可行,但我认为值得一问:是否有允许 Sprite 转换和接收阴影的功能、选项或某些着色器?还包括该 Sprite 的 alpha channel 不会渲染为阴影。

我的所有 Assets 都是透明的 PNG,我在 three.js 中使用 Sprite 将纹理映射到 Sprite 上。除了阴影问题之外,这非常有效。理想情况下, Sprite 转换的阴影不包括 PNG 的 alpha channel *,这样光线会穿过 png 的 alpha channel ,尽管我在 threejs 的文档中发现这方面的研究很少。

也许这在 threejs 下是不可能的,或者根本不可能,这是可以理解的,但在此先感谢。

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

最佳答案

three.js 中的 Sprite 不转换阴影。

解决方法是使用 PlaneBufferGeometry 并像这样让它面向相机:

scene.add( plane );

然后在渲染循环中,

plane.lookAt( camera.position );

如果您希望平面不在平面纹理透明的任何地方转换阴影,则需要创建自定义深度 Material 。可以在 this 中查看这样做的示例three.js 示例。

在不创建自定义深度 Material 的情况下,从光线的 Angular 来看,平面将呈现为实体。

three.js r.76

关于javascript - three.js:如何让透明的png Sprite 转换和接收阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37198800/

相关文章:

javascript - 如何使用 Javascript 输出 HTML '<div>' 元素

javascript - 如何使用react-native获取父 block 高度?

javascript - 从数据库加载 3d 模型并在 Three.js 中使用它

opengl - 具有连续随机偏移的纹理平铺?

javascript - 为变量赋值 WHILE 循环

javascript - 如何将新的 Google map 共享链接转换为 iframe 嵌入 html?

javascript - Three.js 跨多个面的渐变

javascript - 转动对象,以便它们在 Three.js 中重置其 y 旋转

Android opengl 着色器程序将图像从相机复制到 SSBO 以进行 TF-lite GPU 推理

c - 使用顶点缓冲区对象为 OpenGL 中的基元赋予颜色