Breaking

Browser-Based 3D Viewer Reacts to Head Movement, Now Public

June 29, 2026 at 03:50 EDT

Media Generation
Open Source

Ian Curtis has released "off-axis-sneaker," a browser-based 3D viewer that combines webcam face tracking with 3D rendering so that the on-screen object changes appearance as the viewer moves their head. The source code is public on GitHub, and a live demo is also available.

Open Source · off-axis-sneaker

Your Webcam Turns the Screen Into a Window Into 3D

A browser-only viewer pairs Google's MediaPipe with Three.js to track your head and shift a 3D-scanned sneaker to match your viewpoint — an immersive head-coupled perspective effect with no extra sensors or hardware.

468

facial landmarks tracked in real time

30–60

target FPS with WebGL GPU acceleration

391

GitHub stars at time of posting

dedicated sensors required

How the effect works

MediaPipe and Three.js run in separate render loops, with an EMA filter smoothing out jitter.

1 · Webcam

MediaPipe Face Mesh detects head position

→

2 · Estimate

Eye distance = depth; eye midpoint = X/Y

→

3 · Smooth

EMA filter (coeff. 0.3) removes jitter

→

4 · Render

Three.js off-axis camera shifts the 3D model

Strengths

Clean, highly immersive parallax effect
Physical cm-based calibration matches real screen size
Browser-only — a lightweight alternative to AR/VR

Open challenges

Jitter and landmark drift during head rotation
Accuracy drops with poor lighting or extreme angles
Full 6DOF tracking and solvePnP still unimplemented

The Stack

Built entirely in the browser on React + TypeScript + Vite.

React TypeScript Three.js MediaPipe Tailwind CSS Vite GLB models

Continue reading

The rest of this article is for AI News Blitz readers. Choose an option below to keep reading.