Before you start
A coding agent, browser and a GLB model you have permission to use.
Why this lesson exists
This lab adapts the “Ship a Public 3D Character Debug Lab” project write-up into a practice build. The time is an estimated first session, not a promise to finish a production system. Use the public repository as a reference when available; the exercise can be built with original sample content.
Do the exercise
Define the practice version
Load one model. Add a camera reset, grid, animation selection and visible error text. Keep game systems out of the viewer.
Build step 1
Create a page that loads one character model.
Build step 2
Add a dropdown for every animation clip.
Build step 3
Add camera orbit, reset, grid, and lighting controls.
Build step 4
Display model name, animation name, scale, and loading errors.
Build step 5
Build the page as static files.
Build step 6
deploy it through GitHub Pages on each approved update.
Run the experiment
Open a working model and then a deliberately missing model URL. Switch animations twice, reset the camera and inspect scale against the grid.
A prompt to adapt
Replace the bracketed parts with your own practice details.
Work in a disposable practice project. Explain any setup requirements before changing files. Build one small step at a time and show how I can check it. Create a test checklist for a GLB character before it enters a Three.js game. Cover skeleton, skin weights, textures, scale, origin, animation clips, loop behavior, transitions, lighting, mobile performance, and error reporting. Design a minimal character-debug page. It must load a GLB URL, list animation clips, switch clips safely, reset the camera, and display actionable errors. Keep it deployable as static files. My first-version boundary: Load one model. Add a camera reset, grid, animation selection and visible error text. Keep game systems out of the viewer.
Run this experiment
Open a working model and then a deliberately missing model URL. Switch animations twice, reset the camera and inspect scale against the grid.
Check your result
Use evidence from your output. A confident explanation from the AI is not enough.
- The model and selected animation are identified on screen.
- Missing assets produce an understandable error.
- The shared page reproduces the same visual issue.
If it isn’t working
If the character disappears, inspect scale, camera and loading errors before replacing the renderer. A public build artifact is not necessarily the original source project.
Optional. Progress stays in this browser.
Where this came from
Public project repository ↗. The practice lesson is an adaptation, not a verbatim transcript. About the sources.
Prepared September 2026. Tools and interfaces change; use current official setup instructions. Session lengths are estimates.