0

I'm currently testing AR.js to display 3D models in augmented reality using phones. My web coding skills are very novice so I'm pulling together different tutorials to get what I want. I believe I've just about nailed what I need to properly display a gltf file but there seems to be some small issue as the model won't display (I've confirmed that it's a valid file using a gltf viewer). The code also works fine to display a simple a-box, but falls down as soon as I comment that out and add the line for the gltf model.

Any help would be most appreciated!

<html>
    <head>
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
         <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
         <script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
    </head>

    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>

            <a-marker preset="hiro">
            <!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
            <a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
 </html>
Lawrence Laxdal
  • 3
  • 2

1 Answers1

1

You can browse the new AR.js docs there is an example with a gltf model with also an online live version. In the example you provided you should make this change

from this:

<a-entity
 gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>

to:

<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>

You should add: 

https://arjs-cors-proxy.herokuapp.com/

to avoid CORS issues if the resource is not in the same host. AR.js is under a new github org https://github.com/AR-js-org all the resources (libs and docs) are here now.

kalwalt
  • 460
  • 4
  • 12