Coordinate systems do not match between two copies of a panorama

[jtsiaperas]

Description

I am trying to synchronize the movement of two copies of a panorama on different computers. One computer or tablet is the input, and the other is a larger display. I am sending the camera position using websockets. Unfortunately, when I try to rotate the panorama, the coordinate systems do not match except for horizontally. The image rolls rather than tilting up or down.

this function is how I get and send the position information:
sendpanorama(parent){
let panoramaposition = parent.panorama.getWorldPosition(new THREE.Vector3());//get world position of panorama camera
let camera = parent.viewer.getCamera();

let {x,y,z} = camera.position.sub(panoramaposition);

let url = parent.image;//send url in case image is changed
let zoom = parent.viewer.getCamera().fov;
parent.socket.send(JSON.stringify({ type: 'drag', x, y, z, url, zoom}))
}

this function is how I change the camera position in the secondary display:
handleDrag(x, y, z, zoom) {
const target = document.getElementById(this.target);//get target of the drag event
if (target) {//if target exists, then make changes
var position = this.viewer.getCamera().position.clone() ;
position.x=-x; // x is reversed for some reason, hence the - sign
position.y=y;
position.z=z;

                this.viewer.getCamera().fov = zoom;
                this.viewer.getCamera().updateProjectionMatrix();

               this.panorama.lookAt(position);//point viewport at correct position -- only seems to work for horizontal rotation?
                
                this.viewer.getControl().update();//update view
            }
        }

Panolens version

• Master
• Dev

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[jtsiaperas]

The issue was that the second camera was using the panorama coordinates rather than the camera. Manually setting the camera position rather than using lookAt() solved the problem.