← Back to Projects
Product Viewer
An interactive 3D product viewer built with Three.js.
Tech Stack
Three.js
3D rendering with WebGL
STL / OBJ / 3MF
Multi-format 3D file loaders
CSS2D Renderer
HTML annotation overlays in 3D space
OrbitControls
Pan, zoom, and rotate camera interaction
MediaRecorder API
360° turntable video capture (WebM/VP9)
Vercel Blob
Cloud storage for shared models
QR Code
Canvas-based QR code generation
Features
Drag & Drop Upload
Load STL, OBJ, and 3MF files directly into the viewport
Material Presets
Matte, Glossy, Metallic, Wireframe, and X-Ray rendering modes
Lighting Presets
Studio, Outdoor, Dramatic, and Soft lighting environments
3D Annotations
Click-to-place draggable markers on the model surface with editable labels
Screenshot & Recording
Export PNG screenshots and 360° turntable videos (WebM)
Presentation Mode
Fullscreen auto-cycling camera views with branding overlay
Exploded View
Adjustable slider to separate multi-part models for inspection
Editable Spec Sheet
Product name, dimensions, materials, tolerances, and feature list
Share & QR Codes
Upload models to the cloud, generate shareable links and QR codes
Interactive View Cube
Draggable 3D cube for quick camera snapping to standard views
Color Picker
Real-time model color customization with any hex value
Dark / Light Theme
Toggle between dark and light mode across the entire viewer
Try It Out
Drop an STL, OBJ, or 3MF file into the viewer below to see it in action.