> Canonical URL: https://codingcat.dev/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-2-gltfloader

# Lesson 2: Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes | Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers | CodingCat.dev Course

[🧶 Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers](/course/threejs-webgpu-3d-mascots)Section 1.2 · Lesson 2 of 5[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs)[![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU](/topic/webgpu)[![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video](/topic/video)[← Prev Lesson](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-1-lazy-webgl)[Next Lesson →](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-3-aces-filmic)

# Lesson 2: Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes

![Lesson 2: Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes Architecture Diagram](https://cdn.sanity.io/images/hfh83o0w/production/4d582b23bb4cc05d1a0a5a7d8df85ab0b25fae7c-1376x768.png?w=1376&q=82&fit=max&auto=format)

## 1. The 15-Second Hook

Welcome to Lesson 2 of Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers on CodingCat.dev. Today we break down Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes and see how it powers our deterministic 3D AJ and code-rendered video pipeline.

## 2. Architecture Mental Model (Visual Diagram)

Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, GLTFLoader and Node Map enforce a deterministic frame contract.

## 3. Show Me the Code (src/components/Aj3dMascotViewer.astro)

Copied! 🐾📄 src/components/Aj3dMascotViewer.astrotypescript

```
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.toneMapping = THREE.ACESFilmicToneMapping;
const purpleRim = new THREE.SpotLight(0x7c3aed, 6.5, 12, Math.PI / 3, 0.5);
purpleRim.position.set(-3.2, 2.8, -1.8);
scene.add(purpleRim);
```

In src/components/Aj3dMascotViewer.astro, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized.

## 4. Production Trade-Off Matrix

DimensionDeterministic 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionDeterminismPure function of time t via window.seek(t)Non-deterministic timers & Math.random()Any frame renders identically on demand.Visual PolishContact-sheet critique loop + W3C tokensFirst unreviewed render ships as finalEliminates overlapping text and dead beats.3D & Mascot RigUnified 57-path 2D SVG + Three.js 3D GLB AJStatic flat raster imagesInteractive orbital 3D + 120 BPM lip-sync.Production Cost$0 open-source local RTX 5090 pipeline$1,200+ agency fee or per-minute SaaS cliffScales across 95+ lessons with zero marginal cost.

When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost.

## 5. Verdict & AJ Pro-Tip

> AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your GLTFLoader setup has zero non-deterministic state leaks.

Adopt GLTFLoader inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue!

✏️ Visual Architecture Diagram

## how this course connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Three.js & WebGPU in Production: Interactive 3D …✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers: Lesson 2: Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes: start with Core Architecture & Deterministic Implementation, implement Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers, and ship to production.AAA Contrast Verified

## related deep dives.

[View All→](/blog)[![Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](https://cdn.sanity.io/images/hfh83o0w/production/b144a4ce077ac03d081ed66396a7cffebbcdb24f-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/chrome-devtools-mcp-visual-agent-loops)November 4, 2026[![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native](/topic/react-native)[![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js](/topic/threejs)

### [Chrome DevTools MCP: Self-Healing Agent Visual & Video Inspection](/course/chrome-devtools-mcp-visual-agent-loops)

Give your AI agent eyes inside the browser. Use Chrome DevTools MCP so your agent inspects its own rendered video frames, WebGL canvases, and DOM layouts before exporting.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Flagship 5: Automated Media Engineering & Reference Extraction with FFmpeg & yt-dlp](https://cdn.sanity.io/images/hfh83o0w/production/c812b7d1a15241fc5c1e92181f8cede796659355-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/automated-media-engineering-ffmpeg-yt-dlp-contact-sheets)November 4, 2026[![](/logos/tags/oss-symbol-light.svg)![](/logos/tags/oss-symbol-dark.svg)Open Source](/topic/oss)[![](/logos/tags/ffmpeg-symbol-light.svg)![](/logos/tags/ffmpeg-symbol-dark.svg)FFmpeg](/topic/ffmpeg)

### [Flagship 5: Automated Media Engineering & Reference Extraction with FFmpeg & yt-dlp](/course/automated-media-engineering-ffmpeg-yt-dlp-contact-sheets)

Build the backbone of an autonomous video studio. Use yt-dlp and FFmpeg to extract reference visual grammars, normalize audio to -14 LUFS, generate 6-across critique contact sheets, and master 1080p60 MP4s.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/threejs-webgpu-3d-mascots)

## Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers

2/51

### Core Architecture & Deterministic Implementation

- [1.1Lesson 1: Setting Up Three.js with Zero LCP Penalty via Lazy Hydration](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-1-lazy-webgl)
- [1.2Lesson 2: Loading `aj-3d-mascot.glb` & Traversing Named Bone Nodes▶](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-2-gltfloader)
- [1.3Lesson 3: 3-Point Studio Lighting: Key Light + Royal Purple & Electric Lime Rims](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-3-aces-filmic)
- [1.4Lesson 4: Viewport-Gated Pointer Tracking for 3D Pupils & Head Tilt](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-4-pupil-track)
- [1.5Lesson 5: Binding Three.js Bone Rotations to `window.seek(t)` & Audio Amplitude](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-5-cc-seek)

@CodingCatDev on YouTube62.5K / 100K

Subscribe for new course lessons and architecture deep dives every week.

[Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)