GizmoHelper with Z up camera wrong rotations

[mqrty]

• three version: 0.167.1
• @react-three/fiber version: 8.17.12
• @react-three/drei version: 9.121.3

Problem description:

If you use Z as the camera UP axis and click the gizmo axis heads, the rotation is wrong for most of them.

Relevant code:

Codesandbox

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { Canvas } from "@react-three/fiber";
import { GizmoHelper, GizmoViewport, OrbitControls } from "@react-three/drei";

ReactDOM.render(
  <Canvas
    style={{ position: "absolute", inset: 0 }}
    camera={{ up: [0, 0, 1], position: [2, 2, 2] }}
  >
    <axesHelper />
    <OrbitControls makeDefault enableDamping={false} />
    <GizmoHelper>
      <GizmoViewport />
    </GizmoHelper>
  </Canvas>,
  document.getElementById("root")
);

Suggested solution:

• fix: GizmoHelper rotations with Z up camera #2322

Video

gizmohelper.mp4

[gbertoncelli]

Same issue here! I have also this error after clicking for a specific rotation:

Cannot use 'in' operator to search for 'getTarget' in null

I'm using a custom OrthographicCamera, a OrbitControls and setting up both on THREE.Object3D.DefaultUp.set(0, 0, 1) and camera.up...

[gbertoncelli]

Same issue here! I have also this error after clicking for a specific rotation:

Cannot use 'in' operator to search for 'getTarget' in null

I'm using a custom OrthographicCamera, a OrbitControls and setting up both on `THREE.Object3D.DefaultUp.set(0, 0, 1)` and `camera.up`...

Solved the error by setting makeDefault to OrbitControls, sorry for the OT