Search code examples
webpacknuxt.jsassetsaframegltf

aframe assets not loading gltf in nuxt.js

When I use the asset management system to load a model in , the network tab shows the file was loaded, but the console throws an error:

core:propertyTypes:warn "#cityModel" asset not found.

Here is a minimal reproducible example that displays the behaviour:

Note: (This is in as I don't know how to quickly setup on codepen, but the behaviour is exactly the same)

https://codepen.io/onewaveadrian/pen/gOmrwGY

    <template>
      <div id="app">
        <a-scene>
          <a-assets>
            <a-asset-item
              id="cityModel"
              src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"
            ></a-asset-item>
            <a-asset-item
              id="officeclip"
              src="https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.mp4"
            ></a-asset-item>
          </a-assets>
          <a-entity camera look-controls position="0 1.6 0"></a-entity>
          <!-- Load via URL -->
          <a-video
            src="url(https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.mp4)"
            width="16"
            height="9"
            position="0 2 -4"
            scale="0.1 0.1 0.1"
          ></a-video>
          <a-entity gltf-model="url(https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf)" scale="0.01 0.01 0.01" position="0 1 -4" />
          <a-text position="-1 2.6 -4" text="value:  URL Loaded!;  color:  #000000"></a-text>
          <!-- Load via Asset Management -->
          <a-video
            src="#officeclip"
            width="16"
            height="9"
            position="2 2 -4"
            scale="0.1 0.1 0.1"
          ></a-video>
          <a-entity gltf-model="#cityModel" scale="0.01 0.01 0.01" position="2 1 -4"></a-entity>
          <a-text position="1 2.6 -4" text="value:  Asset Management Loaded!;  color:  #000000"></a-text>
        </a-scene>
      </div>
    </template>

    <script>
      import * as aframe from "https://cdn.skypack.dev/[email protected]";
      export default {};
    </script>

    <style></style>

My best guess so far is, that this is webpack loader configuration issue, since the .mp4 loads just fine? If yes, how can I fix it to load via asset manager? And also why does it load with direct URL but not via asset manager?

Solution

  • I'm not sure how vue rendering works (order-wise), but it seems that by the time when gltf-model schema is parsed, the HTML node #cityModel really does not exist in the DOM yet.

    You could

    • modify the gltf-model component to check the node in the init function, or
    • just wait until all is mounted and just add the gltf-model via setAttribute()

    codepen with a simple timeout:

    setTimeout( e => element.setAttribute("gltf-model", "#model")):