Reactjs React can'中的网页包；t使用GLTF扩展加载三维模型，显示404未找到

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

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

用于渲染三维模型的我的组件如下所示：

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.config.js文件位于项目的根目录中。资产文件夹位于src文件夹中。最后，带有React代码的文件位于src/components/ThreeDimensionComponent/ThreeDimensionComponent.tsx中（因此其路径是正确的）。

您需要导入模型并使用从该模型获得的url（url加载器），或者将其放入公用文件夹。您的路径在捆绑输出中没有指向任何地方

---

还有一件事，它是@react three/drei和useGLTF（url）。

这里是一个加载3D模型的工作示例，以防任何人需要它。我将hpalu的答案标记为正确，因为它帮助我解决了这个问题

我需要将悬念与回退一起使用，回退不是HTML元素，而是来自react three fiber的组件

这篇文章也帮助我解决了这个问题：

以下是反应组件：

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, 0, 3], fov: 80 }}>
    <ambientLight intensity={0.3} />
    <Suspense
     fallback={
      <mesh>
       <boxBufferGeometry args={[1, 1, 1]} />
       <meshStandardMaterial />
      </mesh>
     }
    >
     <DuckModel />
    </Suspense>
   </Canvas>
  </>
 );
};

---

我为.gltf和.bin扩展名的文件加载器添加了output.publicPath:“/”和options.outputPath:“资产/模型”。模型在终端中显示为[emmited]：models/Duck/glTF/Duck.glTF 4.85 KiB[emmited]，但三维模型仍未显示。当我选中DevTools sources选项卡时，那里只显示“images”资产文件夹。如果需要的话，我可以添加更多的代码/信息。我还按照你的建议改为@react three/drei和useGLTF（url）。我已经设法让它工作了。发布了下面的工作示例。我认为你的答案是正确的，因为它帮助我解决了问题。谢谢你的帮助。

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, 0, 3], fov: 80 }}>
    <ambientLight intensity={0.3} />
    <Suspense
     fallback={
      <mesh>
       <boxBufferGeometry args={[1, 1, 1]} />
       <meshStandardMaterial />
      </mesh>
     }
    >
     <DuckModel />
    </Suspense>
   </Canvas>
  </>
 );
};

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',
       sourceMap: true
      }
     }
    ]
   },
   {
    test: /\.(bin)$/,
    use: [
     {
      loader: 'file-loader',
      options: {
       outputPath: 'assets/models',
       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, 'src', 'index.html')
  }),
  new webpack.ProvidePlugin({
   TweenMax: 'gsap'
  }),
  new CopyWebpackPlugin({
   patterns: [{ from: 'src/assets' }]
  })
 ]
};