patrickz
Before you start
A coding agent, browser and a GLB model you have permission to use.
Why this lesson exists
The original is a public 3D character debug lab: one static page that loads a character, lists its animation clips and shows loading errors. Keeping game systems out of the viewer means anyone can reproduce a visual bug from a link.
Do the exercise
Set your boundary
Load one model. Add a camera reset, grid, animation selection and visible error text. Keep game systems out of the viewer.
Load one character model
Create a page that loads one character model you have permission to use.
List every animation clip
Add a dropdown for every animation clip.
Add camera reset and a grid
Add camera orbit, reset and a grid, so scale can be judged.
Show what is loaded
Display model name, animation name, scale and loading errors on the page.
Build and share the static page
Build the page as static files and publish one copy, for example with GitHub Pages, so someone else can open the same link.
Next sessions, not today
- Lighting controls Add lighting controls once the camera, grid and error text work.
- Automatic deploys Deploy it through GitHub Pages on each approved update.
A prompt to adapt
Replace the bracketed parts with your own details.
Help me build a static 3D character test page with Three.js in a new practice folder. First version only: load one GLB model, with animation selection, a camera reset, a grid and visible error text. Keep game systems out of the viewer, and leave lighting controls and automatic deploys for later. List the setup commands before changing any files. Then work in five checkpoints and, after each, tell me how to check it: 1. A page that loads one character model. 2. A dropdown for every animation clip. 3. Camera orbit, reset and a grid for judging scale. 4. Model name, animation name, scale and loading errors shown on the page, including for a missing model URL. 5. A static build published once, for example to GitHub Pages, so someone else can open the same link. My model: [GLB file you have permission to use]. The bug I want to reproduce: [one sentence].
Once it runs, paste your code and ask:
Using this viewer, 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, and mark which items the viewer can already show.
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.
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.