2015-01-22 12 views
6

Chcę wstawić między pozycją camera podczas obracania.Położenie kamery pośredniej podczas obracania z opróżnieniem - THREE.js

Oto moja funkcja:

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); 
} 

Działa świetnie: http://codepen.io/abernier/pen/zxzObm


Jedynym problemem jest to animacja dla obrotu nie wydaje się być liniowa ... powodujące próchnicę z animacja położenia (która jest liniowa).

Jak mogę zamienić slerp w animację liniową?

Dziękuję

+0

Myślałem, że slerp utrzymuje stałą prędkość, ale wydaje się, że nie ... – abernier

+0

http://number-none.com/product/Understanding%20Slerp,%20Then%20Not%20Using%20It/slerp powinien być stały prędkość, nlerp nie ma wartości –

+0

@BrendanNie mogę zrozumieć tego, czego nie rozumiem: jeśli slerp ma utrzymywać stałą prędkość (tj.: liniowy), a moja animacja położenia jest liniowa (brak luzowania), dlaczego ten rozpad? – abernier

Odpowiedz

7

W kodzie

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

go zmienić na

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

sposób to zrobić, QA jest taka sama jak kwaterniony aparatu, a żywi się w rachunek różniczkowy. Musi być zmienną stałą.

+1

Doskonały !! Działa świetnie: http://codepen.io/abernier/pen/LEjPBX, dziękuję! Miej tę nagrodę :) – abernier

+0

Cieszę się, że to ci pomogło :-) – vals