An issue with orbit/target translations based on camera-change event from model-viewer

[karanganesan]

Description

Hi, not sure what exactly is the bug, but I have created a glitch url for the same
code - https://glitch.com/edit/#!/leaf-necessary-toad?path=index.html
live - https://leaf-necessary-toad.glitch.me/

so you can move in 1st model-viewer on top, I have added listener for camera change on viewer #1 and get the model orbit and target and apply it to viewer #2

it's not translating 1:1

Live Demo

https://leaf-necessary-toad.glitch.me/

Version

• model-viewer: latest

Browser Affected

• Chrome, version: 100.0.1185.29
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

This is how I translate the values from one viewer to another

const v1 = document.querySelector("#viewer-1");
const v2 = document.querySelector("#viewer-2");
v1.addEventListener("camera-change", () => {
    const orbit = v1.getCameraOrbit();
    const target = v1.getCameraTarget();
    v2.setAttribute("camera-orbit", orbit.toString());
    v2.setAttribute("camera-target", target.toString());
    v2.jumpCameraToGoal(); // maybe not needed?
    v2.updateFraming(); // maybe not needed?
});

Video of the issue

Screen.Recording.2022-04-06.at.9.00.09.PM.mov

[elalish]

Our zoom feature changes both camera radius and field of view; you just forgot to set the second one.

[karanganesan]

hey @elalish, tried added fov also, still I see the issue...

[karanganesan]

v1.addEventListener("camera-change", () => {
    const orbit = v1.getCameraOrbit();
    const target = v1.getCameraTarget();
    const fov = v1.getFieldOfView();
    v2.setAttribute("camera-orbit", orbit.toString());
    v2.setAttribute("camera-target", target.toString());
    v2.setAttribute("field-of-view", `${fov}deg`);
});

[elalish]

Those two images look identical to me now; what issue do you see?