A-Frame 纹理不透明答案

【问题标题】：A-Frame Texture not TransparentA-Frame 纹理不透明
【发布时间】：2018-07-21 09:10:23
【问题描述】：

在我的 A-Frame 场景中，我有两个独立的倒置球体模型，具有两种不同的材料

要创建倒转球体对象，我使用的是 Blender。我在纹理菜单中应用纹理，然后将它们作为材料应用。然后，我将模型导出为 .dae，并在导出设置中包含材料。

invertedsphere2 的纹理窗口：

invertedsphere2 的材料窗口：

在这张照片中，“models/invertedsphere.dae”正确地将“glyphs.png”显示为纹理。

这是我的第二个倒转球体在 Blender 中的显示方式，以及我认为它在 A-Frame 中的显示方式。

但是，这就是它在 A-Frame 中的显示方式。

第一个球体每个维度是 5 个单位，第二个球体每个维度是 4.7 个单位，这意味着我应该能够通过第二个球体的透明区域看到第一个球体，但这不是发生。

如何让纹理正确显示？

另外，我的场景代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8" />
<title>Aetheria</title>
<meta name="description" content="Aetheria" />
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

  <!-- Primitives. -->
  <a-box position="-1 0.6 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.35 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.85 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0.1 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-entity collada-model="model/invertedsphere/invertedsphere.dae" scale="5 5 5" position="0 1.441 -2.752"></a-entity>
  <a-entity collada-model="model/invertedsphere/invertedsphere2.dae" scale="4.7 4.7 4.7" position="0 1.441 -2.752"></a-entity>


  <!-- Background sky. -->
  <a-sky height="2048" radius="30" src="#skyTexture" theta-length="90" width="2048"></a-sky>

  <!-- Ground. -->



</a-scene>

【问题讨论】：

您是否尝试将其导出为 glTF ？
Aftet 修复图像标签... 4me 它看起来好像渲染达到了深度限制。出于计算优化的原因，任何距离 > SomeValue 的点都不会被考虑 - 虽然只是一种预感 - 您可能想要搜索 api。撤回了接近投票。运气好解决它:)
@PiotrAdamMilewski 我尝试导出为 glTF 并且纹理根本没有出现在模型上。此外，在我的 LiveReload 服务器上，重新加载页面时似乎不再访问纹理。
@PatrickArtner 感谢您对图像标签的帮助，如果我言辞犀利，我深表歉意。
你没有刻薄，我过快地责备你到 blender.stackexchange.com ;) - 大多数搅拌机问题更适合在那里处理

标签： blender aframe

【解决方案1】：

我最终找到的解决方案涉及使用 glTF，并且该过程比我最初预期的要复杂得多。我会尽我所能在这里写一篇简明的指南。

克隆glTF Blender Exporter
确保将脚本放在 Blender 插件目录中并启用它。
在您希望纹理/添加材质的模型中，选择“文件 > 链接”，然后导航到“（工作目录）/glTF-Blender-Exporter/pbr_node/glTF2.blend/Node Tree/”，然后选择“ glTF Metallic Roughness”和/或“glTF Specular Glossiness”
打开node editor 并确保您正在显示着色器节点并从对象中获取着色器节点，例如
在节点编辑器菜单中，选择“Add > Group > glTF Metallic Roughness/glTF Specular Glossiness”，然后单击节点编辑器中的任意位置进行放置。
作为参考，我的对象是这样设置的：请注意，我的图像纹理的 Alpha 通道节点连接到着色器中的 Alpha 通道。这是使纹理透明的关键部分。

注意：如果导出到 glTF，此时除了 glTF 着色器之外没有其他着色器可以工作。

导出为 .glTF 或 .glb。如果导出为 .glTF，将创建一个 .glTF 文件和一个 .bin 文件。 .bin 文件将包含材质和纹理。如果您导出为 .glb 文件，则材质和纹理将独立包含在与模型相同的文件中。
使用the glTF viewer 进行测试。我更喜欢它而不是在 A-Frame 中进行测试，因为它以清晰易读的方式为您提供错误输出，并允许您拖放模型。

【讨论】：