AR3DE-COMMERCE
AR 3D Glasses Try-On
Private Client · 2025 · Three.js · MediaPipe · Next.js
An immersive eyewear customisation and AR try-on experience. Customers configure glasses colour for the frame, arms, and hinges in real time on a 3D model — then try them on instantly using their device camera.
View Live Demo →
3Customisable PartsFrame · Arms · Hinges
60fpsAR TrackingReal-time face mesh
WebGL3D RenderingBrowser-native, no app
100%Privacy-FirstOn-device processing
TWO EXPERIENCES. ONE PIPELINE.
Configure, then try on instantly
3D Configurator
Interactive 3D model rendered with Three.js / React Three Fiber. Customers swap colours for the frame, arms, and hinges independently and see updates in real time, with smooth orbit controls for inspecting every angle.
AR Try-On
The customised glasses are projected onto the customer's face with accurate scale, rotation, and depth — all running on-device in the browser, no app install required.
TECHNOLOGIES
Three.jsReact Three FiberMediaPipe Face MeshWebRTCNext.jsTypeScriptGLSL Shaders
KEY FEATURES
Built for online eyewear retail
Per-part colour customisation (frame, arms, hinges)
High-fidelity 3D model with realistic materials
Real-time orbit, zoom, and inspect controls
Mobile and desktop responsive
AR try-on via device camera
All processing happens on-device — no images uploaded
Shareable configurations via URL