IFC Map Viewer
This project aims to create an interactive environment on a website where 3D designers and customers can engage with architectural designs, construction plans, and related elementsand seamlessly place them on a map-based interface.
Visit website- Front-end Development
- Research
- Implement 3d Plugin
Bringing it together
A designer is in need of a more effective method to showcase their architecture files to clients. Previously, they relied solely on images and videos, which made it challenging for both parties to fully understand the intricate details and parameters of the design without installing the specific software applications such as AutoCAD or Revit. These applications can be complicated and time-consuming to install and use.
Improving the experience
One recurring issue i frequently encountered from users was the challenge of envisioning how a building or architecture would appear in real life. This posed difficulties for designers who needed to consider the surrounding environment when creating their designs. To address this concern, i implemented a comprehensive map that encompasses all three-dimensional elements such as roads, buildings, plants, and more. Users now have the ability to position their models within this map, providing them with a more realistic context.
Meaningful details
The capability to select areas on the 3D model allows users to highlight specific positions and view detailed information about them. This feature enables easy access to measurements, materials, and other relevant details of the building, enhancing users' understanding and decision-making process. By interacting with the model and gathering precise information, users can ensure an accurate and efficient design representation.
Technology
The website is built using JavaScript programming language (TypeScript) and incorporates the following technologies: ReactJS library for building the user interface. Web Ifc Viewer library for displaying 3D models and enhancing it to support additional features such as isolate, hide/unhide elements, and more. MapBox V3 for displaying maps.
