Search code examples
javascriptthree.js3daframevirtual-reality

Aframe - GLTF Model does not render and is stuck on blue loading screen

This is the blue screen

I'm trying to load 3d models into my scene, and even though other models are loading fine, there seems to be a problem with adding any new ones.

The console shows this error

This is the code that I'm working with:

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <audio id="background" src="asset/audio/background.mp3" preload="auto"></audio>
        <a-asset-item
          id="tree"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item>
        <a-asset-item
          id="tree1"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item>
        <a-asset-item
          id="tree2"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item >
        <a-asset-item id="tree3"
        src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-beech/model.gltf">
        <a-asset-item>
        <a-asset-item id="avatar"
        src="./asset/avatars/96df486e-fbad-4c3d-8aa4-57f6cf51769f.glb">
        <a-asset-item>

        </a-asset-item>
        <a-asset-item id="building1" src="./asset/building1/scene.gltf"></a-asset-item>
        <a-asset-item id="building3" src="./asset/building3/scene.gltf"></a-asset-item>
        <a-asset-item id="scifi" src="./asset/scifi/scene.gltf"></a-asset-item>
        
      </a-assets>
      <a-entity environment="preset:tron "></a-entity>
      <a-entity position="3.5 0 -25" gltf-model="#tree"></a-entity>
      <a-entity position="-25 0 -25" gltf-model="#tree1"></a-entity>
      <a-entity position="-25 0 -10" gltf-model="#tree2"></a-entity>
      <a-entity position="19 0.6 -11" gltf-model="#building1"></a-entity>
        <a-entity position="-15 0 -10" gltf-model="#building3"></a-entity>
        <a-entity position="-5 0 -10" gltf-model="#scifi"></a-entity>
        <a-entity position="20 0 11" gltf-model="#tree3"></a-entity>
      <a-entity position="10 20 -50" gltf-model="#avatar"></a-entity>
      
    </a-scene>
  </body>
</html>

Here, the assets marked with id - tree3 and avatar are the only ones not rendering, and the page gets stuck on the blue screen. I tried commenting these out and adding other models, but they do not seem to work as well. The page loads only when I remove these 2 models and don't add anything new. Trying other solutions, I tried changing directories & using links instead of local references, but nothing seems to work.

Also, the audio randomly plays some times and the other times it doesn't. I'm unable to understand this error as well. I tried replacing the :
<audio id="background" src="asset/audio/background.mp3" preload="auto"></audio> with <a-sound src=“url(asset/audio/background.mp3)”><a-sound> as suggested in another solution, but this doesn't work as well.

Any help would be really appreciated!

Solution

  • The assets (tree3 and avatar) not loading, I believe are caused by the 2 small errors in the a-asset-item open/close logic. I marked your original code and added some notes to explain further below, but also included the adjusted code that you should be able to use as well.

    The other issue regarding your audio being intermittent. I believe has to do with using an mp3 file which are usually a bit large and not super ideal for the web that can hiccup on loading. We can try to optimize that mp3 to keep the file size small and/or convert it to a web optimized format like .ogg to help. Another important thing to note for audio in a-frame is that it is spatial, so if you move away from it then it can get quieter. If you want audio to act more like normal background music then you can just attach that audio entity to the user/player. More info on a-frame sound https://aframe.io/docs/1.3.0/components/sound.html

    Original Code w/ notes :

    <html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <audio id="background" src="asset/audio/background.mp3" preload="auto"></audio><!-- try optimizing the mp3 to a smaller file size and/or a web optimized format lik .ogg as well as let's tweak the src to ./asset just in case too. -->
        <a-asset-item
          id="tree"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item>
        <a-asset-item
          id="tree1"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item>
        <a-asset-item
          id="tree2"
          src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"
        ></a-asset-item >
        <a-asset-item id="tree3"
        src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-beech/model.gltf">
        <a-asset-item><!-- should be an </a-asset-item> close here instead -->
        <a-asset-item id="avatar"
        src="./asset/avatars/96df486e-fbad-4c3d-8aa4-57f6cf51769f.glb">
        <a-asset-item><!-- this should be removed to allow the following  </a-asset-item> to close out this asset item -->

        </a-asset-item>
        <a-asset-item id="building1" src="./asset/building1/scene.gltf"></a-asset-item>
        <a-asset-item id="building3" src="./asset/building3/scene.gltf"></a-asset-item>
        <a-asset-item id="scifi" src="./asset/scifi/scene.gltf"></a-asset-item>

      </a-assets>
      <a-entity environment="preset:tron "></a-entity>
      <a-entity position="3.5 0 -25" gltf-model="#tree"></a-entity>
      <a-entity position="-25 0 -25" gltf-model="#tree1"></a-entity>
      <a-entity position="-25 0 -10" gltf-model="#tree2"></a-entity>
      <a-entity position="19 0.6 -11" gltf-model="#building1"></a-entity>
        <a-entity position="-15 0 -10" gltf-model="#building3"></a-entity>
        <a-entity position="-5 0 -10" gltf-model="#scifi"></a-entity>
        <a-entity position="20 0 11" gltf-model="#tree3"></a-entity>
      <a-entity position="10 20 -50" gltf-model="#avatar"></a-entity>

    </a-scene>
  </body>
</html>

    Fixed Code Example :

    <html>
<head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene>

<a-assets>
    <audio id="background" src="./asset/audio/background.mp3" preload="auto"></audio>

    <a-asset-item
    id="tree" src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"></a-asset-item>

    <a-asset-item id="tree1" src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"></a-asset-item>

    <a-asset-item
    id="tree2" src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-lime/model.gltf"></a-asset-item>

    <a-asset-item id="tree3"
    src="https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/tree-beech/model.gltf"></a-asset-item>

    <a-asset-item id="avatar"
    src="./asset/avatars/96df486e-fbad-4c3d-8aa4-57f6cf51769f.glb"></a-asset-item>

    <a-asset-item id="building1" src="./asset/building1/scene.gltf"></a-asset-item>

    <a-asset-item id="building3" src="./asset/building3/scene.gltf"></a-asset-item>

    <a-asset-item id="scifi" src="./asset/scifi/scene.gltf"></a-asset-item>
</a-assets>

<a-entity environment="preset:tron"></a-entity>
<a-entity position="3.5 0 -25" gltf-model="#tree"></a-entity>
<a-entity position="-25 0 -25" gltf-model="#tree1"></a-entity>
<a-entity position="-25 0 -10" gltf-model="#tree2"></a-entity>
<a-entity position="19 0.6 -11" gltf-model="#building1"></a-entity>
<a-entity position="-15 0 -10" gltf-model="#building3"></a-entity>
<a-entity position="-5 0 -10" gltf-model="#scifi"></a-entity>
<a-entity position="20 0 11" gltf-model="#tree3"></a-entity>
<a-entity position="10 20 -50" gltf-model="#avatar"></a-entity>

</a-scene>
</body>
</html>