3D Mirror

Track the user's head movements with MediaPipe FaceLandmarker and mirror them onto a textured 3D shell rendered with Three.js.

Note

This web experience is implemented with MediaPipe's FaceMesh and ThreeJS. It has been adapted from its original version; It no longer uses [p5js]/(https://beta.p5js.org/) ml5js.

Stack

• Vite for local development and production builds
• Three.js for scene setup, model loading, and rendering
• MediaPipe FaceLandmarker for direct webcam landmark tracking

Development

Install dependencies and start the local dev server:

npm install
npm run dev

Create a production build:

npm run build

Preview the production build locally:

npm run preview

Runtime Notes

• The app asks for webcam access on load.
• MediaPipe model and wasm assets are fetched from their CDN at runtime.
• The shell is loaded from shell.glb.

Deployment

GitHub Pages builds the project with Vite and publishes the generated dist output. The Vite base path is configured for deployment under /3D-mirror/.

Overview

• Inspired by a 2020 project by Rowan Abraham and Arash Nouri
• Maps live head translation, rotation, and scale onto a 3D shell
• Keeps the original landmark-driven motion logic while removing the p5.js and ml5.js runtime dependencies

An Invitation

I have found the "mirror" logic of this sketch to be provocative and surprising. It has led me to be more curious about my relationship with the world around me. I invite you to adapt the code for your own explorations.