转换导出的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）以获得不同类型的工件。