How can I calculate the rotation of the drei PIvotControls with respect to its own rotation

Questions
,
1

I am using drei Pivot Controls to allow the user to move an object. I set the initial rotation of the Pivot Controls (rotation={getPivotControlsRotation()}) to be aligned with the box geometry. And everything works great. But the matrices that I get from onDrag are not with respect to the pivot controls. Because of this, if I rotate about the X axis of the Pivot Controls, and extract the rotations as shown below, rotation has values for X, Y, and Z. I need it to be expressed with respect to the Pivot Controls so if i rotate about the pivot controls X axis, Y and Z should be 0?

const rotationMatrix = new Matrix4()
    .extractRotation(userTransformationRef.current.local)

const rotation = new Euler().setFromRotationMatrix(rotationMatrix); 

<PivotControls
    depthTest={false}
    autoTransform={true}
    anchor={[0, 0, 0]}
    rotation={getPivotControlsRotation()}
    onDrag={(l, dL, w, dW) => {
        userTransformationRef.current = {
            local: l.clone(),
            dLocal: dL.clone(),
            world: w.clone(),
            dWorld: dW.clone(),
        };
    }}
    onDragEnd={() => setUserTransformation()}
>
    <mesh
        matrix={matrix}
        matrixAutoUpdate={false}
    >
        <boxGeometry
            args={[
                width,
                height,
                depth,
            ]}
        ></boxGeometry>
        <meshStandardMaterial
            color={color}
        />
    </mesh>
</PivotControls>
2

Currently struggling with exactly the same problem. When using PivotControls with annotations, each annotation for the rotation arcs seems to show their local rotation, not impacted by the whole rotation matrix. But when I decompose the quaternion from transforrm matrix I get rotation in range of :

  • 0 to -1.4 radians through the first 45 degrees
  • back from -1.4 to 0 radians through to 90 degrees
  • 0 to 1.4 radians through to 270 degrees
    -1.4 to 0 radians to 360 degrees

How could I extract rotation specific to each axis rather than having the rotation matrix?

@leo2 have you been successful finding solution?

3

if you need more features and you know the calculations you can make pull requests, add them. it will be merged quickly. pivot is very complicated math, you won’t find that many people that can alter it. currently it works as the author wanted it to be, his name on github is stingnails.

4

Thank you for your reply. By any means I do not want to change anything inside the original code of PivotControls, it’s as you mentioned very complex math. I’m just wondering how could I extract proper information about each axis/arc rotation from the transformation matrix returned from the onDrag event. I’m using only X and Y rotations here as I need it only for the sake of creating and updating a section plane.
Below is my visual representation - as you can see I’m getting proper angle value only for some quarters of full angle. In the inputs my values taken from the transformation matrix, directly calculated from quaternion to euler and then degrees. On the gif, rotation values from the PivotControls annotations.
rotation

5

I have the same problem. Has anyone found a way to get the correct rotation value?

6

I found the solution! First, I create a quaternion from the matrix, then I create an Euler angle from the quaternion. What seems to fix the issue is specifying the order (YXZ) when creating the Euler from the quaternion.

 const handleDrag = (matrix) => {
    const newQuaternion = new THREE.Quaternion()
    newQuaternion.setFromRotationMatrix(matrix)
    
    const newEuler = new THREE.Euler()
    newEuler.setFromQuaternion(newQuaternion,'YXZ')
    // Here, I set the order to 'YXZ' so that the rotation is correctly applied to the Euler angles.
    console.log('newEuler', newEuler);

     console.log(newEuler.y)
      //return the correct rotation 
  };