A model URL that 404s
React also prints its own error report. Only the lines starting with a label are ours.
useGLTF suspends the component until the model is ready. <Suspense fallback> shows something meanwhile, preload starts early, and an error boundary turns a failed load (a 404) into a message instead of a blank canvas.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a Loader component that shows the percent loaded as HTML, using useProgress from drei.
Write the wrapper that shows a grey box while /data/3d/models/lumen-bike-draco.glb loads and a red box if it fails.
Explain it without notes
Why does the whole scene go blank when one model is slow, and how do you fix it?
A Try again button resets the error boundary but the model fails at once. What did you forget?
Console
Nothing logged yet.Expected console output
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.
Uncaught Error: Could not load /data/3d/models/lumen-bike-dracoo.glb: fetch for "https://hectal.test/data/3d/models/lumen-bike-dracoo.glb" responded with 404: Not Found
a wrong file name: FAILED, responded with 404: Not Found
the right file: loaded, first child is "bike"