I am facing a challenge in smoothly rotating the camera without changing the y-vector of the camera direction. When using look at, the camera direction changes abruptly which is not ideal for me. I am looking for a smooth transition as the camera's direction changes. It appears that quaternions might be the solution to this problem based on my research.
The camera (this.object) is moving along a defined path (this.spline.points). The current location of the camera is represented by (thisx,thisy, thisz).
I have cc[i] as the direction vector pointing to where I want the camera to face. Previously, I was using lookat(cc[i]) but it resulted in a quick, instantaneous change of direction.
After reading some information, I attempted the code below which caused the screen to go black when the camera was supposed to move.
If anyone could guide me on whether I am on the right path and how to fix my code, it would be greatly appreciated.
Thank you
var thisx = this.object.matrixWorld.getPosition().x.toPrecision(3);
var thisy = this.object.matrixWorld.getPosition().y.toPrecision(3);
var thisz = this.object.matrixWorld.getPosition().z.toPrecision(3);
var i = 0;
do {
var pathx = this.spline.points[i].x.toPrecision(3);
var pathz = this.spline.points[i].z.toPrecision(3);
if (thisx == pathx && thisz == pathz){
this.object.useQuaternion = true;
this.object.quaternion = new THREE.Quaternion(thisx, thisy, thisz, 1);
var newvect;
newvect.useQuaternion = true;
newvect.quaternion = new THREE.Quaternion(thisx+cc[i].x, thisy+cc[i].y, thisz+cc[i].z, 1);
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(this.object.quaternion, newvect.quaternion, newQuaternion, 0.5);
this.object.quaternion = newQuaternion;
//this.object.lookAt( cc[i]);
i = cc.length;
} else i++;
} while(i < cc.length);