如何使用 TWEEN 动画相机的位置答案

【问题标题】：How to use TWEEN to animate the camera's position如何使用 TWEEN 动画相机的位置
【发布时间】：2017-12-28 09:30:38
【问题描述】：

function moveCameraTo(position, duration) {
           var tween =  new TWEEN.Tween( camera.position )
                .to( position, duration )
                .easing(TWEEN.Easing.Linear.None)
                .onUpdate(function () {
                    camera.position = new THREE.Vector3().copy(position)
                    camera.lookAt({x:0,y:0,z:0})
                })
                .onComplete(function () {
                    camera.lookAt({x:0,y:0,z:0})
                })
                .start()
        }

我使用这种方法将相机移动到特定位置，并且在开始时正确移动了相机。然后 TrackballControls 不起作用，并且控制台出现错误。

TrackballControls.js:318 Uncaught TypeError: _this.object.position.addVectors is not a function
at THREE.TrackballControls.update (TrackballControls.js:318)
at animate ((index):456)

【问题讨论】：

免费提示：（1）不要在一个紧密的循环中调用new。想想你实例化了多少 Vector3 对象。 (2) lookAt() 的 arg 必须是 Vector3。 (3) object.position = newValue 不是有效的three.js 代码。请改用object.position.copy( value )。

标签： javascript three.js tween trackball

【解决方案1】：

相机的位置是不可变的，所以不能直接补间。

但是，您可以使用 Tween 使用如下图所示的模式为相机的位置设置动画。如果您正在使用其中之一，最好禁用相机控件，然后在完成时重新启用它。

function tweenCamera( targetPosition, duration ) {

    controls.enabled = false;

    var position = new THREE.Vector3().copy( camera.position );

    var tween = new TWEEN.Tween( position )
        .to( targetPosition, duration )
        .easing( TWEEN.Easing.Back.InOut )
        .onUpdate( function () {
            camera.position.copy( position );
            camera.lookAt( controls.target );
        } )
        .onComplete( function () {
            camera.position.copy( targetPosition );
            camera.lookAt( controls.target );
            controls.enabled = true;
        } )
        .start();

}

var targetPosition = new THREE.Vector3( 10, 10, 10 );
var duration = 5000;

tweenCamera( targetPosition, duration );

请务必在动画循环中调用 TWEEN.update()。

three.js r.86

【讨论】：