Projects using three.js in IslamabadProjects using three.js in Islamabad
Projects
People
Cover image for Innovative 3D Jewelry Configurator Showcasing Premium Designs
Interactive 3D Jewelry Configurator & Product Showcase Full Description Developed a premium 3D Jewelry Configurator that enables customers to explore and personalize jewelry through an immersive browser-based experience. The platform features real-time 3D visualization, interactive product rotation, metal customization, realistic gemstone rendering, smooth animations, and responsive controls. Built using modern WebGL technologies to deliver a luxury digital showroom that enhances customer engagement and online product presentation. Similar configurators are increasingly used by jewelry brands to let customers preview metals, gemstones, and designs before purchase. Role Senior Full Stack Three.js Developer Work Description Led the end-to-end development of a luxury 3D Jewelry Configurator, creating an immersive digital experience for showcasing premium jewelry collections. Built the interactive frontend using React, Three.js, React Three Fiber, TypeScript, WebGL, and GSAP, enabling photorealistic rendering, real-time material customization, smooth animations, and responsive 3D interactions. Optimized 3D assets and rendering pipelines to deliver a fast, high-quality experience across desktop and mobile while maintaining scalability for future product collections. Technologies React • Three.js • React Three Fiber • TypeScript • WebGL • GSAP • GLTF/GLB • HDR Lighting • PBR Materials • Node.js • REST APIs Key Contributions Built a luxury 3D jewelry experience Real-time metal & material customization Photorealistic gemstone rendering Smooth 360° product interaction Performance optimization for WebGL Responsive cross-device experience
0
73
Cover image for "Can I see it in
"Can I see it in blue?" shouldn't require a back-and-forth email chain. I build interactive 3D product configurators that run right in the browser. Drop in your model, and your customers can rotate, zoom, and swap colours or materials instantly—fully optimized for mobile. Performance: All textures are generated procedurally via the Canvas API instead of loading heavy images. It stays lightning-fast without sacrificing visual quality. B2B Ready: Includes a built-in PDF export. One click snapshots the user’s exact configuration and generates a clean quote sheet for internal team sharing. Deliverables: You get the full repository, Vercel deployment, and clean written docs. No endless handover calls needed. Check the service link on my profile to learn more, or shoot me a DM. https://contra.com/s/AOLAZbBQ-custom-3-d-interactive-product-configurator
0
23
Cover image for I engineered a high-performance, browser-based
I engineered a high-performance, browser-based 3D experience that allows users to manipulate a system of 15,000+ particles using real-time hand gestures. This project explores the intersection of Web Graphics and Computer Vision, turning a standard webcam into a spatial controller. The Technical Challenge The main hurdle was achieving a "haptic" feel ensuring the particles reacted instantly and smoothly to physical movements without lag. This required mapping 2D webcam coordinates into a 3D coordinate system and calculating volumetric transformations on the fly. The Solution & Workflow High-Performance Rendering: Used Three.js and WebGL with additive blending and custom color mapping to render a massive particle count at a consistent 60 FPS. Real-time Inference: Integrated Google MediaPipe to track 21 3D landmarks per hand directly in the client-side browser, eliminating the need for a backend. Dynamic Math: Implemented custom lerping (Linear Interpolation) and gesture thresholds to create fluid movements, such as a "fist-clench" collapsing the particles into a sphere and an "open-palm" expanding them into a galaxy. The Results Created a fully immersive, zero-latency interface that demonstrates the power of the modern web for interactive AI applications.
0
10
Cover image for Interactive 3D Car Configurator &
Interactive 3D Car Configurator & Vehicle Customization Platform Description Led the end-to-end development of a browser-based 3D Car Configurator & Vehicle Visualization Platform, delivering a premium digital showroom experience for automotive businesses. Architected and developed the interactive frontend using React, Three.js, React Three Fiber, TypeScript, WebGL, and GSAP, enabling real-time vehicle customization with dynamic colors, materials, wheels, accessories, and 360° camera controls. Designed scalable backend services with Node.js, Express, and REST APIs to manage vehicle data, product variants, configurations, and business logic. Optimized 3D models using GLTF/GLB, HDR environments, PBR materials, texture compression, and lazy loading to achieve smooth performance across desktop and mobile devices. Technologies React • Three.js • React Three Fiber • TypeScript • WebGL • GSAP • Node.js • Express.js • REST APIs • GLTF/GLB • PBR Materials • HDRI • Git Key Contributions Architected the complete 3D configurator Built immersive real-time vehicle customization Developed scalable backend APIs Optimized rendering performance and asset loading Implemented responsive cross-device experience Delivered a production-ready automotive visualization platform Features Real-Time Vehicle Customization Interactive 3D Visualization Color & Material Selection Wheel & Rim Configurations Accessory & Variant Management 360° Camera Controls Performance Optimization Responsive Web Experience Backend API Integration Scalable Architecture
0
99
Cover image for Interactive 360° Virtual Tour &
Interactive 360° Virtual Tour & Property Visualization Platform Developed a high-performance 360° Virtual Tour & Property Visualization Platform that enables users to explore residential, commercial, and hospitality spaces through immersive browser-based experiences. Users can freely navigate every room, inspect spaces from any angle, interact with hotspots, and access detailed information in real time. Built with modern web technologies, the platform delivers smooth navigation, responsive performance, and an engaging virtual walkthrough experience across desktop and mobile devices. Features 360° Interactive Virtual Tours Room-to-Room Navigation Interactive Hotspots Points of Interest (POIs) Floor Navigation Image & Video Integration Information Popups Guided Tour Mode Full-Screen Experience Mobile & Desktop Responsive Browser-Based Access High-Performance Rendering Fast Loading & Optimized Performance Easy Content Management
0
182
Cover image for In this project, I made
In this project, I made "Straw Struck," a high-performance interactive 3D configurator built for B2B ordering. This web app allows users to customize every aspect of a product in real-time—from dimensions and colors to material wrappers—and instantly generates a downloadable PDF quote with a screenshot of their custom design. 🚀 Key Features: - Real-Time 3D Visualization: Built with React Three Fiber, featuring dynamic scaling and geometry swapping (Straight vs. Flexible). - Procedural Textures: Zero image assets loaded! All textures (Paper, Film, Concrete) are generated programmatically via the Canvas API for infinite resolution and fast loading. - Smart Validation: Enforces manufacturing constraints (MOQ, Length limits) automatically. - Instant PDF Quotes: Uses jsPDF to capture the 3D scene and generate a professional order summary on the fly. - Responsive Design: Fully optimized split-screen UI using Tailwind CSS that works seamlessly on mobile and desktop. 🛠️ Tech Stack: - Framework: React 18 & Vite - 3D Engine: React Three Fiber (Three.js / Drei) - Styling: Tailwind CSS & Framer Motion - State Management: Zustand / React Hooks - PDF Generation: jsPDF
0
56
Cover image for 3D IFC Viewer & Editor
3D IFC Viewer & Editor with AI-Powered Error Detection Platform Developed an advanced 3D IFC Viewer and Editor designed for the Architecture, Engineering, and Construction (AEC) industry, enabling professionals to visualize, inspect, edit, and validate complex Building Information Modeling (BIM) data directly within the browser. The platform combines high-performance 3D rendering with AI-powered model analysis to improve project accuracy, collaboration, and workflow efficiency. Built using modern web technologies including Three.js, WebGL, IFC.js, React.js, and Node.js, the solution provides seamless navigation of large IFC models, real-time property inspection, model editing capabilities, clash detection workflows, and intelligent error identification. Integrated AI algorithms automatically analyze BIM data to detect design inconsistencies, missing elements, geometry conflicts, and compliance issues, helping teams reduce costly mistakes before construction begins. The platform supports collaborative digital construction workflows through cloud-based model management, interactive 3D visualization, real-time updates, and scalable backend services. By combining BIM technology, AI-driven validation, and browser-based 3D interaction, the system delivers a powerful solution for architects, engineers, contractors, and project managers. Core Features: 3D IFC Model Visualization Browser-Based BIM Viewer IFC File Editing & ManagementAI-Powered Error Detection BIM Model Validation Clash Detection & Issue Identification Real-Time Property Inspection Interactive 3D Navigation
0
276
Cover image for 3D Virtual Tour & Visualization
3D Virtual Tour & Visualization Platform for Architecture Project Overview: A next-generation 3D visualization platform built for an architecture client, designed to solve the industry problem of imagination gaps, costly mistakes, and delays. The platform allows users to design, visualize, and present home and building layouts in stunning real-time 3D empowering architects and their clients to plan and build with confidence. My Role: Full Stack Developer Built the complete platform including 3D engine integration, interactive UI, and backend. Key Features Built: Real-time 3D visualization see every change instantly Interactive floor plans with 2D to 3D switching 360° walkthroughs & immersive virtual tours Interior & exterior design customization (layouts, materials, furniture & finishes) Share & collaborate features for team workflows Tech Stack: Three.js & WebGL (3D rendering) React.js (Frontend) Node.js / Express.js (Backend) Outcome: Delivered for an individual architecture professional. The client was highly satisfied with the result and the platform is performing brilliantly.
0
265