Tween을 사용하여 카메라에 애니메이션 적용

Question

그래프에서 선택한 객체를보기 위해 카메라 회전을 쉽게하려고합니다. render_loop 단순히 렌더링 루프에서 호출되는 함수의 집합입니다

지금까지, 나는

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

있습니다. 내가 누락 모르겠어요,하지만 난 오류가 받고 있어요 :

THREE.Euler : 지원되지 않는 위해 주어진 .setFromRotationMatrix() : NaN의

Answer 1

당신은 카메라의 방향 (또는 회전)을 트위닝 할 수 있습니다 , 그렇게하려면 카메라의 쿼터니언을 트위닝하는 것이 가장 간단합니다.

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