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
• [x] Dev

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] 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.