繁体   English   中英

如何使用 alpha 通道将 gltf 模型添加到 Aframe & AR.js?

[英]How can I add a gltf model to Aframe & AR.js with an alpha channel?

--更新-- 我添加了此代码,它似乎有所帮助。 我可以看到玻璃现在是透明的,但它仍然非常暗。

警告:我是 WebAR 的新手(以及一般的编码)......但请放心,我已经在互联网上搜索了几天试图解决这个问题。

我正在尝试使用带有 AR.js 和 Aframe 的 gltf 模型来制作 WebAR 体验。 这是我的代码的一部分:

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> 
<script src="build/aframe-ar.js"></script> 
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<!-- marker -->
<a-marker type='pattern' url='https://raw.githubusercontent.com/merowell/Evidence-Collection-Procedures/master/assets/markers/patt/pattern-biological-1.patt'>

<!-- add .gltf model-->
    <a-entity gltf-model="https://raw.githubusercontent.com/merowell/Evidence-Collection-Procedures/master/assets/models/biological/biological.gltf" position="0 0 0" crossOrigin="anonymous" rotation="0 0 0" scale=".3 .3 .3">
    </a-entity>

我已经想出了如何让 gltf 模型与纹理一起工作,但我似乎仍然无法获得我想要的确切外观。 大多数情况下,瓶子上的玻璃应该是透明的而不是不透明的。 我在 Blender 2.82 中导入并编辑了模型。 我正在使用 Principled BSDF 节点并将混合模式设置为“alpha 混合”

这是一个屏幕截图: 搅拌机截图

导出模型后,我在gltf 验证器中对其进行了测试,看起来我想要它。 这是一个屏幕截图: gltf 验证器

不幸的是,活动标记不会以相同的方式显示它。 也许我还需要做其他事情才能使 Alpha 通道正常工作? 或者它可能是我的代码中的错误? 这是活动标记的屏幕截图: 活动标记

最后,我尝试将模型添加为 glb 文件,作为资产列出。 但是当我在 a-scene 标签中列出资产时,网络摄像头不会部署。 但是,我读过其他人使用这种方法。

已编辑 - 问题仍然存在......这些模型仅相对于其他模型是透明的。 但是您无法通过透明材料看到真实世界的环境(就像使用波前 obj 一样)

这解决了这个问题......我只需要转到搅拌机文件并重新导出颜色较浅的模型,以使其看起来像我想要的样子。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM