Javascript 使用Tween设置摄影机动画

Javascript 使用Tween设置摄影机动画,javascript,three.js,tween.js,Javascript,Three.js,Tween.js,我正在尝试减轻相机旋转,以查看图形中的选定对象 到目前为止,我已经 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)

我正在尝试减轻相机旋转,以查看图形中的选定对象

到目前为止,我已经

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();
};
其中render_loop只是在render循环中调用的函数的集合。我不知道我遗漏了什么,但我得到了一个错误:


三.Euler:.setFromRotationMatrix()给定不支持的顺序:NaN

您可以在摄影机的方向(或旋转)之间切换,但要执行此操作,最简单的方法是在摄影机的四元数之间切换

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

您可以在摄影机的方向(或旋转)之间切换,但要做到这一点,最简单的方法是在摄影机的四元数之间切换

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

你能创建一个实时代码示例吗?你能创建一个实时代码示例吗?