Glenora 3D Visualization

Interactive 3D visualization of houses in the historic Glenora neighborhood of Edmonton, Alberta, Canada.

Features

• 3D visualization of houses in the Glenora neighborhood
• Houses are categorized and color-coded based on their historic designation status
• Interactive map view option to see houses on a real map
• Property details panel with information about each house
• Filtering options to view different types of historic properties

Technologies Used

• Three.js for 3D rendering
• Mapbox GL for interactive map views
• Vite for development and building

Setup Instructions

1. Clone this repository
2. Install dependencies:

   npm install
   

3. Create a .env file in the project root and add your Mapbox access token:

   MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
   

4. Open src/main.js and replace REPLACE_WITH_YOUR_MAPBOX_TOKEN with your actual Mapbox token, or modify the code to use the environment variable.
5. Start the development server:

   npm run dev
   

6. Open your browser and navigate to http://localhost:5173

Controls

• Left Mouse Button + Drag: Rotate the camera
• Right Mouse Button + Drag: Pan the camera
• Scroll Wheel: Zoom in/out
• Click on House: View property details
• Toggle Map View: Switch between 3D view and map view
• Toggle Houses: Show/hide house models
• Filter Type: Filter houses by historic designation type

Data Sources

The current application uses sample data. In a production environment, you would connect to:

• City of Edmonton Open Data Portal
• Provincial heritage records
• GIS data for accurate house locations and sizes

Future Enhancements

• Add more detailed house models based on architectural styles
• Include terrain elevation data
• Add timeline slider to view neighborhood development over time
• Implement AR view for mobile devices
• Add ability to upload and integrate user photos of properties