useGLTF, Suspense and a fallback
The bike is the 27 KB Draco file from Phase 10. The wireframe box is the fallback and is removed when the bike is ready.
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.
fallback on screen
fallback removed
bike ready, parts: down-tube, top-tube, seat-tube, chain-stays, seat-stays, fork, front-wheel, rear-wheel, handlebar, crankset