Synchronizing the 3d model and it’s virtual view in a single webpage using the Forge Viewer and the Matterport viewer respectively.


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


  • 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.


  • 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.

Need Help With Application Development?

Success Story Contact Enquiry