React 中的 Webpack 无法加载带有 GLTF 扩展的 3D 模型，显示 404 not found [英] Webpack in React can't load the 3D model with a GLTF extension, shows 404 not found

问题描述

我正在尝试在 React with Typescript 中加载带有 .gltf 扩展名的 3D 模型.包含 3D 模型的文件夹中的文件是 .gltf、.png 和 .bin 文件.用于此任务的工具是 webpack 和来自 drei 库的 useGLTFLoader.我尝试过不同的工具.主要来自three.js库，没有效果.错误显示未找到 3D 模型 404(如下所示)，并且在应放置 3D 模型的位置没有显示任何内容.

I'm trying to load the 3D model with the .gltf extension in React with Typescript. The files in folder with 3D model are .gltf, .png and .bin files. The tools used for this task are webpack and useGLTFLoader from drei library. I've tried different tools. Mainly from three.js library with no effect. Error is showing that the 3D model is not found 404 (shown below) and nothing appears in place where 3D model should be placed.

GET http://localhost:3000/assets/models/Duck/glTF/Duck.gltf 404 (Not Found)

我用于渲染 3D 模型的组件如下所示:

My component for rendering the 3D model is shown below:

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, 0, 10], fov: 70 }}>
    <Suspense fallback={null}>
     <mesh position={[0, 250, 0]}>
      <DuckModel />
     </mesh>
    </Suspense>
   </Canvas>
  </>
 );
};

下面我分享我的 webpack 配置.

And below I share my webpack config.

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, 'src', 'index.html')
  }),
  new webpack.ProvidePlugin({
   TweenMax: 'gsap'
  }),
  new CopyWebpackPlugin({
   patterns: [{ from: 'src/assets' }]
  })
 ]
};

我的 webpack.config.js 文件位于项目的根目录中.资产文件夹位于 src 文件夹中.最后，带有 React 代码的文件在 src/components/ThreeDimensionComponent/ThreeDimensionComponent.tsx(所以它的路径是正确的).

My webpack.config.js file is in the root directory for the project. The assets folder is in the src folder. Lastly the file with React code is in src/components/ThreeDimensionComponent/ThreeDimensionComponent.tsx (so path for it is correct).

推荐答案

您要么需要导入模型并使用从中获取的 url (url-loader)，要么将其放入公共文件夹中.您的路径在捆绑输出中无处可寻.

You either need to import the model and use the url you get from that (url-loader), or put it into the public folder. Your path points nowhere in the bundled output.

还有一件事，它是@react-three/drei 和 useGLTF(url).

One more thing, it's @react-three/drei and useGLTF(url).

这篇关于React 中的 Webpack 无法加载带有 GLTF 扩展的 3D 模型，显示 404 not found的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！