vue+threejs+tweenjs 摄像头动画聚焦模型

npm install --save @tweenjs/tween.js

import TWEEN from '@tweenjs/tween.js'
    
//模型的聚焦最佳位置
var target1 = geometry.position
var newPos = new THREE.Vector3(target1.x, target1.y, target1.z);
newPos.y = newPos.y+3.0
newPos.z = newPos.z+2.0
var targetPos = new THREE.Vector3(target1.x, target1.y, target1.z);
targetPos.y = targetPos.y+1
this.animateCameraFun(this.camera.position,this.controls.target,newPos,targetPos)


animate(){
    requestAnimationFrame(this.animate);
    this.renderer.render(this.scene, this.camera);
    this.labelRenderer.render(this.scene, this.camera);
    TWEEN.update();
    if (this.mixer !== null) {
       // 更新混合器相关的时间
       this.mixer.update(this.clock.getDelta());
    }
},
//摄像头聚焦方法
animateCameraFun(oldPos,oldTarget,newPos,newTarget){
      let that = this
      // 使用tween动画
      var tween = new TWEEN.Tween({
        x1: oldPos.x, // 相机x
        y1: oldPos.y, // 相机y
        z1: oldPos.z, // 相机z
        x2: oldTarget.x, // 控制点的中心点x
        y2: oldTarget.y, // 控制点的中心点y
        z2: oldTarget.z, // 控制点的中心点z
      });
      tween.to({
        x1: newPos.x,
        y1: newPos.y,
        z1: newPos.z,
        x2: newTarget.x,
        y2: newTarget.y,
        z2: newTarget.z,
      }, 1000);
      tween.easing(TWEEN.Easing.Cubic.InOut);
      tween.onUpdate(function (pos){
          that.camera.position.x = pos.x1;
          that.camera.position.y = pos.y1;
          that.camera.position.z = pos.z1;
          that.controls.target.x = pos.x2;
          that.controls.target.y = pos.y2;
          that.controls.target.z = pos.z2;
          that.controls.update();
      })
      // 开始动画
      tween.start()
    },