Nightclub Visualizer

What it is

Nightclub Visualizer is an immersive 3D environment where you build and explore a nightclub scene. Place structures and DJ booths, manage layers, control lighting and colors, play tracks from a built-in playlist, and switch to cinema mode for a clean, distraction-free view.

Why I built it

Event and venue visualization is usually locked in expensive 3D tools or static renders. I wanted a lightweight browser experience where layout, lighting, and music could be explored in real time — closer to how a creative director actually reviews a concept.

Key features

• Full 3D nightclub environment with editable structures
• DJ booth placement and scene object management
• Left and right sidebars with collapsible panels
• Layer system with selection, stacking, and per-item settings
• Gizmo controls for translate, rotate, and scale
• Built-in music player with track list, seek bar, and volume
• Cinema mode that hides UI for presentation viewing
• Color and lighting controls per scene element

Approach

Three.js scene graph with a UI layer on top. Sidebars manage object hierarchy; the bottom bar handles audio playback independently from the 3D render loop. Cinema mode is a CSS state toggle that preserves the running scene while stripping chrome for demos.

What it demonstrates

• Creative tooling in the browser without Blender or After Effects
• Layer-based editing UX borrowed from design tools, applied to 3D
• Presentation mode as a product feature, not an afterthought

Takeaways

Visualizers are only useful if a non-technical person can explore without a manual. Collapsible panels, cinema mode, and clear layer naming matter as much as the 3D fidelity.