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

Question

我在这里经历了一些类似的主题，但我找不到解决我的问题的方法。 问题是.glb模型根本不加载。 我的 Vue 应用程序使用 webpack（我使用内置 webpack 的 Quasar 框架）。 我将 Webpack 配置为捆绑.glb文件（我在这里读到file-loader就足够了）。 它没有帮助。 我的模型位于assets文件夹中。 有人说 3D 模型应该放在public （或static ）文件夹中。 我已经尝试过了，两种解决方案都不适用于我的情况。

我将模型加载到main_three.js并在 quasar.conf.js 中更新了quasar.conf.js 。 这是一个可重现的示例： 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

我认为这会起作用：

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

将../放在文件 url 中 assets/Flower.glb 的前面。 我认为这会起作用，因为当我们使用 ~ 运算符时，它确实 -(A + 1) 其中 A 是波浪号右侧的值。 例如，如果我们这样做，我们会得到 -2（因为 -(1 + 1) = -2）：

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

而../返回一个文件夹。