GizmoHelper doesn't respect camera up direction

[Irev-Dev]

versions

Problem description:

Setting the camera up position to something other than the default (e.g. [0, 0, 1]) works until the gizmo is used at which point it snaps back to the default up direction.

Steps to reproduce

• go to https://codesandbox.io/s/gizmohelper-doesnt-respect-camera-axis-yr7sd?file=/src/App.js
• DONT click the viewport gizmo yet, use orbit controls and see that z axis is up ( cat should be facing up in littlest tokyo)
  
• now click use the Gizmo, notice the up axis has gone back to the default but orbitControls as still working as if the up were still [0,0,1]
  

I hope that describes the problem, its pretty obvious one you try it. Here's a video (at the end you can see I drag the mouse horizontally but the orbit doesn't match)

Screen.Recording.2021-08-22.at.3.28.24.pm.mov

I had a very quick go at debugging but am really not sure what I'm doing, I could see in https://github.com/pmndrs/drei/blob/master/src/core/GizmoHelper.tsx the line
mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize()
which I thought might be related but am not sure.

Having a lot of fun using r3f :)

[joshuaellis]

GizmoHelper came in as a contribution, as such we'll need the community to resolve issues like this. Thank you for the report!

[JulesBlm]

This bug seems to have been introduced in pull request #496 (commit). I tried removing the .set(0, 1, 0) in mainCamera.up.set(0, 1, 0).applyQuaternion(q1).normalize() line 102 in GizmoHelper.tsx but that did not work.

[cjimmy]

I'm not an expert here by any means, but I was able to get GizmoHelper to have Z be up without touching the PerspectiveCamera up prop.

You can change the global default up with

  THREE.Object3D.DefaultUp.set(0, 0, 1)

and wrap it in a useEffect so it only happens once

  useEffect(() => {
    THREE.Object3D.DefaultUp.set(0, 0, 1)
  }, [])

However, there's still something wrong with how the GLTF loads. I had to rotate it. But! GizmoHelper works as expected.

See forked version of your sandbox:
https://codesandbox.io/s/gizmohelper-doesnt-respect-camera-axis-forked-3rs9p?file=/src/App.tsx:565-636

[aboss-developer]

Setting camera direction z-axis up [0,0,1] is not getting applied to GizmoViewcube.

const DefaultControls = (props) => {
return (
    <>
      <PerspectiveCamera ref={cameraRef} position={[0, 0, 10]} up={[0,0,1]} makeDefault/>
      <OrbitControls ref={orbitRef} camera={camera} maxPolarAngle={Math.PI / 2} makeDefault onChange={onChange} enableDamping={false}/>
      <GizmoHelper
        alignment="top-right"
        margin={[50, 50]}
        onTarget={() => orbitRef?.current?.target0 as Vector3}
        onUpdate={() => {
          if (orbitRef.current) {
            orbitRef.current.update();
          }
        }}
      >
         {/* <GizmoViewport axisColors={['red', 'green', 'blue']} labelColor={'black'} /> */}
        <GizmoViewcube {...{color:'white', faces}} />
      </GizmoHelper>
    </>
  )
}
}

const CCanvas = (props) => {
    return (
    <Canvas gl={{ preserveDrawingBuffer: true }}  >
      <axesHelper/>
      <Environment />
      <DefaultControls setOrbit={setOrbit} />
      <Floor />
    </Canvas>)
}

[mdtusz]

This seems to be sorta fixed if you have orbit controls with makeDefault set, but the animation when orbiting from a GizmoViewcube doesn't respect the orbit controls UP.

I think this should be a straightforwards fix though by just modifying animation block to check for the orbit "up", or alternatively it may be easier to just allow users to provide an UP prop direclty - it isn't really something that changes in applications where you want to use a gizmo cube (i.e. CAD type tools).