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

【问题标题】：How to load .gltf/.glb model into Three.js app?如何将 .gltf/.glb 模型加载到 Three.js 应用程序中？
【发布时间】：2022-07-09 22:12:20
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js webpack three.js quasar-framework

【解决方案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

../ 返回一个文件夹。

【讨论】：