All projects
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.

Retro Arcade Gaming

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 battery
    • Knob — Dual-channel stereo audio amplifier board
    • Xbox Controller — Bluetooth wireless gaming controller
    • Grid Speakers — 5W compact stereo speakers
    • Puerta — Accessible door with animated open sequence
    • Panel — 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.png on UV2 channel

Camera Controls

ActionInput
OrbitLeft-click drag / one-finger drag
ZoomScroll wheel / pinch
Auto-rotateActivates after idle

Limits: radius 0.5–3, beta 0.75–π/2, panning disabled.

Color Options

ColorHex
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

LayerTechnology
3D EngineBabylonJS
ModelGLB (GLTF Binary)
LightingPBR + HDR .env + Directional light
ShadowsShadowGenerator (blur close exponential)
LightmapBaked baseLM.png (UV2 channel)
UIHTML / CSS / Bootstrap 5
StatelocalStorage (color persistence)

Built by

Viseni Design Studio

3D, WebGL, interactive & VR/AR experiences

Visit viseni.com