gltf 未加载...仅加载屏幕答案

【问题标题】：glft not loading… only loading screengltf 未加载...仅加载屏幕
【发布时间】：2019-10-28 04:40:40
【问题描述】：

您好，我是 Aframe 和 AR.js 的新手。我正在尝试加载 glft（尝试了一些），但是在测试时，即使模型很小，我也会得到一个带有点的蓝色加载屏幕。

我已经验证了该文件，并在 glft 查看器中在线进行了测试，该文件很好。

谁能看到导致模型无法加载的原因以及我做错了什么？我使用了在网上找到的现有代码，他们的模型运行良好。

我尝试过使用另一种型号 glb，但也不起作用。对于 glft，.bin 位于我的 S3 存储桶上的同一文件夹中。

谢谢！

<!doctype HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0,   maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>

<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.5/aframe/build/aframe-ar.js">.       </script>

<!-- add this script in order to load a large set of 3D model extensions-->
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false ;detectionMode: mono_and_matrix; matrixCodeType: 3x3; ' >

<a-assets>
<a-asset-item id="animated-asset" src="https://arliveevent.s3.eu-west-2.amazonaws.com/starbucks_grande_coffee_cup_caution_hot/scene.gltf"></a-asset-item>
</a-assets>

<a-marker type='barcode' value='7'>
<a-box position='0 0.5 0' color="yellow"></a-box>
</a-marker>

<a-marker type='barcode' value='6'>
<a-entity gltf-model="#animated-asset" scale="0.5 0.5 0.5">
</a-entity>
</a-marker>

<!-- use this <a-entity camera> to support multiple-markers, otherwise use <a-marker-camera> instead of </a-marker> -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>

【问题讨论】：

标签： aframe ar.js

【解决方案1】：

我下载了您的 gltf 并将其放入 https://gltf-viewer.donmccurdy.com/ 它抛出了一个错误 "缺少纹理：starbuckscup2_baseColor.png"

为确保您的资源是可靠的，请下载所有内容（所有模型和纹理），并将它们制作成一个 glb。你可以用这个

http://www.glbconverter.com/

然后将其放入带有本地定义路径的资产文件夹中。那是防弹的方法。是的，它应该与远程源一起工作，但这是自找麻烦。

另外，最好查找错误消息，在测试程序时，打开控制台（在浏览器中单击右键> 检查）。你会得到一些可能出现问题的迹象。在您的代码中包含控制台日志以测试模型是否已加载 (eventListener('model-loaded')。始终先测试您的 glb 以确保其正常工作。

https://gltf-viewer.donmccurdy.com/

【讨论】：