math - threejs - Rotate camera around target axes using array of angles

Question

I'm using OrbitControls currently and this is working fine for mouse controls.

Here is my requirement:

I've an array of angles in radians(Eg: [0.5,0.6,0]). These are the angle the 3d object has to rotate around its own axes(x,y,z respectively). I'm trying to rotate/orbit the camera around the target object's axes by the amount given in the array instead of rotating the object itself, just to be consistent with OrbitControls.

Here's what I've tried so far:

var q = new THREE.Quaternion();
q.setFromAxisAngle(new THREE.Vector3(1, 0, 0), -poseAngles[0]);
camera.applyQuaternion(q);
q.setFromAxisAngle(new THREE.Vector3(0, 1, 0), -poseAngles[1]);
camera.applyQuaternion(q);
q.setFromAxisAngle(new THREE.Vector3(0, 0, 1), -poseAngles[2]);
camera.applyQuaternion(q);

After this, I render the scene but the effect is quite not what I want. The above code is rotating the camera around its own axes and part of the target object goes beyond the canvas because of this. BTW, the -ve sign is to rotate the camera in the opposite direction so that it looks like object has rotated as desired.

I've tried this setting the camera position like this:

var sph = (new THREE.Spherical()).setFromVector3(camera.position);
sph.phi -= poseAngles[0];
sph.theta -= poseAngles[1];
sph.makeSafe();
camera.position.setFromSpherical(sph);

But here, I don't know how to accommodate the angle around z-axis.

I've tried the combination of the above two which doesn't work either. The camera resets to original position as soon as mouse is used.

I'm not getting the math right. How do I rotate the camera around its target's axes? Can someone please help? Thanks. I'm using threejs revision 121.

question from:https://stackoverflow.com/questions/65884023/threejs-rotate-camera-around-target-axes-using-array-of-angles

Answer 1

Waitting for answers