javascript - Three.js How to use quaternion to rotate camera

Question

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.

Answer 1

Slerp is quite easy. It takes 4 parameters:

• targetRotation the actual camera rotation
• destinationRotation the object rotation
• destinationRotation new quaternion which will be the new camera rotation
• percentOfRotation 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.