You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用Three.js+React无法加载.glb文件，控制台报threeks.png找不到错误

avatar
架构老林
2026-7-15
问题：GLB衬衫模型无法显示，控制台提示threeks.png 404错误

跟着视频学习到第55分钟时，浏览器无法加载显示.glb格式的衬衫模型，控制台抛出threeks.png文件找不到的404错误，错误溯源指向Shirt.jsx组件。个人怀疑问题出在mesh标签，但无法定位具体解决方法。

相关代码

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

控制台错误信息 

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.

解决方案

从错误栈可以看出，问题出在useTexture加载纹理时：代码中尝试加载snap.logoDecal和snap.fullDecal指向的threeks.png，但该文件不存在于项目的静态资源目录中，导致404错误，进而阻塞了GLB模型的渲染。

具体修复步骤：

  1. 检查状态管理文件：打开../store.js，查看logoDecal和fullDecal的初始值，将默认路径改为实际存在的图片（比如项目public目录下的占位图），或者暂时设为空字符串。
  2. 条件加载纹理：如果不需要默认贴花，给纹理加载添加条件判断，避免加载不存在的文件：
const logoTexture = snap.logoDecal ? useTexture(snap.logoDecal) : null;
const fullTexture = snap.fullDecal ? useTexture(snap.fullDecal) : null;
  1. 移除未使用的代码：当前组件中并未使用logoTexture和fullTexture，可以直接删掉这两行加载代码，即可解决错误，正常显示GLB模型。
  2. 确认资源路径：如果需要使用自定义贴花，确保图片文件放在项目的public文件夹下，路径与store中设置的一致。

内容的提问来源于stack exchange，提问作者Mahan Tehrani

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.15 02:34:52