webpack 和 glTF 文件答案

【问题标题】：webpack and glTF fileswebpack 和 glTF 文件
【发布时间】：2021-02-14 00:12:42
【问题描述】：

IM 使用三个 js 并尝试从搅拌机导入 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)
})

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

【问题讨论】：

标签： webpack three.js blender gltf

【解决方案1】：

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

【讨论】：

一个.gltf 文件也可能引用一个或多个.bin 文件——不确定是否也需要为此配置webpack？
是的，我认为是的，我尝试过的所有 gltf 加载程序都没有工作
我在试图解决同样的问题时发现了这个问题——我认为 OP 最终解决了它，但由于没有公认的答案，我想补充一点 @DonMcCurdy 让我指出在正确的方向。要捆绑 .glb 而不是 .gltf 我正在使用：{ test: /\.(glb|bin)$/, loader: 'file-loader', options: { esModule: false } }
这也是我做的

【解决方案2】：

我尝试使用任何 gltf-loaders 都没有结果。这部分 webpack 配置正在运行以我为例

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

这里是Demo

【讨论】：