Object Rotation Logic in WebXR (HELP!)

Questions
, ,
1

I can’t figure out how to properly rotate the object so that it always rotates relative to the camera, even if its position is adjusted or the camera moves to a different angle. In the attached video, my current issue is visible: the object rotates unpredictably, making rotations that don’t align with my touch swipes.

   if (event.touches.length === 1) {
    const cameraMatrix = new THREE.Matrix4();
    cameraMatrix.fromArray(this.camera.matrix.elements);
    const cameraQuaternion = new THREE.Quaternion();  
    cameraQuaternion.setFromRotationMatrix(cameraMatrix);

    const cameraX = new THREE.Vector3(1, 0, 0).applyQuaternion(cameraQuaternion);
    const cameraY = new THREE.Vector3(0, 1, 0).applyQuaternion(cameraQuaternion);

    const worldX = new THREE.Vector3(1, 0, 0);
    const worldY = new THREE.Vector3(0, 1, 0);

    const signX = Math.sign(cameraX.dot(worldX));
    const signY = Math.sign(cameraY.dot(worldY));

    spawnedModels.forEach(model => { 
      model.rotateOnWorldAxis(worldY, deltaX * 0.01 * signY);
      model.rotateOnWorldAxis(worldX, deltaY * 0.01 * signX);
    });

    if (spawnedModels.length > 0) {
      this.sharedRotation.copy(spawnedModels[0].rotation);
    }
  }
2

Your video looks like correct behavior to me?