时间戳

首页 > 解决方案 > 如何在 A-Frame 中工作的 3D 模型上获得带有 alpha 的纹理？

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

问题描述

我制作了一个带有 .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 中的样子，以及它应该如何显示。

标签： transparencyaframegltf

解决方案

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

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

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

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

推荐阅读