This project is the last of my open-source projects. It is still in the development stage. This project is a logical continuation of the interactive client project based on SVG. However, now the construction of interactive diagrams is taken to a new level. I wanted to provide a tool for building diagrams and plans of territories in a three-dimensional space. To achieve this, I am harnessing the full power of the popular JS library - Three.js. Since I have practical experience working with 3D scenes, the basic concepts (scene, light, shadow, materials, primitives, and mesh) used in Three.js were familiar to me. The idea was to take 2D geometry described in an SVG file and transform it into a 3D space.
Below you can see an example of creating such a scene. It's a conceptual plan of a shopping center. The diagram has the ability to respond to mouse hover and click on a highlighted active element. Depending on the logic, it performs certain actions.
The first image shows an example of how the SVG file itself looks. And below it is the implementation of the 3D scene based on it.
For pan map use right
button.
For zooming use mouse wheel
Change floor
Select
View
On a mobile device, you can't see a live example of this project's functionality. Only screen images are available. For a full demonstration of the capabilities of this project, please use a desktop device.