GlassesTryON — Open Source 3D Glasses Virtual Try-On

⚠️ Not production-ready. This project is built for learning purposes and is under active development. APIs may change without notice and it is not recommended for use in production applications.

Overview

Real-time virtual glasses try-on using webcam, MediaPipe FaceMesh, and Three.js. Monorepo with three packages: core engine, react wrapper, and demo app.

Architecture

CameraEngine → FaceMeshRunner → FaceGeometryEstimator → PoseApplier → ThreeSceneManager
                                 ↑ CameraCalibration

All orchestrated by GlassesViewer.

Structure

Package	Path	Purpose
glasses-tryon-core	/packages/core	Engine: camera, face tracking, pose estimation, 3D scene
glasses-tryon-react	/packages/react	<GlassesTryOn> React component
glasses-tryon-demo	/packages/demo	Vite demo app for testing

Prerequisites

• Node.js >= 18
• pnpm >= 9

Installation

pnpm install

Build

# Build core + react packages
pnpm run build:all

# Or individually
pnpm run build:core
pnpm run build:react

Development

# Start Vite dev server for the demo
pnpm run dev:demo
# → opens http://localhost:5173

Usage — Vanilla JS/TS

import { GlassesViewer } from 'glasses-tryon-core';

const viewer = new GlassesViewer({
  container: document.getElementById('app')!,
  model: { url: '/models/glasses.glb' },
  render: { maxFPS: 30 },
  alignmentConfig: { glassesScaleFactor: 1.0, glassesZ: 10 },
  debug: false,
});

viewer.on('faceDetected', () => console.log('Face detected'));
viewer.on('faceLost', () => console.log('Face lost'));
viewer.on('modelLoaded', () => console.log('Model ready'));

await viewer.start();

// Cleanup
viewer.destroy();

Usage — React

import { GlassesTryOn } from 'glasses-tryon-react';

<GlassesTryOn
  model="/models/glasses.glb"
  maxFPS={30}
  onFaceDetected={() => console.log('Face detected')}
  modelConfig={{ scale: 1.0 }}
/>;

VS Code Tasks

Task	Description
Build All (default)	Build core + react
Dev Demo	Start Vite dev server
Lint / Lint Fix	Run ESLint
Format	Run Prettier

Linting & Formatting

pnpm run lint        # Check
pnpm run lint:fix    # Auto-fix
pnpm run format      # Prettier