How to rotate azimuth to face an object?

[Mo]

Thought I'd attach a video of what I'm doing. This is more a question of approach

2023-07-06.13-58-28.mp4

I'm using fitToBox to fit the image (plane) to the screen. This works great! However, although my camera is orbiting the correct point, it doesn't face the image head on. I'd like the camera to also rotate on it's orbit to face the image, so I attempted to do this with rotateAzimuthTo by calculating the angle between the camera's rotation and the image's normal, but it doesn't work (I'm not the best at vector math)

Any ideas how I can have fitToBox also rotate to center on the image?

I also tried the fitToRect example, but tht didn't work for me. Probably because my entire scene isn't at [0, 0, 0].

[Akihiro Oyamada]

Although fitToRect may not work in your case, I believe you can still refer and use the code and modify it to fit your needs.

[Mo]

Although fitToRect may not work in your case, I believe you can still refer and use the code and modify it to fit your needs.

Absolutely, and I tried this. It mostly works, but I'm not sure why I have to add -5 to both the rect and camera to get the camera into the right position, when both are using world coordinates.

const plane = scene.getObjectByName(ref)
    const _centerPosition = new Vector3()

    if (controls) {
      const _cameraPosition = new Vector3()
      camera.localToWorld(_cameraPosition)

      const _planePosition = new Vector3()
      plane.localToWorld(_planePosition)

      const rectWidth = plane.geometry.parameters.width
      const rectHeight = plane.geometry.parameters.height

      const _normal = new Vector3()
      plane.getWorldDirection(_normal)
      plane.updateMatrixWorld()

      const rectCenterPosition = _centerPosition.copy(_planePosition)
      const distance = controls.getDistanceToFitBox(rectWidth, rectHeight, 0)
      const cameraPosition = _cameraPosition
        .copy(_normal)
        .multiplyScalar(-(distance * 3.1))
        .add(rectCenterPosition)

      try {
        await controls.setLookAt(
          cameraPosition.x,
          cameraPosition.y - 5,
          cameraPosition.z,
          rectCenterPosition.x,
          rectCenterPosition.y - 5,
          rectCenterPosition.z,
          true
        )
        controls.update(clock.getDelta())
      } catch (e) {
        console.debug(e)
      }```

[Akihiro Oyamada]

I'm afraid I can't answer every app-specific question.
If you wish advanced support, please consider becoming a sponsor.