tweenjs-实现threejs的转场动画（基于vue）

最新推荐文章于 2024-10-17 14:21:20 发布

String佳佳

最新推荐文章于 2024-10-17 14:21:20 发布

阅读量1.9k

点赞数 2

分类专栏： threejs

本文链接：https://blog.csdn.net/weixin_44171757/article/details/119755199

版权

threejs 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

注意！文章主讲tweenjs的使用，省去了threejs部分的代码，请自行添加！

参考博文

链式补间：tween.chain

如果有多组补间动画，想要a组动画结束后立即启动b组动画，则需要使用tweena.chain(tweenb)

效果图:

在这里插入图片描述

1、引入tweenjs

import * as TWEEN from '@/assets/js/Tween'

2、使用

<el-button @click="action">开始运动</el-button>


data：
p1: { x: 0, y: 2, z: 1000 }

methods：
action () {
      var tweena = this.cameraCon({ x: 20, y: 100, z: 100 }, 4000)
      var tweenb = this.cameraCon({ x: 200, y: 50, z: -100 }, 9000)
      //var tweenc = this.cameraCon({ x: -20, y: 100, z: 100 }, 9000)
      //var tweend = this.cameraCon({ x: 0, y: 50, z: 200 }, 4000)
      tweena.chain(tweenb)
      //tweenb.chain(tweenc)
      //tweenc.chain(tweend)
      // tweend.chain(tweena)
      tweena.start()
}，
cameraCon (p2, time) {
      var tween1 = new TWEEN.Tween(this.p1).to(p2, time).easing(TWEEN.Easing.Quadratic.InOut)
      tween1.onUpdate(() => {
        this.camera.position.set(this.p1.x, this.p1.y, this.p1.z)
        this.camera.lookAt(0, 0, 0)
        // this.controls.target.set(0, 0, 0) // 确保镜头移动后，视觉中心还在圆点处
        // this.controls.update()
      })
      return tween1
},
render(){  一定要在动画循环函数里面更新TWEEN！
	  requestAnimationFrame(this.animate)
      TWEEN.update()
      this.renderer.render(this.scene, this.camera)
}