Orbiting same in both Forge Viewer while having two viewer

Question

I am having two viewers in my application and want both of them to orbit the same with the same positions and camera angles and also follow the same while zooming in and out.

Is there any way?

I've applied the below solution but it's delayed by one second.

viewer2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
       {
        if(!viewer1CameraChangeMutex) {
              clearTimeout(viewer2CameraChangeMutex);
              viewer.restoreState(viewer2.getState());
              viewer2CameraChangeMutex=setTimeout(function(){viewer2CameraChangeMutex=undefined},1000)
           }
       });
viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function()
       {
        if(!viewer2CameraChangeMutex) {
               clearTimeout(viewer1CameraChangeMutex);
               viewer2.restoreState(viewer.getState());
               viewer1CameraChangeMutex=setTimeout(function(){viewer1CameraChangeMutex=undefined},1000)
           }
        });

Answer 1

You can stop unnecessary event ping-pong b/w viewers, e.g. change view on viewer1 --> change event on viewer 1 then set view state to viewer2 --> change event on viewer 2 then change viewer 1 state --> change event on viewer 1 ....., by comparing viewport status and set view status to other viewer only when viewport status is not in same status.

Below is example code snippet for above explanation.

    function compare(stateA, stateB)
    {
        var viewportA = stateA["viewport"] || {};
        var viewportB = stateB["viewport"] || {};

        //compare all members of viewportA and viewportB, return true when all members are same. 
       if( viewportA["name"] !== viewportB["name"] ||
            viewportA["projection"] !== viewportB["projection"] ||
            viewportA["isOrthographic"] !== viewportB["isOrthographic"] ||
            .......//compare all other members of viewport. 
                   //Please note you need to afforded small numeric error for numeric value comparison.
             )
       {

            return false;
       }
       
       return true;
    }


    var sfilter = {
       viewport: true
    };

    viewer3d1.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
        var v1state = viewer3d1.getState(sfilter);
        var v2state = viewer3d2.getState(sfilter);

        if (!compare(v1state, v2state)) {
            viewer3d2.restoreState(viewer3d1.getState(sfilter), sfilter, true);
        }
    });

    viewer3d2.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, function () {
        var v1state = viewer3d1.getState(sfilter);
        var v2state = viewer3d2.getState(sfilter);
        if (!compare(v1state, v2state)) {
            viewer3d1.restoreState(viewer3d2.getState(sfilter), sfilter, true);
        }
    });