Face Mocap

A 3D Face Motion Capture application built with React, Three.js, and MediaPipe.

preview.mp4

Features

• 3D Scene: Renders a GLB avatar (face-mocap.glb) in a 3D environment.
• Component Decomposition: Separates avatar parts (body, eye_left, eye_right) for individual control.
• Eye Tracking: Implements smooth, cursor-based eye tracking using MathUtils.lerp.

Tech Stack

• Runtime: Bun
• Framework: React + Vite + TypeScript
• 3D Engine: Three.js + React Three Fiber (@react-three/fiber)
• Helpers: @react-three/drei
• Computer Vision: MediaPipe Tasks Vision (Face Landmarker)

Getting Started

1. Install dependencies:

   bun install

2. Run development server:

   bun dev

3. Build for production:

   bun run build

Development Controls

• Orbit Controls: Left click to rotate, Right click to pan, Scroll to zoom.
• Eye Tracking: Move cursor to have the avatar eyes follow.