如何解决React中的Webpack无法加载具有GLTF扩展名的3D模型，显示404未找到
我正在尝试在带有Typescript的React中加载扩展名为.gltf的3D模型。具有3D模型的文件夹中的文件是.gltf，.png和.bin文件。用于此任务的工具是drei库中的webpack和useGLTFLoader。我尝试了不同的工具。主要来自three.js库，没有任何效果。错误显示未找到3D模型404（如下所示），并且应放置3D模型的位置均未显示任何内容。
GET http://localhost:3000/assets/models/Duck/glTF/Duck.gltf 404 (Not Found)
用于渲染3D模型的组件如下所示：
import React,{ Suspense } from 'react';
import { Canvas } from 'react-three-fiber';
import { useGLTFLoader } from 'drei';
const DuckModel = () => {
const gltf = useGLTFLoader('../../assets/models/Duck/glTF/Duck.gltf',true);
return <primitive object={gltf.scene} dispose={null} />;
};
export const ThreeDimensionComponent = () => {
return (
<>
<Canvas camera={{ position: [0,10],fov: 70 }}>
<Suspense fallback={null}>
<mesh position={[0,250,0]}>
<DuckModel />
</mesh>
</Suspense>
</Canvas>
</>
);
};
在下面，我分享我的webpack配置。
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const root = __dirname;
const gsapPath = '/node_modules/gsap/src/uncompressed/';
module.exports = {
devtool: 'source-map',mode: 'development',entry: path.join(__dirname,'src','index.tsx'),watch: true,output: {
filename: '[name].js',path: path.resolve(__dirname,'dist'),sourceMapFilename: '[name].js.map'
},module: {
rules: [
{
test: /\.(tsx|ts)$/,use: ['babel-loader','ts-loader','tslint-loader']
},{
test: /\.scss$/,use: [
'style-loader',{
loader: 'css-loader',options: {
sourceMap: true
}
},{
loader: 'postcss-loader',options: {
plugins: [require('autoprefixer')()],sourceMap: true
}
},{
loader: 'sass-loader',options: {
sourceMap: true
}
}
]
},{
test: /\.(png|jp(e*)g|svg|gif)$/,use: [
{
loader: 'url-loader',options: {
limit: 8000,sourceMap: true
}
}
]
},{
test: /\.(ttf|eot|woff|woff2)$/,use: {
loader: 'file-loader',options: {
name: 'fonts/[name].[ext]',sourceMap: true
}
}
},{
test: /\.(glb|gltf)$/,use: [
{
loader: 'file-loader'
// options: {
// outputPath: 'assets/models'
// }
}
]
},{
test: /\.(bin)$/,use: [
{
loader: 'file-loader'
}
]
}
]
},resolve: {
extensions: ['.ts','.tsx','.js','.jsx','.json'],modules: ['node_modules',path.resolve(__dirname,'src')],alias: {
TweenLite: 'gsap',CSSPlugin: 'gsap',Draggable: path.join(root,gsapPath + 'utils/Draggable.js'),ScrollToPlugin: path.join(root,gsapPath + 'plugins/ScrollToPlugin.js')
}
},devServer: {
historyApiFallback: true,contentBase: './dist',inline: true,host: 'localhost',port: 3000
},plugins: [
new CleanWebpackPlugin({ verbose: true }),new HtmlWebpackPlugin({
template: path.join(__dirname,'index.html')
}),new webpack.ProvidePlugin({
TweenMax: 'gsap'
}),new CopyWebpackPlugin({
patterns: [{ from: 'src/assets' }]
})
]
};
我的webpack.config.js文件位于项目的根目录中。资产文件夹位于src文件夹中。最后，带有React代码的文件位于src / components / ThreeDimensionComponent / ThreeDimensionComponent.tsx中（因此其路径正确）。
解决方法
您需要导入模型并使用从模型（URL加载程序）获得的URL，或将其放入公用文件夹。您的路径在捆绑输出中没有指向任何地方。
还有一件事，它是@ react-three / drei和useGLTF（url）。
,这是一个带有加载的3D模型的可行示例，以防有人需要。我将hpalu的答案标记为正确，因为它帮助我解决了这个问题。
我需要使用Suspense，其后备不是HTML元素，而是来自react-three-fiber的组件。
该帖子也帮助我解决了该错误：
这是React组件：
import { useGLTF } from '@react-three/drei';
import React,{ Suspense } from 'react';
import { Canvas } from 'react-three-fiber';
const DuckModel = () => {
const gltf = useGLTF('./models/Duck/glTF/Duck.gltf',true);
return <primitive object={gltf.scene} dispose={null} />;
};
export const ThreeDimensionComponent = () => {
return (
<>
<Canvas camera={{ position: [0,3],fov: 80 }}>
<ambientLight intensity={0.3} />
<Suspense
fallback={
<mesh>
<boxBufferGeometry args={[1,1,1]} />
<meshStandardMaterial />
</mesh>
}
>
<DuckModel />
</Suspense>
</Canvas>
</>
);
};
这是此示例的webpack配置：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const gsapPath = '/node_modules/gsap/src/uncompressed/';
module.exports = {
devtool: 'source-map',mode: 'development',entry: path.join(__dirname,'src','index.tsx'),watch: true,output: {
filename: '[name].js',path: path.resolve(__dirname,'dist'),sourceMapFilename: '[name].js.map',publicPath: '/'
},module: {
rules: [
{
test: /\.(tsx|ts)$/,use: ['babel-loader','ts-loader','tslint-loader']
},{
test: /\.scss$/,use: [
'style-loader',{
loader: 'css-loader',options: {
sourceMap: true
}
},{
loader: 'postcss-loader',options: {
plugins: [require('autoprefixer')()],sourceMap: true
}
},{
loader: 'sass-loader',options: {
sourceMap: true
}
}
]
},{
test: /\.(png|jp(e*)g|svg|gif)$/,use: [
{
loader: 'url-loader',options: {
limit: 8000,sourceMap: true
}
}
]
},{
test: /\.(ttf|eot|woff|woff2)$/,use: {
loader: 'file-loader',options: {
name: 'fonts/[name].[ext]'
// sourceMap: true
}
}
},{
test: /\.(glb|gltf)$/,use: [
{
loader: 'file-loader',options: {
outputPath: 'assets/models',{
test: /\.(bin)$/,sourceMap: true
}
}
]
}
]
},resolve: {
extensions: ['.ts','.tsx','.js','.jsx','.json'],modules: ['node_modules',path.resolve(__dirname,'src')],alias: {
TweenLite: 'gsap',CSSPlugin: 'gsap',Draggable: path.join(__dirname,gsapPath + 'utils/Draggable.js'),ScrollToPlugin: path.join(__dirname,gsapPath + 'plugins/ScrollToPlugin.js')
}
},devServer: {
historyApiFallback: true,contentBase: './dist',inline: true,host: 'localhost',port: 3000
},plugins: [
new CleanWebpackPlugin({ verbose: true }),new HtmlWebpackPlugin({
template: path.join(__dirname,'index.html')
}),new webpack.ProvidePlugin({
TweenMax: 'gsap'
}),new CopyWebpackPlugin({
patterns: [{ from: 'src/assets' }]
})
]
};
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。