为什么我不能使用三个JS和React在浏览器中显示我的.glb文件？

问：

https://www.youtube.com/watch?v=ZqEa8fTxypQ&t=7778s这是我正在学习的视频，我的问题出现在第 55 分钟 This is my code Shirt.jsx 中似乎有些不对劲Shirt.jsx

import React from 'react'
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import { useFrame } from '@react-three/fiber';
import { Decal, useGLTF, useTexture } from '@react-three/drei';

import state from '../store';

const Shirt = () => {
  const snap = useSnapshot(state);
  const { nodes, materials } = useGLTF('./shirt_baked.glb');

  const logoTexture = useTexture(snap.logoDecal);
  const fullTexture = useTexture(snap.fullDecal);

  return (
    <group >
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        material-roughness={1}
        dispose={null}
      >
      </mesh>
    </group>
  )
}

export default Shirt

我在index.jsx中的代码：

import React from 'react'
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import { useFrame } from '@react-three/fiber';
import { Decal, useGLTF, useTexture } from '@react-three/drei';

import state from '../store';

const Shirt = () => {
  const snap = useSnapshot(state);
  const { nodes, materials } = useGLTF('./shirt_baked.glb');

  const logoTexture = useTexture(snap.logoDecal);
  const fullTexture = useTexture(snap.fullDecal);

  return (
    <group >
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        material-roughness={1}
        dispose={null}
      >
      </mesh>
    </group>
  )
}

export default Shirt[![enter image description here][1]][1]

我个人认为问题出在 Tag 中的某个地方，但我该如何解决它？ （我也在控制台.log和我的文件中放了一张错误的图片）

我的错误+ 它们在 Chrome Inspect 元素的控制台中，我看不到其他任何东西：

threeks.png:1     GET http://127.0.0.1:5173/threeks.png 404 (Not Found)
Image (async)
load @ three.module.js:42229
load @ three.module.js:42415
(anonymous) @ index-673ef987.esm.js:1640
(anonymous) @ index-673ef987.esm.js:1640
(anonymous) @ index-673ef987.esm.js:1640
query @ index.js:51
suspend @ index.js:68
useLoader @ index-673ef987.esm.js:1656
useTexture @ useTexture.js:8
Shirt @ shirt.jsx:13
renderWithHooks @ react-reconciler.development.js:7363
mountIndeterminateComponent @ react-reconciler.development.js:12327
beginWork @ react-reconciler.development.js:13831
beginWork$1 @ react-reconciler.development.js:19513
performUnitOfWork @ react-reconciler.development.js:18686
workLoopConcurrent @ react-reconciler.development.js:18672
renderRootConcurrent @ react-reconciler.development.js:18634
performConcurrentWorkOnRoot @ react-reconciler.development.js:17836
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2index-673ef987.esm.js:1643 Uncaught Error: Could not load ./threeks.png: undefined
    at index-673ef987.esm.js:1643:36
    at HTMLImageElement.onImageError (three.module.js:42204:19)
(anonymous) @ index-673ef987.esm.js:1643
onImageError @ three.module.js:42204
console.js:213 The above error occurred in the <Shirt> component:

    at Shirt (http://127.0.0.1:5173/src/canvas/shirt.jsx:27:16)
    at group
    at group
    at group
    at Center2 (http://127.0.0.1:5173/node_modules/.vite/deps/@react-three_drei.js?v=127fc0a0:42964:3)
    at Suspense
    at ErrorBoundary (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K24KZ7K6.js?v=127fc0a0:16134:5)
    at FiberProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K24KZ7K6.js?v=127fc0a0:17878:21)
    at Provider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K24KZ7K6.js?v=127fc0a0:17480:3)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
overrideMethod @ console.js:213
logCapturedError @ react-reconciler.development.js:9747
callback @ react-reconciler.development.js:9815
callCallback @ react-reconciler.development.js:4279
commitUpdateQueue @ react-reconciler.development.js:4300
commitLayoutEffectOnFiber @ react-reconciler.development.js:14877
commitLayoutMountEffects_complete @ react-reconciler.development.js:16290
commitLayoutEffects_begin @ react-reconciler.development.js:16276
commitLayoutEffects @ react-reconciler.development.js:16214
commitRootImpl @ react-reconciler.development.js:18945
commitRoot @ react-reconciler.development.js:18811
finishConcurrentRender @ react-reconciler.development.js:17990
performConcurrentWorkOnRoot @ react-reconciler.development.js:17907
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2index-673ef987.esm.js:1643 Uncaught Error: Could not load ./threeks.png: undefined
    at index-673ef987.esm.js:1643:36
    at HTMLImageElement.onImageError (three.module.js:42204:19)
(anonymous) @ index-673ef987.esm.js:1643
onImageError @ three.module.js:42204
console.js:213 The above error occurred in the <ForwardRef(Canvas)> component:

    at Canvas (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K24KZ7K6.js?v=127fc0a0:18022:3)
    at FiberProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-K24KZ7K6.js?v=127fc0a0:17878:21)
    at CanvasWrapper
    at CanvasModel
    at main
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ console.js:213
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:26923 Uncaught Error: Could not load ./threeks.png: undefined
    at index-673ef987.esm.js:1643:36
    at HTMLImageElement.onImageError (three.module.js:42204:19)
(anonymous) @ index-673ef987.esm.js:1643
onImageError @ three.module.js:42204
three.module.js:28560 THREE.WebGLRenderer: Context Lost.