AI SummaryA React + Three.js + TensorFlow.js prompt for building a real-time virtual glasses try-on web app with face landmark detection and 3D model overlay. Useful for developers building AR/WebGL applications on Copilot.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "basic-virtual-tryon-glasses — Copilot Instructions" prompt rules to my project. Repository: https://github.com/alperenuzun/basic-virtual-tryon-glasses Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Basic virtual try-on glasses web application
Project Overview
This is a React + Three.js + TensorFlow.js web application for virtual glasses try-on using real-time face tracking. It captures webcam video, detects face landmarks via MediaPipe FaceMesh, and overlays 3D glasses models aligned to the user's face.
Face Landmark Usage (in render.js)
• Points array: predictions[i].scaledMesh - 468 [x,y,z] coordinates • Key indices: #10 (forehead), #168 (nose bridge), #175 (chin), #7/#263 (temples) • Coordinates are negated for Three.js coordinate system
Data Flow
• TryOn.js - React component that initializes webcam stream and triggers rendering • render.js - Core rendering engine with two main exports: • IntializeThreejs(objName) - Sets up Three.js scene, camera, lights, and loads 3D models • IntializeEngine() - Loads TensorFlow FaceMesh model and starts prediction loop
Key Components
• Video feed → Hidden <video> element used as texture source • Face detection → @tensorflow-models/facemesh tracks 468 facial landmarks • 3D rendering → Three.js scene with glasses OBJ/MTL models and invisible face mask for occlusion • Face alignment → Uses landmarks #7, #175, #263 to form a triangle for orientation; #168, #10 for positioning
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts