Royal Fones — Luxury Phone Configurator
Real-time 3D bespoke phone design studio with per-component PBR materials, live pricing, and WhatsApp order flow
Overview
Royal Fones is a luxury e-commerce experience for a brand that hand-finishes iPhones in 24KT gold, platinum, and exotic materials. The centerpiece is an interactive 3D Design Studio built with React Three Fiber: a real iPhone 3D mesh (GLB) where customers click individual components — body, frame, camera, lens rings, logo — and recolor them from 16 PBR finishes (metalness, roughness, clearcoat, iridescence). Diamond pavé add-ons are procedurally positioned from bounding boxes.
Price recalculates live across AED/SAR/PKR as options change. The full configuration serializes to a URL-safe encoded string powering shareable deep-links, localStorage restore, and pre-filled WhatsApp order messages — a complete custom-order flow with no backend. Routes, sections, and the 3D bundle are lazy-loaded with manual chunk splitting.
Deployed as a static build to GitHub Pages with an optional Supabase + Cloudflare R2 backend for the catalog.
Key Features
Real iPhone GLB meshes with click-to-select parts — back body, frame, camera module, lens rings, logo, and buttons
16 premium PBR finishes: 24KT gold, rose gold, platinum, rhodium, obsidian, sapphire, Nero marble, carbon fibre, and more
Procedurally placed diamond pavé on the camera ring and logo, plus laser-style engraving
Live price breakdown with AED / SAR / PKR currency switching
Shareable design URLs — the entire configuration encoded in the link
One-click PNG render export and WhatsApp ordering with the complete spec
Switchable studio environments: Studio, Gold Showroom, Sunset, Noir
The 3D studio lazy-loads as its own ~11 kB gzip chunk
Project Gallery
