Verwenden von Tween zum Animieren einer Kamera

Question

Ich versuche, die Kameradrehung zu vereinfachen, um ein ausgewähltes Objekt in einem Diagramm anzuzeigen.

Bisher habe ich

fourd.render_loop.push(() => TWEEN.update()); 
fourd.intersect_callback = function(vertex){ 
    console.log(vertex); 
    var camera = fourd._internals.camera; 
    var start = new THREE.Euler().copy(camera.rotation); 
    camera.lookAt(vertex.position); 
    var end = new THREE.Euler().copy(camera.rotation); 
    camera.rotation.copy(start); 
    var tween = new TWEEN.Tween(camera.rotation) 
     .to(end, 600) 
     .easing(TWEEN.Easing.Quadratic.In) 
     .start(); 
}; 

wo render_loop einfach ist eine Sammlung von Funktionen in der Schleife machen genannt. Ich weiß nicht, was mir fehlt, aber ich erhalte eine Fehlermeldung:

THREE.Euler: .setFromRotationMatrix() gegeben ungestützt Reihenfolge: NaN

Answer 1

Sie können die Ausrichtung der Kamera tweenen (oder Rotation) Um dies zu erreichen, ist es am einfachsten, stattdessen die Quaternion der Kamera zu tweenen.

var dummy = new THREE.Camera(); // create these once and reuse 
var qStart = new THREE.Quaternion(); 
var qEnd = new THREE.Quaternion(); 

. . . 

// tween 
var time = { t: 0 }; 

new TWEEN.Tween(time) 
    .to({ t : 1 }, 1000) 
    .easing(TWEEN.Easing.Linear.None) 
    .onStart(function() { 

     dummy.position.copy(camera.position); 
     dummy.lookAt(point); // point is your target Vector3 

     qStart.copy(camera.quaternion); 

     qEnd.copy(dummy.quaternion); 

    }) 
    .onUpdate(function() { 

     THREE.Quaternion.slerp(qStart, qEnd, camera.quaternion, time.t); 

    }) 
    .onComplete(function() { 

     camera.quaternion.copy(qEnd); // so it is exact 

    }) 
    .start(); 

three.js r.88