0

I'm trying to create an Augmented reality app directly in a web browser. There's a very easy solution with AR.js in 10 lines of HTML (https://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf).

But I have a problem when I try to import a Gltf model. It works fine on a local server, but when I upload my files on a ftp, the gltf model doesn't show up, instead I have this error in the console : browser.js:111 components:gltf-model:warn THREE.GLTFLoader: Unable to parse model.

I'm very new to web development and javascript, I have no clue about where this error comes from and how to fix it.

Here's the link for the page : https://lesfillesdu9novembre.com/ARWeb/Html/Page.html

And here's my code : 

<html>
    <head>
        <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
        <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
        <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
    </head>


    <body style='margin: 0px; overflow: hidden;'>
        <a-scene embeded arjs='trackingMethod: best; debugUIEnabled: false;'>
            <a-assets>

                <a-asset-item id="car" src="/GLTF/Exterior/Gltf/Exterior_006.gltf"></a-asset-item>

            </a-assets>

            <a-gltf-model src="#car" scale="0.01 0.01 0.01" rotation="0 0 0" position="-2.5 0 0" ></a-gltf-model>

            <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>


            <a-marker-camera preset='hiro'></a-marker-camera>
        </a-scene>

    </body>

</html>
Maxime Parata
  • 165
  • 1
  • 1
  • 7

1 Answers1

0

The URL of your asset seems to be wrong: https://lesfillesdu9novembre.com/GLTF/Exterior/Gltf/Exterior_006.gltf does not return a gltf model but a normal, grey web site.

janpio
  • 10,645
  • 16
  • 64
  • 107