A 型框架忽略 3D 模型的轻微透明材料

A-Frame ignoring 3D model's slightly transparent materials

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

我在浏览器里测试的时候，虽然结构一样，但是素材不一样

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

如前所述, tested uploading it to Clara.io但与浏览器中的结果相同

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

Check the Glitch version here

尝试简化着色器

但这也行不通

我认为解决方案是通过基色的 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 着色器节点，因此您的混合/透明节点设置将不起作用

  • 我注意到当在 principled 着色器上使用更广泛的“alpha”设置时，导出到 .glb，然后重新导入到 Blender 中，它将其转换为混合/透明节点.因此，这可以解释为什么 Three.js

    中的 gLTF 导入程序无法识别常规“alpha”参数