Model moving in tandem in separate canvases

Questions
,
1

Hi there, ThreeJSers! I have an interesting problem which I’ve been trying to solve and can’t seem to be able to: I have a model which is rendered in 2 separate canvases in which I need them to move (rotation, etc) in tandem. The idea is that if the user moves the model in one of the canvases, the same movement should be applied to the model in the second canvas. I have some code below (pardon my TypeScript) which partially works, moving the mouse left/right achieves the desired effect but when moving it up/down the model moves in an unexpected way on the second canvas. I obviously used getPolarAngle() and getAzimuthalAngle() to try capture rotation along “x” and “y” respectively. “y” seems to work fine, “x” doesn’t. Is there any other way I could be doing this? For example, it would be interesting to capture other mouse movements like for pan and zoom, which I’m not even trying to address w/ the code yet. Thanks very much for the help!

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    this.controls.addEventListener('change', this.setModelMap);
    this.modelMap.on("valueChanged", this.updateModel);

  private setModelMap = (e: any) => {
    let vector: THREE.Vector3 = new THREE.Vector3();
    vector = this.model.getWorldDirection(vector);

    this.isBusy = true;
    this.modelMap.set("x", this.controls.getPolarAngle());
    this.modelMap.set("y", this.controls.getAzimuthalAngle());
    this.modelMap.set("z", vector.z);
    this.isBusy = false;
  }

  private updateModel = (e: any) => {
    if (!this.isBusy) {
      let vector: THREE.Vector3 = new THREE.Vector3();
      vector.x = this.modelMap.get("x") as number;
      vector.y = this.modelMap.get("y") as number;
      vector.z = this.modelMap.get("z") as number;

      this.model.rotation.x = -vector.x + Math.PI/2;
      this.model.rotation.y = -vector.y;
      // this.model.position.z = vector.z;
    }
  }
2

Just solved:

      this.camera.position.x = vector.x;
      this.camera.position.y = vector.y;
      this.camera.position.z = vector.z;
      this.camera.lookAt(this.model.position);

where vector is the camera position in the 1st canvas.
Thanks anyway!

3

Hello, this method can solve the linkage, then the mouse wheel zooms in and out, it does not take effect