如何在 A-Frame 中工作的 3D 模型上获得带有 alpha 的纹理？答案

【问题标题】：How can I get textures with alpha on 3D models working in A-Frame?如何在 A-Frame 中工作的 3D 模型上获得带有 alpha 的纹理？
【发布时间】：2019-06-04 18:52:43
【问题描述】：

我制作了一个带有 .png 纹理的 3D 模型，该纹理具有 Alpha 通道。 A-Frame 中的纹理无法正确渲染。我在 Autodesk Maya 中创建了模型并将模型导出为 .OBJ。然后，我使用obj2gltf 将.obj 格式转换为.gltf 格式。透明度在 A-Frame 中显示不正确。如图所示，模型存在一些渲染问题。

该模型在我测试过的所有浏览器中都无法正确呈现：Chrome、Firefox 和 Safari (iOS)。从 obj2gltf 导出时，在没有--checkTransparency 的情况下使用模型不会显示任何透明度。如果从<a-assets> 或内联调用它不起作用。我还将模型导入 Blender，然后使用 blender gltf exporter 导出为 .gtlf，而 A-Frame 根本无法识别透明度。如果加载为带有<a-obj-model> 标签的.OBJ，模型也不会正确显示。

<a-assets><a-asset-item id="tree" src="assets/tree02.gltf"></a-asset-item></a-assets>

<a-entity gltf-model="#tree" position="0 0 -10" material="alphaTest: 0.5"></a-entity>

https://i.imgur.com/HbFoBBb.png 这就是它在 A-Frame 中的显示方式

https://i.imgur.com/1zk3uVl.png 这就是模型在 Maya 中的外观，以及它的外观。

【问题讨论】：

在 glTF 模型中，尝试查找"alphaMode":"BLEND"，您可能可以将其更改为"alphaMode":"MASK"。在遮罩模式下，深度缓冲区仍然可以写入，并且叶子的每个像素都是不透明的，或者根据 alpha 值被丢弃。

标签： transparency aframe gltf

【解决方案1】：

透明度似乎在这里起作用，您的问题似乎是经典的opengl排序顺序+透明度+深度缓冲区。前面的一些叶子比其他叶子先渲染，所以后面的叶子不会渲染，因为它们前面已经有东西了。渲染所有叶子的最佳方法是在渲染之前按到相机所有叶子的距离进行预排序，但这在加载外部模型时通常是不可行的。

我建议您尝试在 A-Frame 的材料中激活 side:double 和 depthTest: false。此外，请使用obj 模型而不是gltf，因此您可以将material 组件与它一起使用（您不能将材料组件与gltf 模型一起使用）。

<a-entity obj-model="obj:#tree" material="src: #yourTreeTexture; side: double; depthTest: false">

depthTest 可以解决问题，尽管它可能会渲染场景中的其他内容。尝试找到最好的替代品..

【讨论】：