three.js - 将导出的 Blender 纹理转换为使用 Three.JS

Question

我正在尝试获取已导出以正确显示的搅拌机模型，但看起来好像叶子的纹理没有正确混合为 alpha （尽管树干本身工作正常）。这是我所看到的：

注意叶子是如何不正确地混叠的（即它应该看起来像一棵有叶子的树，而不是灰色的纸）。

在 Blender 中，树看起来不错，但有几个人告诉我，我的 alpha 看起来像是倒置的（我不完全确定这意味着什么）。我的猜测是，通过一些文件调整和转换，我可以让附加的图像正常工作。这是我得到的图像资源：

我认为没有必要，但如果您想查看导出的 JSON，我已将其转储在这里： https ://gist.github.com/funnylookinhat/5062061

我很确定问题出在橡树叶的黑白图像上——因为这是两种包装纹理之间的唯一区别。有没有办法可以使用它或转换它以使其正确应用于叶子层？

更新

我能够得到看起来大部分正确的东西（减去一些奇怪的透明度分层问题） - 但我很确定它没有正确完成......仍然会非常感谢任何帮助。

我在白色/黑色和绿色图像上添加了透明度，结果如下：

结果如下：

然后我在 JSON 中翻转了对它们两个的引用——结果如下：

我 99% 确定这没有按预期工作，看起来漫反射贴图无法正常工作......有什么建议吗？

Answer 1

Three.js 没有遮罩纹理（黑白纹理），因此您需要将其烘焙到漫反射纹理的 alpha 通道中（因此使用 .png 格式，因为 .jpg 不支持 alpha - 正如您目前所做的那样）。

尽管漫反射 alpha 做得不好（叶子上有洞），但您的更新在正确的轨道上。这可以通过例如在 Gimp 中通过分解漫反射颜色通道然后使用添加的蒙版层作为 alpha 重新组合来完成（但请注意，假设白色是不透明的，黑色是透明的，因此可能需要反转）。

在材质中，完全不要使用蒙版纹理。叶子相互重叠也可能存在问题，这是一个难以解决的问题，因为透明度通常是 PITA。您可以尝试禁用材质depthWrite和/或使用alphaTest值（例如将其设置为 0.1）以获得不同类型的工件。