0

Hi I'm new to Aframe and AR.js. I'm trying to load a glft (well tried a few) but when testing I just get a blue loading screen with the dots even though the model is small.

I have validated the file and also tested in a glft viewer online and the file is fine.

Can anyone see what the issue could be as to why the model doesn't load and what I'm doing wrong? I have used an existing code I found online, and their model worked fine.

I have tried with another model, a glb, and that also doesn't work. For the glft the .bin is in the same folder on my S3 bucket.

Thanks!

<!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>
Ells
  • 1

1 Answers1

1

I downloaded your gltf and threw it into https://gltf-viewer.donmccurdy.com/ and it threw an error "Missing texture: starbuckscup2_baseColor.png"

To make sure your assets are solid, download everything (all models and textures), and make them into a single glb. you can use this

http://www.glbconverter.com/

then put that in your assets folder with a locally defined path. That is the bulletproof way. Yes it should work with a remote source, but that is asking for trouble.

Also, it is best to look for error messages, when testing your program, open the console (right click in the browser> inspect). You will get some indication of what might be going wrong. Include console logs in your code to test if the model is loaded (eventListener('model-loaded'). Always test your glb first to insure it is working.

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

Thomas Williams
  • 842
  • 6
  • 13