three.js-tween-camera相机视角平滑转换

camera相机视角平滑过渡转换

使用tween特性进行视角的平滑过渡。

过渡方式	释义
Linear	线性匀速运动效果
Quadratic	二次方的缓动（t^2）
Cubic	三次方的缓动（t^3）
Quartic	四次方的缓动（t^4）
Quintic	五次方的缓动（t^5）
Sinusoidal	正弦曲线的缓动（sin(t)）
Exponential	指数曲线的缓动（2^t）
Circular	圆形曲线的缓动（sqrt(1-t^2)）
Elastic	指数衰减的正弦曲线缓动
Back	超过范围的三次方缓动（(s+1)t^3 – st^2）
Bounce	指数衰减的反弹缓动

缓动方向	释义
easeIn	从0开始加速的缓动，也就是先慢后快
easeOut	减速到0的缓动，也就是先快后慢
easeInOut	前半段从0开始加速，后半段减速到0的缓动

rotate(){
    
    
    let that = this;
    let oldCameraPosition = {
    
    
      x:that.camera.position.x,
      y:that.camera.position.y,
      z:that.camera.position.z
    }
    let tween1 = new TWEEN.Tween({
    
    
      x:oldCameraPosition.x,
      y:oldCameraPosition.y,
      z:oldCameraPosition.z,
    });
    tween1.to({
    
    
      x:-92,
      y:60,
      z:192
    },1000);
    tween1.onUpdate(obj => {
    
    
      that.camera.position.x = obj.x;
      that.camera.position.y = obj.y;
      that.camera.position.z = obj.z;
    });
    tween1.easing(TWEEN.Easing.Sinusoidal.InOut);
    tween1.start();
    tween1.onComplete(function () {
    
    
      console.log('tween--finish')
    });
},

定义完TWEEN的过渡效果之后，需在animate里调用Tween.update().

animate(){
    
    
    TWEEN.update();
}