Lesson 4: Viewport-Gated Pointer Tracking for 3D Pupils & Head Tilt

1. The 15-Second Hook

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

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, Pupil Track and 60fps RAF enforce a deterministic frame contract.

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

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

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 Pupil Track setup has zero non-deterministic state leaks.

Adopt Pupil Track 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!