I'm trying to make a simple arjs application based on the tutorials on the website, specifically this one
I've been able to successfully swap out other gltf models for new codes, but whenever I try to use my own models they do not display in the application.
I've tested my model in the viewer at https://gltf-viewer.donmccurdy.com/ and it shows up fine.
My code is below.
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf"></a-asset-item>
<a-asset-item id="bimmer" src="https://raw.githubusercontent.com/jaggre/consortium/master/compresso.gltf"></a-asset-item>
</a-assets>
<a-marker type='barcode' value='2'>
<a-entity
animation-mixer
gltf-model="#bimmer"
scale="4 4 4">
</a-marker>
<a-marker id="animated-marker" type='barcode' value='6'>
<a-entity
animation-mixer
gltf-model="#animated-asset"
scale="2 2 2">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
Check in your console for any Cross origin Resource Sharing errors - sometimes if your website is hosted via http or set up differently it doesn't work. see https://aframe.io/docs/1.0.0/core/asset-management-system.html#cross-origin-resource-sharing-cors and https://aframe.io/docs/1.0.0/introduction/installation.html#use-a-local-server . If you just use the file:// protocol as you are testing it may not work.
Other things you could try is moving the model's
a-entitytag outside of the marker tag to see if the marker class is having an effect on it. perhaps check the A-frame inspector (Ctrl Alt I) and poke around if it's just displaying in the wrong place.Update: gltf2.0 not showing in ar.js project seems like a similar question. Perhaps try it's answers too.