How to load .gltf/.glb model into Three.js app?

user_14676485 0
Viewed 290

I went through a few similar topics here on SO but I can't find a solution to my problem. The issue is that .glb model doesn't load at all. My Vue app uses webpack (I use Quasar framework which has built-in webpack). I configured Webpack to bundle .glb files (I read that file-loader is sufficient here). It doesn't help. My model sits in assets folder. Some say that 3D model should be placed in public (or static) folder. I've tried it and both solutions don't work in my case.

I loaded model to main_three.js and updated webpack in quasar.conf.js. Here is a reproducible example: 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')
}
quasar-framework three.js vue.js webpack javascript
1 Answers

I think that this will work:

const loader = new GLTFLoader();
      loader.load("../assets/Flower.glb", (glb) => {
        state.scene.add(glb.scene);
      });

put ../ in front of assets/Flower.glb in the file url. i think that will work because when we use the ~ operator, it does -(A + 1) where A is the value to the right of the tilde. For example, we'd get -2 if we did this (since -(1 + 1) = -2):

**~**['apples', 'oranges'].indexOf('apples'); // => 0
**~**['apples', 'oranges'].indexOf('oranges'); // => -2

while the ../ goes back a folder.

user_31743590
Related