Seeking assistance on how to properly rotate an image along all three axes using the Three Js library. Currently, rotation along one axis works fine, but when attempting rotation along all three axes, the results are abnormal. I have read about using quaternions to avoid gimbal lock and tried using Euler angles without success.
sphericImageMesh_ represents my sphere object, and this.getRollDeg() is a method to retrieve the roll angle indicated by the camera.
My attempted solution is shown below:
// var euler = new THREE.Euler( - THREE.Math.degToRad(this.getRollDeg()), - THREE.Math.degToRad( this.getHeadingDeg()) , - THREE.Math.degToRad(this.getPitchDeg()), 'XYZ' );
// this.sphericImageMesh_.setRotationFromEuler(euler);
// this.sphericImageMesh_.rotateZ(THREE.Math.degToRad(-this.getPitchDeg()));
// this.sphericImageMesh_.rotateX(THREE.Math.degToRad(-this.getRollDeg()));
this.sphericImageMesh_.rotateY(THREE.Math.degToRad(-this.getHeadingDeg()));
I have read about using Quaternions and MatrixX4, but I am unsure how to implement them. Any assistance on this matter would be greatly appreciated.