VirtualTour

Features:

1. Map Navigation:

   • Users can zoom in, zoom out, rotate, and pan the map.
   • The map should provide an immersive 3D navigation experience.

2. 3D Model Overlay:

   • Overlay 7 GLB format 3D models on specific coordinates.
   • Models should transform based on user interaction with the map, similar to the experience in Pokemon Go.

3. Model Interaction:

   • Users can click on the 3D models to view additional information.
   • Display a text description in a sidebar when a model is clicked.

4. Search Functionality:

   • Users can search for specific locations on the map.

Functional Specification:

1. User Interaction:

   • Users navigate the map using standard controls (zoom, pan, rotate).
   • When a user clicks on a 3D model, a sidebar appears with a text description of the model.

2. Pages and Components:

   • Main Page:
   • Displays the 3D map with navigation controls.
   • Overlays 3D models at specific coordinates.
   • Sidebar for displaying model information.
   • Search Component:
   • Allows users to search for specific locations on the map.

Technical Specification:

1. Application Type and Technologies:

   • Web application using React for the frontend.
   • Google Maps Platform API for map functionality and 3D map rendering.
   • Backend using Node.js with Express framework.
   • MongoDB for any necessary data storage (optional based on further requirements).

2. Architecture:

   • Frontend:
   • React for building the UI components.
   • Google Maps API for map rendering and navigation.
   • Integration with the Google Maps API to overlay 3D models and handle user interactions.
   • Sidebar component for displaying model information.
   • Backend:
   • Node.js with Express for handling any server-side logic.
   • MongoDB with Mongoose for storing any necessary data (e.g., model coordinates, descriptions).

3. Detailed Component Description:

   • Map Component:
   • Integrates with Google Maps API.
   • Handles map navigation (zoom, pan, rotate).
   • Overlays 3D models at specified coordinates.
   • Updates model positions and transformations based on user interactions.
   • Model Component:
   • Renders 3D GLB models on the map.
   • Listens for click events to trigger the display of additional information.
   • Sidebar Component:
   • Displays text descriptions of models when clicked.
   • Positioned on the side of the map.
   • Search Component:
   • Provides a search bar for users to find specific locations.
   • Integrates with Google Maps API for location search functionality.

Integration Specification:

1. Google Maps API:

   • Utilize the Google Maps JavaScript API for rendering the 3D map and handling navigation.
   • Use the Google Maps API to overlay 3D GLB models on specific coordinates.
   • Implement search functionality using the Google Maps Places API.

2. 3D Models:

   • Models will be provided in GLB format.
   • Coordinates for each model will be specified and stored in the application.

Built With

• css
• html
• javascript
• react