Use .GLB / Blender files in Gridsome project (Vue.js)

Question

I use Three.js in a Gridsome projet, but I'm unable to import .glb file (3D model) with GLTFLoader. Gridsome considers img (png/jpg) or .js files stored in src/assets but not glb.

My files hierarchy :

My import function :

this.loader.load('../assets/models/mars.glb', function(gltf) {
  let scale = 5.6;
});

I receive a 404 error when loading the file.

Any idea ?

Answer 1

Use the /static directory of Gridsome and rebuild your project All files in this directory will be copied directly to your dist during build.

After you can change your import function to :

this.loader.load('./nameOfYourModel.glb', function(gltf) {
  // Your code here 
});