Tween camera position during rotation with slerp - THREE.js

Question

I want to change the position of the camera during rotation.

Here is my function:

 function moveAndLookAt(camera, dstpos, dstlookat, options) { options || (options = {duration: 300}); var origpos = new THREE.Vector3().copy(camera.position); // original position var origrot = new THREE.Euler().copy(camera.rotation); // original rotation camera.position.set(dstpos.x, dstpos.y, dstpos.z); camera.lookAt(dstlookat); var dstrot = new THREE.Euler().copy(camera.rotation) // reset original position and rotation camera.position.set(origpos.x, origpos.y, origpos.z); camera.rotation.set(origrot.x, origrot.y, origrot.z); // // Tweening // // position new TWEEN.Tween(camera.position).to({ x: dstpos.x, y: dstpos.y, z: dstpos.z }, options.duration).start();; // rotation (using slerp) (function () { var qa = camera.quaternion; // src quaternion var qb = new THREE.Quaternion().setFromEuler(dstrot); // dst quaternion var qm = new THREE.Quaternion(); var o = {t: 0}; new TWEEN.Tween(o).to({t: 1}, options.duration).onUpdate(function () { THREE.Quaternion.slerp(qa, qb, qm, ot); camera.quaternion.set(qm.x, qm.y, qm.z, qm.w); }).start(); }).call(this); } 

It works great: http://codepen.io/abernier/pen/zxzObm

---

The only problem is that the animation for rotation does NOT seem linear ... causing decay with rotation of the position (which is linear).

How can I turn slerp into linear animation?

thanks

Answer 1

In your code

 // rotation (using slerp) (function () { var qa = camera.quaternion; // src quaternion 

Change it to

 qa = new THREE.Quaternion().copy(camera.quaternion); // src quaternion 

How you do it, qa is the same as the camera quaternion, and it goes back to the slerp calculus. It must be a constant variable.