Overview

Virtual Street Experience is a Babylon.js + Vue 3 web demo that lets users explore a stylized 3D neighborhood, interact with an NPC, and seamlessly enter a house to experience a first-person interior with physics and ambient lighting.

The project demonstrates how modern web technologies can deliver immersive, game-like experiences directly in the browser, combining Babylon.js rendering, Vue 3 UI logic, and Cannon.js physics for realistic motion and interaction. Its modular design allows for easy expansion — from adding new NPC interactions to populating the neighborhood with additional houses or interiors.

Key Features

3D Environment: Textured street, sidewalks, trees, and detailed house models.

Dual Camera Modes: RTS-style overview outdoors; first-person navigation indoors.

Seamless Transitions: Smooth fade between outdoor and indoor scenes.

Physics-Based Movement: Cannon.js used for gravity, damping, and collision detection.

Dynamic Lighting: Ambient, directional, and spotlights with real-time shadows.

Ambient Audio: Background sounds and NPC voice lines managed via Babylon AudioEngine.

Keyboard-Based Object Interaction: Players can press specific keys to interact with interior objects (e.g., open doors, toggle lights, activate props).