After browsing through several related topics on SO, I'm still unable to find a solution to my current issue. The problem I'm facing is that the .glb model simply refuses to load. My Vue application utilizes webpack (specifically the Quasar framework which comes with built-in webpack). I've configured Webpack to bundle .glb files using the file-loader, but it doesn't seem to resolve the problem. The model is located in the assets folder. Some suggestions point towards placing 3D models in either the public or static folders. However, after trying both solutions, neither seems to work for me.
I have loaded the model into main_three.js and updated the webpack configuration in quasar.conf.js. Below is an example showcasing this issue: https://codesandbox.io/s/interesting-mendeleev-3e1zoy?file=/src/store/model/main_three.js
main_three.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const loader = new GLTFLoader();
loader.load("~assets/Flower.glb", (glb) => {
state.scene.add(glb.scene);
});
quasar.conf.js
chainWebpack(chain) {
chain.module.rule('glb')
.test(/\.glb$/)
.use('file-loader')
.loader('file-loader')
}