VUE+Three使用补间动画TweenJs实现动态切换相机位置

MonkeyB_B

已于 2022-09-06 11:00:30 修改

阅读量853

点赞数

分类专栏： Three 文章标签：动画 react.js

于 2022-09-06 10:58:33 首次发布

本文链接：https://blog.csdn.net/MonkeyB_B/article/details/126720586

版权

1、安装tweenJs

npm i @tweenjs/tween.js@^18

2、引入tween.js

import TWEEN from '@tweenjs/tween.js'

3、创建并执行动画

  // 相机切换动画
  // controls的target就是场景的旋转中心
  // 修改相机的位置就可以变换场景的显示效果
  animateCamera(oldP, oldT, newP, newT, time, callBack) {
   
    var _this = this
    if (TWEEN) {
   
      // 初始化相机以及控制器的target位置，一般为当前位置
      var tween = new TWEEN.Tween({
   
        x1: oldP.x, // 相机x
        y1: