AFrame gltf loader not recognizing my assets

Question

vue+webpack+aframe started well

Hi! I'm trying to use vuejs to construct a scene which includes a gltf model.

My project is setup using vue cli with webpack template.

For basic setup, as you can see, it's working as expected.

Here's the not happy part.

For default setup, webpack won't let me require gltf/glb file. Therefore I have installed and used file-loader to bake it into static.

This is the part I changed in webpack.config.js.

{
        test: /\.(glb)(\?.*)?$/,
        use: [{
          loader: 'file-loader',
          options: {}
        }]
},

And in the .vue file, I've used vue to dynamically load it.

  data () {
    return {
      img: require('../assets/NormalTangentTest.glb')
    }
  }

Finally, for html, I've used the syntax from Aframe 0.7 doc, and use v:bind to bind src to my local assets.

<a-scene>
  <a-assets>
    <a-asset-item id="tree" :src="img')"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#tree"></a-entity>
</a-scene>

This is what I got with both npm dev server and python http.server.

The gltf file is indeed baked and loaded. But in the console, it says assets not found.

---

Questions:

1. How can I get webpack to pack the right files?

2. Is there better way to load gltf and it's depending textures with file loader?

3. For vue/webpack setup, what is the best way to handle assets management in aframe?

4. Should I just host the static file with nginx or use absolute path to link the folder I put the gltf files in?

Thx for your patience.

Answer 1

You need to first drop the GLTF file here.

I have a slightly more detailed process here which goes over each step, but this would allow the file to be packed.