React 3D Glasses Try-On Plugin
Budget: $30 – $250 USD
I need a lightweight, browser-based virtual try-on plugin that drops straight into my website like
https://demo.neox-lab.com
Visitors should be able to grant camera access, have their face detected in real-time, and see any of our frames—supplied as GLTF/GLB models—rendered accurately on their face. Smooth performance on both desktop and mobile is a must, with natural motion tracking that keeps the glasses locked to key facial points as users turn or tilt their head.
Key points
• Assets: GLTF/GLB models only; the script should load multiple variants on demand
• Tech stack you choose can include Three.js, WebGL, WebXR, TensorFlow.js or similar face-tracking libraries, provided everything stays client-side and privacy-friendly
• Styling hooks: expose simple props or CSS classes so I can match the look and feel of the rest of the site
• Bundle size matters—please tree-shake and lazy-load where possible
Deliverables
1. Reusable components that mounts the camera feed, handles face tracking, and overlays selected GLTF/GLB model
2. Configuration file or props interface to swap frame models, adjust scale offsets, and fine-tune positioning
3. Clear setup instructions plus a short demo page showing the component in action
4. Commented source code pushed to my private Git repo
Acceptance criteria
• Initialisation time under 2 seconds on a mid-range mobile device
• Tracking remains stable within ±5° head rotation without visible drift
• Component passes basic accessibility checks (keyboard focus management, ARIA labels for controls)
• All code lint-clean and builds in a standard Create React App or Vite environment
Let me know your proposed approach, any relevant past work, and an estimated timeline so we can get this feature live quickly.
https://demo.neox-lab.com
Visitors should be able to grant camera access, have their face detected in real-time, and see any of our frames—supplied as GLTF/GLB models—rendered accurately on their face. Smooth performance on both desktop and mobile is a must, with natural motion tracking that keeps the glasses locked to key facial points as users turn or tilt their head.
Key points
• Assets: GLTF/GLB models only; the script should load multiple variants on demand
• Tech stack you choose can include Three.js, WebGL, WebXR, TensorFlow.js or similar face-tracking libraries, provided everything stays client-side and privacy-friendly
• Styling hooks: expose simple props or CSS classes so I can match the look and feel of the rest of the site
• Bundle size matters—please tree-shake and lazy-load where possible
Deliverables
1. Reusable components that mounts the camera feed, handles face tracking, and overlays selected GLTF/GLB model
2. Configuration file or props interface to swap frame models, adjust scale offsets, and fine-tune positioning
3. Clear setup instructions plus a short demo page showing the component in action
4. Commented source code pushed to my private Git repo
Acceptance criteria
• Initialisation time under 2 seconds on a mid-range mobile device
• Tracking remains stable within ±5° head rotation without visible drift
• Component passes basic accessibility checks (keyboard focus management, ARIA labels for controls)
• All code lint-clean and builds in a standard Create React App or Vite environment
Let me know your proposed approach, any relevant past work, and an estimated timeline so we can get this feature live quickly.
Related categories:
JavaScript
CSS
HTML5
OpenGL
Augmented Reality
Three.js
Virtual Reality
Accessibility