INTERACTIVE 3D & UI ENGINEERING

BUILDING A NEXT-GEN IMMERSIVE CITY SHOWCASE

Orchestrating a living digital twin: From static 3D assets to a fully interactive, cinematic web experience.

Live Project

Experience It Live

See this project in action. Explore the full functionality and design in a live environment.

tatawwar-immersive.vercel.app/

Visit Live Site

Tatawwar Immersive | Interactive Smart City Showroom preview

Live

•Click to explore

Tatawwar Immersive | Interactive Smart City Showroom hero image

Overview

This project represents a breakthrough in web-based 3D presentations, transforming a static city model into a living, breathing interactive ecosystem. The core challenge was to seamlessly blend high-fidelity WebGL rendering with a high-performance, responsive user interface. I engineered a custom 'Camera Rig' system that autonomously directs the viewer's perspective, creating smooth, cinematic transitions between a bird's-eye view and focused building inspections. The scene is alive with procedurally animated traffic and floating brand beacons that guide user interaction. The interface layer features a 'Smart Dual-Panel' architecture that adapts in real-time—shifting from detailed text layouts to a 'Cinema Mode' for video playback. By decoupling the UI state from the 3D render loop and utilizing `requestAnimationFrame` for animations, the system maintains a locked 60fps performance, delivering a premium, app-like experience directly in the browser.

Key Achievements

Engineered a 'Cinematic Camera Control' system: Replaced standard controls with a custom [CameraRig](cci:1://file:///c:/Users/NV_USER/my-3d-app/src/components/CameraRig.tsx:4:0-24:1) that utilizes vector interpolation. This allows for smooth, director-style camera pans and zooms when selecting buildings, ensuring the user always has the perfect angle without disorientation.

Implemented 'Dynamic 3D Asset Management': Modified the GLTF city model to separate interactable structures (Ujrah, KOLD, Nasni) from the environment. Programmatically injected floating logo billboards and 'TrafficManager' systems that animate vehicles along spline paths, turning a static mesh into a bustling city.

Architected an 'Adaptive Dual-Panel UI': Designed a sophisticated modal system that lives outside the Canvas in the DOM. It intelligently reshapes itself based on content, dynamically shifting between 'Info Mode' (text-heavy) and 'Cinema Mode' (video-centric) with a 16:9 aspect ratio.

Developed a 'High-Performance Media Engine': Built a custom video interface that bypasses standard CSS transitions in favor of a `requestAnimationFrame` loop. This results in a 'buttery smooth' progress bar that tracks media time with sub-millisecond precision, eliminating UI jitter during playback.

Designed a 'Context-Aware Visual Identity' system: The UI acts as a chameleon, reading the metadata of the selected building and instantly adapting its color palette (Cyan for Nasni, Orange for Rehla, Green for Ujrah) and accent gradients, reinforcing brand identity through immersive glassmorphism aesthetics.