Gizmo helper with camera controls won't work

[sinedie]

Awesome work here, great library!. Now to the issue:

• three version: "^0.149.0"
• @react-three/fiber version: "^8.12.0"
• @react-three/drei version: "^9.65.2"
• node version: v18.14.2
• npm (or yarn) version: npm 9.5.0

Problem description:

Gizmo helper with camera controls throws error on tween camera call

Relevant code:

...

<CameraControls ref={ref} makeDefault/>

...

<GizmoHelper
  alignment="bottom-right"
  margin={[80, 80]}
>
  <GizmoViewcube  />
</GizmoHelper>

Workaround solution:

A workaround is, but if this could work out of the box would be awesome or that event have the direction of the clicked face or edge

function Gizmo() {
  const { scene, controls } = useThree();

  const tweenCamera = (position: Vector3) => {
    const point = new Spherical().setFromVector3(
      new Vector3(position.x, position.y, position.z)
    );
    // @ts-ignore
    controls.rotateTo(point.theta, point.phi, true);
    // @ts-ignore
    controls.fitToSphere(getBoundingSphere(scene), true);
  };

  return (
    <GizmoHelper margin={[80, 80]} alignment={'top-right'}>
      <GizmoViewcube
        onClick={(e) => {
          e.stopPropagation();
          if (
            e.eventObject.position.x === 0 &&
            e.eventObject.position.y === 0 &&
            e.eventObject.position.z === 0
          ) {
            tweenCamera(e.face.normal);
          } else {
            tweenCamera(e.eventObject.position);
          }
          return null;
        }}
      />
    </GizmoHelper>
  );
}

[github-actions]

🎉 This issue has been resolved in version 9.111.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀