explorer-viewer-builder

name: explorer-viewer-builderdescription: "Use when asked to build a 3D viewer for a GLB model, make an interactive explorer with clickable labelled parts, add an exploded view or quiz to a 3D model, or turn a parts list into a web page. Produces a single-file Three.js viewer that loads GLB models, with orbit controls, clickable labelled parts, an exploded view toggle and a quiz mode, built from the tested template in references/viewer-template.html. Third step of explorer-pipeline."version: 1.0.0

Explorer Viewer Builder

The last step of a 3D explorer is a page anyone can open: no install, no build step, works on a phone. This skill produces a single HTML file from the tested template in references/viewer-template.html: Three.js from a CDN, a GLB loader, orbit controls, clickable parts with sourced labels, an exploded view and a quiz mode, filled in with the parts list and palette from the earlier steps.

Required Inputs

Ask for these if not provided:

• The GLB file (path or URL), or confirmation to start with the template's demo assembly
• The parts list: mesh name, label, description and source for each part (from model-prompt-pack)
• Palette and layout values (from explorer-interface-brief), or accept the template defaults
• Title and the illustrative statement
• Hosting: GitHub Pages, a static host, or opening the file locally (GLB files need a local server; browsers block file:// loading)

Working from a brief

Given the model file and the list of parts, write the complete single-file viewer anyway. Assume the GLB's node names match the parts listed, say so at the top, and wire the labels, the exploded view and the quiz to those names so a mismatch is a one-line fix.

Output Structure

1. The viewer file

A complete index.html based on the template, with:

• CONFIG filled in: title, model, and parts (one entry per mesh name, each with label, description and source)
• Palette applied to the CSS custom properties, with a dark-mode block
• The illustrative statement in the panel footer
• unchanged core behaviour from the template: orbit controls with damping; click (or tap) to select, ignoring drags; selection through the parts list for keyboard users; exploded view that moves each part away from the model's centre in its parent's space; quiz mode that asks for a random part, scores answers and highlights the right part after a miss; reset view; a demo fallback and a console warning if the model fails to load; a list of the model's mesh names when none match the parts list

2. Mesh-name check

A table matching the parts list against the mesh names the viewer reports (open the page with the model and read the panel, or the console): | Mesh name in parts list | Found in GLB? | Action |

3. Run and publish instructions

• Local: npx serve . (or python3 -m http.server) in the folder, then open the printed address
• GitHub Pages: commit index.html and the .glb, enable Pages for the branch, and note the file-size limits
• Performance: keep the GLB under 15 MB; compress textures; test on a mid-range phone

4. Test checklist

Binary checks to run in a browser: the model appears; each part in the list highlights and shows its label and source; dragging rotates without selecting; exploded view separates every labelled part and reverses; quiz mode scores a right and a wrong answer; the page has no horizontal scroll at 390 px wide; dark mode is readable; the console shows no errors.

Quality Checks

• The output is a single HTML file with no build step
• Every entry in CONFIG.parts has a label, a description and a source
• Every parts-list mesh name is checked against the GLB, with mismatches listed
• Parts can be selected from the keyboard through the parts list
• Exploded view and quiz mode both work and can be turned off
• The illustrative statement is visible on the page
• The page works at 390 px width and in dark mode with no console errors
• Three.js is loaded from a pinned version, not "latest"

Anti-Patterns

• Opening the HTML by double-clicking with a local GLB. Browsers block it; use a local server.
• Labels without sources. The viewer shows the source line for a reason; never leave it blank.
• Selecting on pointer down. Every rotation then selects a part; select on a click without movement.
• Unpinned CDN versions. A Three.js update can break the page overnight.

Example Trigger Phrases

• "Build a viewer for heart.glb with clickable labelled parts and a quiz."
• "Turn this parts list into a single-file Three.js explorer."
• "Add an exploded view and quiz mode to my 3D model page."
• "Make a GLB viewer that works on phones, no build step."