Webpack和glTF文件

Question

我正在使用Three.js，并尝试从Blender导入3D模型，同时还在使用Webpack。我正在尝试加载GLB文件，但无法使其正常工作。它现在将文件添加到构建的dist文件夹中，但未更改JavaScript文件中的文件路径。

以下是我的文件：

webpack配置

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    watch: true,

    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
            },
            {
              test: /\.(png|jpe?g|gif|glb|gltf)$/i,
              loader: 'file-loader',
              options: {
                  publicPath: './',
              },
          },
          {
            test: /\.glb$/,
            loader: '@vxna/gltf-loader',
            options: { inline: true },
          },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

我正在导入的 JavaScript 文件。

import * as THREE from 'three';
import gsap from "gsap";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import model from './fx.glb'


const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()

init()
const geometry= createShape()
scene.add(geometry)
const loader = new GLTFLoader()
loader.load('./fx.glb',(model)=>{
  scene.add(model)
})

你有任何想法，我在这里做错了什么吗？

- Sid

Answer 1

         {
          test: /\.(png|jpe?g|gif|glb|gltf)$/i,
          loader: 'file-loader',
          options: {
              publicPath: './',
              name: '[name].[ext]'
          },

- Sid

---

一个.gltf文件可能引用了一个或多个.bin文件 —— 不确定webpack是否也需要进行配置？ - Don McCurdy

是的，我认为它确实如此。我尝试过的所有gltf加载器都还没有起作用。 - Sid

我在尝试解决同样的问题时发现了这个问题。我想OP最终解决了它，但由于没有被接受的答案，我想补充一下@DonMcCurdy指出了正确的方向。为了打包一个.glb而不是.gltf，我使用以下代码：{ test: /\.(glb|bin)$/, loader: 'file-loader', options: { esModule: false } } - Jim

这也是我所做的。 - Sid

Answer 2

我尝试使用任何gltf-loaders但没有结果。这部分webpack配置对我的示例有效。

{
     test: /\.(png|svg|jpe?g|bin|gif|glb|gltf)$/,
     loader: 'file-loader',
     options: {
      esModule: false
    }
   },

这里有演示

- Bartek Więckowski