In Three.js, I would like to use THREE.quaternion to make the camera object rotate to the selected object.
I did search the web but found no example/demo or document about how to use this quaternion class.
I try my luck with following code:
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 10;
camera.position.z = 0;
camera.position.x = radious;
camera.useQuaternion = true;
// I did use the TrackballTrackballControls. Maybe it causes the problem so I put it here
controls = new THREE.TrackballControls( camera, document.getElementById(_canvasElement) );
// function to make the camera rotate to the object
function focusOn3DObject(obj){
obj.useQuaternion = true;
obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.07);
camera.quaternion = newQuaternion;
}
But it doesn't work. Did I miss something? Please help. Thanks in advance.
Slerp is quite easy. It takes 4 parameters:
targetRotation
the actual camera rotationdestinationRotation
the object rotationdestinationRotation
new quaternion which will be the new camera rotationpercentOfRotation
this parameter is playground, I'm using 0.07 here right now, could be value between 0 (0%) and 1 (100%)This is my rotation method:
var qm = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07);
camera.quaternion = qm;
camera.quaternion.normalize();
Hopefully this will help you. And don't bother I also worked some weeks on the perfect camera following.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With