A-Frame 忽略 3D 模型的微透明材质

Question

我使用 Blender 创建了一个 3D 模型，它具有三种具有一定透明度的材质并导出为 .glb。

我在浏览器中测试的时候，虽然结构一样，但材质却不一样

阅读troubleshooting guide for 3D models 并没有看到类似的内容。

如here所述，测试上传到Clara.io但得到的结果与浏览器中的结果相同

再次测试导出文件，在不同浏览器中可视化并添加到A-Frame的<a-entity gltf-model="#octant">和<a-asset-item id="octant" src="octant.glb">：

• material="opacity: 0.0; transparent: true"
• transparent="true"

Check the Glitch version here

---

尝试简化着色器

但这也没用

Answer 1

我认为解决方案是通过基色的 alpha 参数设置透明度，不是您直接在着色器节点上看到的 alpha。请参阅此基础颜色选择器底部的“A”：

还要确保混合模式为“Alpha Blend”。然后，在 A-Frame 中，使用 transparent: true 将 material 组件添加到模型的实体中。

关于故障的工作演示： https://aframe-transparent-material.glitch.me/

（有关另一个没有奇怪颜色问题的演示，请参阅下面的注释）

我还在 Glitch 资产中包含了 .blend 文件供您查看。

注意事项

• 对于您共享的模型，透明度混合并不完美 --- 一些颜色似乎与其他颜色混合，但不同的颜色没有混合。这是因为 Three.js 从后到前渲染透明物体，但是当很多平面像这样相交时，没有明确的从前到后的顺序。解决此问题的方法是将您的平面拆分为 4 个较小的平面（并调整它们的原点），以便没有交叉点和清晰的深度顺序。 Here is a modified version of the Glitch demo with that implemented，您可以看到透明度现在可以正常工作了。

• 据我所知，Blender gLTF 导出仅了解 Principled BSDF 着色器节点，因此您的混合/透明节点设置将不起作用

• 我注意到，当在原则着色器上使用更广泛的“alpha”设置时，导出到 .glb，然后重新导入到 Blender，它将其转换为混合/透明节点。所以这可以解释为什么常规的“alpha”参数没有被 Three.js 中的 gLTF 导入器识别