Zwischen Kameraposition beim Drehen mit slerp - THREE.js
Ich möchte tweencamera
Position während der Drehung.
Hier ist meine Funktion:
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, o.t);
camera.quaternion.set(qm.x, qm.y, qm.z, qm.w);
}).start();
}).call(this);
}
Es funktioniert super:http: //codepen.io/abernier/pen/zxzOb
Das einzige Problem ist das Tween für die Rotation scheint NICHT linear zu sein ... mit dem Tween der Position (das linear ist) Zerfall verursachen.
Wie kann ich Slerp in ein lineares Tween verwandeln?
Vielen Dan