Combining threeJS gizmo in R3F - jumping camera issue

Questions
1

Hi!

I am working on a React Three Fiber Project where I want to use gizmo (custom viewHelper class) from threeJS.

This is threeJS sandbox with gizmo I want to use in R3F project: https://codesandbox.io/p/sandbox/xenodochial-aryabhata-pcdb5v?file=%2Fsrc%2Findex.js

R3F with embedded above gizmo:
https://codesandbox.io/p/sandbox/gizmo-r3f-mpnjdq?file=%2Fsrc%2Findex.js

Almost everything is fine, but the when manipulating gizmo sphere (the transparent one) it jumps in R3F. Also when rotating it ( so the entire scene too) there is a jump between z and -z along Y axis.

image
image784×784 11.6 KB

image
image741×771 9.19 KB

2

My investigation:

Of course the issue starts in the onPointerDown method where we can see camera.position jumping if logging it in console

I see changing the behaviour of the gizmo if controls are not being set with the method setControls
then the gizmo jumps along X axis to -Y but Z doesn’t jump anymore.
if runed off this line there is no jumping camera effect, but of course then the orbitControls doesn’t change the position of gizmo

    updateOrientation(fromCamera = true) {
      if (fromCamera) {
        //turning it off solves the issue
        // this.quaternion.copy(this.camera.quaternion).invert();
        this.updateMatrixWorld();
      }
  
      updateSpritesOpacity(this.spritePoints, this.camera);
    }

P.S.
I saw React Drei Gizmo, but they are less interactive