New to A-frame & HTML Coding - my model won't load, what am I doing wrong?

38 Views Asked by At

. Hello! I'm simply trying to load my glb/gltf model into my Glitch project through A-frame coding, followed the tutorials and the websites own tutorials as well, but to no avail :(

It's a University project I have due this coming Monday and I really need it working - what am I doing wrong?

The filename for the code in Glitch I have it named as 'Aframe.html', if that is incorrect as well please let me know! Here is the code I am using currently, it loads up the script and gives me access to the camera. Even when I test with adding boxes through , it works seamlessly on the marker - but my own objects don't load in at all - even after messing with the rotation, position and scale values countless times.

 <html>
  <head>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  </head>
  <body style="margin: 0px; overflow: hidden">
    <a-scene embedded arjs>
      <a-assets>
        <a-asset-item
          id="piest"
          src="https://drive.google.com/file/d/1s-UvNxa_qT6YaWF0ttBZZfm0g_Zp-vhg/view?usp=share_link"
        ></a-asset-item>
        <a-entity
          position="1 1 1"
          scale="10 10 10"
          rotation="-90 -90 -90"
          glb-model="#piest"
          src="https://drive.google.com/file/d/1s-UvNxa_qT6YaWF0ttBZZfm0g_Zp-vhg/view?usp=share_link"
        >
        </a-entity>
      </a-assets>
      <a-marker-camera preset="hiro"></a-marker-camera>
    </a-scene>
  </body>
</html>

1

There are 1 best solutions below

0
Diego Marcos On

Several problems

  1. You have a typo. The name of the component is gltf-model and not glb-model
  2. Entities don't go inside the <a-assets> tag.
  3. A google drive link doesn't point to a file directly but to a web page with a button to download

I fixed the issues, downloaded the model and add it in the assets section of this glitch that works as expected (removed ar-js for simplicity)

https://glitch.com/edit/#!/illustrious-solid-tent?path=index.html%3A14%3A25