BACKGROUND/OVERWIEW:
Synchronizing the 3d model and it’s virtual view in a single webpage using the Forge Viewer and the Matterport viewer respectively.
PROJECT
Konnect 3D – Immersive Review Experience
Technology: Autodesk Forge , Matterport SDK
Languages | Platform: Node JS, HTML/CSS and Javascript
Fig: 3D model for Forge and Matterport
CHALLENGE
- Creating a synchronized camera between two viewers i.e. Forge and Matterport to synchronize view as per user mouse operations
- Synchronizing two different coordinate systems with two different model orientation and bounding boxes.
- Implementing a feature to create hotspot in any one viewer and then synchronizing same in another viewer with hotspot information.
SOLUTION
- As Forge Viewer(3D Model) and Matterport Viewer(3D Scan) are two entirely different viewing systems and the 3D model loaded in Forge and Matterport are in completely different coordinate systems, it was hard to set initial camera orientation and inject user mouse operations. So the team at ProtoTech figured out a performance efficient way to set initial camera orientation that handles synchronization correctly.
- Set the specific position of the 3d model according to the virtual view for the camera and hotspots synchronization.
- Metverse concept- Team built a bridge to transfer information from one viewer to another.
Matterport Viewer
Synchronizing the 3d model