<GizmoHelper> struggling with Z up camera

[RodrigoHamuy]

• three version: 0.167.1
• @react-three/fiber version: 8.17.6
• @react-three/drei version: 9.111.3
• node version: 20.11.1
• npm version: 10.2.4

Problem description:

If you use Z as the UP vector for the camera, and then try to rotate to face the Z axis, GizmoHelper will rotate correctly only the first time (video attached).

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: [10, 10, 10] }}
  >
    <axesHelper />
    <OrbitControls makeDefault enableDamping={false} />
    <GizmoHelper>
      <GizmoViewport />
    </GizmoHelper>
  </Canvas>,
  document.getElementById("root")
);

Suggested solution:

• fix: #2074 GizmoHelper with Z UP camera #2075

Video:

gizmo-helper.webm

[github-actions]

🎉 This issue has been resolved in version 9.111.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀