如何在 A-Frame 中工作的 3D 模型上获得带 alpha 的纹理？
How can I get textures with alpha on 3D models working in A-Frame?
我制作了一个带有 .png 纹理的 3d 模型，该纹理具有 alpha 通道。纹理无法在 A-Frame. I created the model in Autodesk Maya and exported the model as .OBJ. Then, I used 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 中的样子，以及它应该如何出现。
透明度似乎在这里起作用，您的问题似乎是经典的 opengl 排序顺序 + 透明度 + 深度缓冲区。前面的一些树叶比其他树叶先渲染，所以后面的树叶不会渲染，因为它们前面已经有东西了。渲染所有叶子的最佳方式是在渲染之前根据到相机的距离对所有叶子进行预排序，但这在加载外部模型时通常是不可行的。
我建议您尝试激活 A-Frame 的 material 中的 side:double 和 depthTest: false。此外，使用 obj 模型而不是 gltf，因此您可以将 material 组件与它一起使用（您不能将 material 组件与 gltf 模型一起使用）。
<a-entity obj-model="obj:#tree" material="src: #yourTreeTexture; side: double; depthTest: false">
depthTest 可以解决问题，尽管它可能会渲染场景中的其他内容。尝试找到最好的选择..
我制作了一个带有 .png 纹理的 3d 模型，该纹理具有 alpha 通道。纹理无法在 A-Frame. I created the model in Autodesk Maya and exported the model as .OBJ. Then, I used 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 中的样子，以及它应该如何出现。
透明度似乎在这里起作用，您的问题似乎是经典的 opengl 排序顺序 + 透明度 + 深度缓冲区。前面的一些树叶比其他树叶先渲染，所以后面的树叶不会渲染，因为它们前面已经有东西了。渲染所有叶子的最佳方式是在渲染之前根据到相机的距离对所有叶子进行预排序，但这在加载外部模型时通常是不可行的。
我建议您尝试激活 A-Frame 的 material 中的 side:double 和 depthTest: false。此外，使用 obj 模型而不是 gltf，因此您可以将 material 组件与它一起使用（您不能将 material 组件与 gltf 模型一起使用）。
<a-entity obj-model="obj:#tree" material="src: #yourTreeTexture; side: double; depthTest: false">
depthTest 可以解决问题，尽管它可能会渲染场景中的其他内容。尝试找到最好的选择..