Three.js How to use quaternion to rotate camera

javascript, three.js

Solution

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.

Problem

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.

Original source