The demo

What's in here

• HTML toolbar (S7-02): logo, action buttons.
• Worldspace labels (S7-03): part names pop out of features.
• Touch gestures (S7-05): orbit with drag, pinch zoom. Works on desktop + mobile.
• A11y (S7-07): role="application", aria-label, keyboard nav (arrows + Tab).
• Text (S7-08): crisp via canvas-texture and DOM overlay.
• Transitions (S7-09): loading spinner → fade-out on ready.
• Color swatches: change material color, announced via aria-live.

Code structure

class ProductViewer {
  constructor(root) {
    this.root = root;
    this.initThree();        // scene, camera, renderer
    this.loadAssets();       // with LoadingManager
    this.initGestures();     // pointer events
    this.initKeyboard();     // arrow keys, Tab hotspots
    this.initControls();     // swatch buttons, action handlers
    this.startLoop();
  }
  announce(msg) { this.announcer.textContent = msg; }
  setColor(hex) { this.mesh.material.color.set(hex); this.announce('Color: ' + hex); }
}

Season 7 recap

3D UI mental model → HUDs → worldspace labels → canvas-texture → touch → VR → accessibility → text → transitions → production viewer.

Ten articles covering every UI layer you'll touch. Mix and match for your app.

Season 8 next

Production Architecture. State management. Entity-component systems. Authoring tools. Debug overlays. Game loops. Testing 3D apps. The underlying engineering that turns a demo into a product.