webpack 和 glTF 文件

Question

IM 使用三个 js 并尝试从 blender 导入 3d 模型，我还使用 webpack 来处理它。我试图加载一个 glb 文件，但无法让它工作。它现在将文件添加到构建时的 dist 文件夹，但它没有更改文件的路径(在 javascript 文件中)。

这是我的文件:

网络包配置

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

知道我在这里做错了什么吗？

Answer 1

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