BabylonJS 3D Interactive
Retro Arcade Gaming — Interactive 3D Showcase
Interactive 3D product viewer for a custom retro arcade cabinet. Click components to inspect specs, customize panel color, orbit the model — all in the browser with BabylonJS PBR + HDR.
Interactive 3D product viewer for a custom-built retro arcade cabinet. Explore the cabinet, click individual components to read specs, and customize the panel color — all in the browser.

Features
- 3D model viewer — Full PBR GLB model with HDR environment lighting and real-time shadows
- Interactive component inspection — Click any part to highlight it and display specs:
Pantalla— 7" FullHD touchscreen, EmuElec, 5,000+ games, 4h batteryKnob— Dual-channel stereo audio amplifier boardXbox Controller— Bluetooth wireless gaming controllerGrid Speakers— 5W compact stereo speakersPuerta— Accessible door with animated open sequencePanel— Custom MDF handcrafted panels
- Panel color customization — 5 variants (Cream, Sky Blue, Red, Pink, Black); persisted via
localStorage - Auto-rotating camera — Idle auto-rotation; orbit, zoom, and tilt supported
- Glow + Highlight layers — Selected parts glow amber (
#FFC53F) - Baked lightmap — Custom
baseLM.pngon UV2 channel
Camera Controls
| Action | Input |
|---|---|
| Orbit | Left-click drag / one-finger drag |
| Zoom | Scroll wheel / pinch |
| Auto-rotate | Activates after idle |
Limits: radius 0.5–3, beta 0.75–π/2, panning disabled.
Color Options
| Color | Hex |
|---|---|
| Cream (default) | #edeadc |
| Sky Blue | #60c5ff |
| Red | #c44141 |
| Pink | #ec8cc7 |
| Black | #1b1b1b |
Hardware Specs
- Screen: 7" FullHD touchscreen
- System: EmuElec — 5,000+ retro games
- Battery: Up to 4 hours
- Audio: Dual-channel stereo AMP + 5W speakers
- Controller: Bluetooth (Xbox-compatible)
- Cabinet: Custom handcrafted MDF panels
Tech Stack
| Layer | Technology |
|---|---|
| 3D Engine | BabylonJS |
| Model | GLB (GLTF Binary) |
| Lighting | PBR + HDR .env + Directional light |
| Shadows | ShadowGenerator (blur close exponential) |
| Lightmap | Baked baseLM.png (UV2 channel) |
| UI | HTML / CSS / Bootstrap 5 |
| State | localStorage (color persistence) |