gpt4 book ai didi

webpack - 使用 Webpack 加载 GLB 模型 - Three.js

转载 作者:行者123 更新时间:2023-12-04 15:59:34 27 4
gpt4 key购买 nike

我是第一次尝试使用 Webpack,但在添加我的 glb 模型时遇到了麻烦。我的模型没问题,使用了很多次,我放在公共(public)文件夹中。我不明白控制台错误,任何帮助将不胜感激,谢谢。

我正在使用three.js r116 和Firefox。 Safari 告诉我同样的错误,找不到模型。

这是我的 JS 代码的一部分:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
loader.load('/assets/models/street_car.glb', (gltf) => {
scene.add(gltf.scene);
});

我的 webpack.config :
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
entry: './src/scripts/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'dist/main.js',
},
performance: {
hints: false
},
plugins: [
new CopyWebpackPlugin([{ from: '**/*', to: '' }], {
context: 'src',
writeToDisk: true,
}),
],
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
port: 9000,
historyApiFallback: true
}
};

最后控制台错误:

enter image description here

最佳答案

我刚找到问题,把这行加到 webpack.config

module:
{
rules:
[
{
test: /\.(glb|gltf)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/models/'
}
}
]
},
]
}

并且不需要在公共(public)文件夹中添加 Assets ,它们在我的 src 文件夹中带有脚本。

关于webpack - 使用 Webpack 加载 GLB 模型 - Three.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61683971/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com