Gltf 2.0 model not loading using ar.js

Question

I am trying to load a gltf2.0 model using ar.js. I have tried it several time but I think I am wrong at something. Here's the code:

    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best;'>
      <a-anchor hit-testing-enabled='true'>
      <a-gltf-model-next src="damagedHelmet/damagedHelmet.gltf" scale="0.5 0.5 0.5"></a-gltf-model>
      </a-anchor>
        <a-camera-static/>
    </a-scene>
</body>

The folder of gltf model is in the same folder in which the html code is. Can anyone please help me with this?

With A-Frame >= 0.7.0, you should not need extras or gltf-model-next. Just use gltf-model. Also, could you check that the model works on this drag-and-drop viewer? If not, there may be a problem with the model itself. — Don McCurdy
thanx for the answer the model is working fine on the viewer. And changing gltf-model-next to gltf-model is also not helping.Can you please share me any piece of html where a certain gltf model is loaded with updated version of libraries or can share the syntax for the same — Charizard
I don't know whether AR.js requires a particular version of A-Frame, but working examples with just A-Frame 0.7.0 are here or here. — Don McCurdy

German German · Accepted Answer · 2018-04-19T09:30:12

This is known issue with old aframe builds, however your code has extra issues. Bump up your aframe version and aframe-ar version. Remove the aframe-extras script, it's not necessary in the new builds. Get rid of the a-anchor and finally add a marker with a-marker-camera:

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best;'>
      <a-gltf-model src="https://rawgit.com/KhronosGroup/glTF-Sample-Models/master/2.0/DamagedHelmet/glTF/DamagedHelmet.gltf"></a-gltf-model>
      <a-marker-camera preset='hiro'></a-marker-camera>
      <a-camera-static/>
    </a-scene>
</body>

(run code) (download marker)

Alternatively, if you want to keep the old aframe library you can load the model using a-assets like this:

<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='trackingMethod: best;'>
    <a-assets>
    <a-asset-item id="model" src="https://rawgit.com/KhronosGroup/glTF-Sample-Models/master/1.0/CesiumMan/glTF/CesiumMan.gltf" crossOrigin="anonymous"></a-asset-item> 
  </a-assets>
  <a-gltf-model src="#model"></a-gltf-model>
  <a-marker-camera preset='hiro'></a-marker-camera>
    <a-camera-static/>
    </a-scene>
</body>

(run code) (download marker)

but note that you'll only be able to load gltf 1.0 models (the helmet is gltf 2.0)

Gltf 2.0 model not loading using ar.js

1 Answers