Ar.js: Is it possible to load GLTF model ?

Created on 21 Jul 2017 · 8Comments · Source: jeromeetienne/AR.js

Thanks again for this great library.
Is AR.js can show GTLF model ? If yes which version ? There are a breaking change between GLTF 1.0 and GLTF 2.0. The loader is GLTF2Loader instead of GLTFLoader.

Another question is AR.js can directly load a STL model ?

Source

lynchmaniac

👍1

All 8 comments

Good point. What mesh object format can be used?

TonyButterfield on 21 Jul 2017

If you're using aframe, it's really easy to just include the gltf model as an asset :)

FrederikNordahl on 21 Jul 2017

This is an example that doesn't work with gltf :

<script src='../../three.js/examples/vendor/three.js/examples/js/loaders/GLTFLoader.js'></script>
<body>
<a-scene  embedded artoolkit='sourceType: webcam; sourceWidth: 240; sourceHeight: 180;' antialias="true" outline>
                <a-gltf-model src="models/Unity2Skfb.gltf"></a-gltf-model>
 </a-scene>

I can see this message in the console.
Cannot read property 'slice' of undefined
I think i have a problem of gltf version. So my question is simple which gltf can i use 1 ou 2 ?

Which format of model is preconized for AR.js and do you know a good converter. We use CAD Assistant from openCascade which seems prettu good. But the model generated from this soft doesn't work at all. So maybe it's a problem from converter.
Thanks for your help.

lynchmaniac on 21 Jul 2017

Have you remembered to also include your buffer_combined.bin file =) ? Otherwise try maybe uploading your gltf so I can see what it contains? I used blender to export to gltf which worked without any issues at all, like this:

<a-assets> <a-asset-item id="turret" src="./assets/models/turret.gltf"></a-asset-item> </a-assets> <a-entity gltf-model="#turret" rotation="-90 0 0"></a-entity>

FrederikNordahl on 21 Jul 2017

Hi, I was working around this afternoon, i don't have an answer but here is the a-frame's doc about gltf:

I've not try yet gltf but i'll do soon, surely using that way.
I did link you the doc for 0.6.0 and atm the basic example is using 0.5.0 (but i've changed and anything goes well (in fact better, i'll open an issue / resolve just after for the "why?" EDIT))

"The loader is GLTF2Loader instead of GLTFLoader."
It's remind me the names of Threejs loaders
(e.g. https://github.com/mrdoob/three.js/issues/10806 )

About the formats, (i'm still doing theorical answer i did not try) a-frame support:
OBJ / MTL:
https://aframe.io/docs/0.6.0/components/obj-model.html
COLLADA:
https://aframe.io/docs/0.6.0/components/collada-model.html
+GLTF...

Threejs support a bunch! can't link all just go here

On the right go far down u'll find that list of link:

BabylonLoader
ColladaLoader
GLTF2Loader
MTLLoader
OBJLoader
OBJLoader2
WWOBJLoader2
PCDLoader
PDBLoader
SVGLoader
TGALoader

and more (JSON from blender exporter is missing in the list above but this is the way i used to do, i'll do gltf soon i think, this sound good)
Hope it helps :)

lbnlrnt on 21 Jul 2017

👍1

If you want to use gtlf 2.0 I think you need to include aframe-extras: https://github.com/donmccurdy/aframe-extras/tree/master/src/loaders

FrederikNordahl on 21 Jul 2017

Thanxs everybody for yours messages. It's work's very well with this code

<a-scene  embedded artoolkit='sourceType: webcam; sourceWidth: 240; sourceHeight: 180;' antialias="true" outline>
  <a-assets>
    <a-asset-item id="mymodel" src="./models/myModel.gltf"></a-asset-item>
  </a-assets>
  <a-marker type='pattern' url='../../data/data/patt.hiro' size='1'>
    <a-entity scale="0.08 0.08 0.08">
      <a-entity mmd='outline: true' afterglow:2.0;>
        <a-entity scale="0.03 0.03 0.03" gltf-model="#mymodel"></a-entity>
      </a-entity>
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

lynchmaniac on 28 Jul 2017

👀2

Hi lynchmaniac, could you please share what version of aframe works with your code? Im trying to do this but It doesn't work. We get this message: aframe-ar.js:19 Uncaught ExitStatus {name: "ExitStatus", message: "Program terminated with exit(1)", status: 1} OR if change the version of the glTF file we get this message: components:gltf-model:warn Failed to load glTF model