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

# Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers | CodingCat.dev Course

🧶 CodingCat.dev Course5 Lessons[![](/logos/tags/astro-symbol-light.svg)![](/logos/tags/astro-symbol-dark.svg)Astro](/topic/astro)[![](/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)[▶ Watch Course Playlist on YouTube ↗](https://www.youtube.com/@codingcatdev/playlists?sub_confirmation=1)[Start Course →](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-1-lazy-webgl)

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

![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/286e1fd54787494f00dea574a3c2706105542ca1-1376x768.png?w=1376&q=82&fit=max&auto=format)[![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 Architecture Overview

Build our production `<Aj3dMascotViewer />` component in Astro and Three.js. Master GLTFLoader, studio rim lighting, clamped cursor pupil tracking, and deterministic `window.seek(t)` scrubbing.

> Primary Open-Source Repository: github.com/mrdoob/three.js

## course lessons.

1

### Core Architecture & Deterministic Implementation

- [1.1Lesson 1: Setting Up Three.js with Zero LCP Penalty via Lazy HydrationWelcome to Lesson 1 of Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers on CodingCat.dev. Today we break down Setting Up Three.js with Zero LCP Penalty via Lazy Hydration and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video📖 Written LessonStart Lesson →](/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 NodesWelcome 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.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video📖 Written LessonStart Lesson →](/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 RimsWelcome to Lesson 3 of Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers on CodingCat.dev. Today we break down 3-Point Studio Lighting: Key Light + Royal Purple & Electric Lime Rims and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video📖 Written LessonStart Lesson →](/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 TiltWelcome to Lesson 4 of Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers on CodingCat.dev. Today we break down Viewport-Gated Pointer Tracking for 3D Pupils & Head Tilt and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video📖 Written LessonStart Lesson →](/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 AmplitudeWelcome to Lesson 5 of Three.js & WebGPU in Production: Interactive 3D Mascots & Viewers on CodingCat.dev. Today we break down Binding Three.js Bone Rotations to `window.seek(t)` & Audio Amplitude and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/threejs-symbol-light.svg)![](/logos/tags/threejs-symbol-dark.svg)Three.js![](/logos/tags/webgpu-symbol-light.svg)![](/logos/tags/webgpu-symbol-dark.svg)WebGPU![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video📖 Written LessonStart Lesson →](/course/threejs-webgpu-3d-mascots/lesson/threejs-webgpu-3d-mascots-lesson-5-cc-seek)

✏️ 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: start with Core Architecture & Deterministic Implementation, implement Hands-On Implementation, and ship to production.AAA Contrast Verified

## related deep dives.

[View All&rarr;](/blog)[![Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js](https://cdn.sanity.io/images/hfh83o0w/production/723908b7c80537de52a122c1816a6b94163f466b-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/agentic-3d-web-pipelines-blender-mcp-threejs)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)

### [Flagship 2: Agentic 3D Web Pipelines with Blender, Blender MCP & Three.js](/course/agentic-3d-web-pipelines-blender-mcp-threejs)

Go behind the scenes of how we built 3D AJ the Cat on CodingCat.dev. Connect AI agents to Blender via Blender MCP, export compact glTF 2.0 (.glb) armatures, and render them in Three.js with deterministic window.seek(t) physics.

[![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)[![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)