Make a shareable 3D character test page
https://patrickz.ai/learn/character-debug-lab/

OUTCOME
Build a focused viewer that makes a visual bug reproducible.

STACK
Three.js · GLB · GitHub Pages

TRY PATRICK'S VERSION
Open the Patrick + Su debug room: https://perfectz.github.io/ThaiGraphicNovel-character-debug/

YOU NEED
A coding agent, browser and a GLB model you have permission to use.

1. Set your boundary
Load one model. Add a camera reset, grid, animation selection and visible error text. Keep game systems out of the viewer.

2. Load one character model
Create a page that loads one character model you have permission to use.

3. List every animation clip
Add a dropdown for every animation clip.

4. Add camera reset and a grid
Add camera orbit, reset and a grid, so scale can be judged.

5. Show what is loaded
Display model name, animation name, scale and loading errors on the page.

6. 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.

LATER (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.

PROMPT
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].

FOLLOW-UP PROMPT
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.

EXAMPLE / 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
[ ] 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 FAILS
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.

MY RESULT / NEXT CHANGE