如何将 .gltf/.glb 模型加载到 Three.js 应用程序中？

Question

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')
}

Answer 1

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.