set camera orbit but not accurate

[Mah0913]

Hi, i create a button and assign a function which is get the current camera orbit and another button to set the camera orbit with the data i get in the previous button. However, the position and and the zoom level not that accurate, is anything i missed in my code?

@ViewChild('modelViewerElement') modelViewerElement!: ElementRef;
  camview = { theta: 0, phi: 0, radius: 0 ,x:0,y:0,z:0,fov:0};

changeview() {
    const modelViewer = this.modelViewerElement.nativeElement as any;
    modelViewer.cameraOrbit = `${this.camview.theta}deg ${this.camview.phi}deg ${this.camview.radius}m`;
    modelViewer.cameraTarget = `${this.camview.x}m ${this.camview.y}m ${this.camview.z}m`;
    modelViewer.fieldOfView = `${this.camview.fov}m`;
    console.log("orbit:", modelViewer.cameraOrbit)
    console.log("target:", modelViewer.cameraTarget)
    console.log("fov:", modelViewer.fieldOfView)
  }
  getview() {
    const cameraOrbit = this.modelViewerElement.nativeElement.getCameraOrbit();
    const cameraTarget=this.modelViewerElement.nativeElement.getCameraTarget();
    const fov=this.modelViewerElement.nativeElement.getFieldOfView();
    this.camview = {
      theta: cameraOrbit.theta* (180 / Math.PI),
      phi: cameraOrbit.phi* (180 / Math.PI),
      radius: cameraOrbit.radius,
      x:cameraTarget.x,
      y:cameraTarget.y,
      z:cameraTarget.z,
      fov:fov,
    };
  }
  

I using angular app to develop, and the getview() is the function to get the current camera orbit. changeview() is the function to set the cam toward the view.

Thanks.

[elalish]

Looks good - probably just an conversion error somewhere. I'd recommend simplifying your code by using our cameraOrbit.toString() method, which will automatically add the units and such to ensure consistency. Also, field of view doesn't have units of meters (it's an angle).

[Mah0913]

Thanks for reply, I already change base on your reply however still didn't get the perfect result.
here is the prototype create online. Free to have a look.

https://stackblitz.com/edit/fdxd99?file=src%2Fapp%2Fapp.component.ts

4hmqiv.forked.-.StackBlitz.-.Google.Chrome.2024-05-02.11-42-31.online-video-cutter.com.mp4

Here the video that the situation I'm facing now. When I zoom in and click the "Get View" button, afterwards, clicking the "Next View" button should result in facing a similar angle and zoom level, but it seems like it's not that accurate.

[elalish]

ah, thank you - apparently we forgot to add a toString() specialization to fieldOfView - should be an easy fix. For now, just use ${fov}deg and it should work.

[Mah0913]

Ohh, it working. Thanks for helping.