Live demo: devamir99.github.io/3dglass_project
An interactive 3D product configurator portfolio demo built with Three.js. Visitors customize frame, lens, and bridge colors in real time directly in the browser.
3D configurator with live color customization
Landing sections — process and contact
This repository is a portfolio demo showing how a physical product can be presented as an interactive 3D experience on the web. The sample model is a generic eyewear frame used for demonstration only.
Custom builds are available for brands that want their own product catalog, branding, and configurator UI.
- Real-time color customization with GSAP transitions
- Style presets and per-part color swatches
- Draco-compressed GLTF loading with progress indicator
- Image-based lighting (RoomEnvironment + PMREM)
- Responsive layout with mobile contact bar
- Landing sections for features, use cases, and contact
- Demo enterprise tools (export, AR, analytics) with inquiry flow
- Node.js 18+
- A modern browser with WebGL support
git clone https://github.com/devamir99/3dglass_project.git
cd 3dglass_project
npm install
npm run devOpen http://localhost:5173.
npm run build
npm run preview# PowerShell
$env:GITHUB_PAGES = "true"
npm run build:pages
npm run preview- Push to
mainordev - Enable GitHub Pages → Source: GitHub Actions
- The workflow in
.github/workflows/deploy.ymlpublishesdist/
Live URL: https://devamir99.github.io/3dglass_project/
npm run buildDeploy the dist/ folder. vercel.json is included for SPA routing.
| Action | Description |
|---|---|
| Mouse drag | Rotate the 3D model |
| Scroll | Zoom in/out |
| Configurator panel | Presets, colors, view options |
| Locked tools | Demo-only — opens contact modal |
src/
├── config/ # product, contact, content, site, enterprise
├── three/ # Viewer, loaders, lighting, materials
├── ui/ # Configurator panel, landing, modal, toast
├── utils/ # storage, asset paths
├── main.js
├── index.html
└── style.css
static/
├── draco/
├── models/
├── robots.txt
├── sitemap.xml
├── favicon.svg
└── og-image.svg
- Three.js — 3D rendering, GLTF, DRACO, IBL
- GSAP — UI and material transitions
- Vite — dev server and production build
Need a configurator for your product line?
| Channel | Link |
|---|---|
| Phone | +98 920 500 7494 |
| linkedin.com/in/devamir | |
| devamir99@gmail.com | |
| Website | devamir.com |
| Telegram | @devamir99 |
LinkedIn post drafts and pitch notes: docs/content.md
MIT — see LICENSE.
Built by Amir Fallahi