Tween.js在Three.js中的应用：为3D动画添加流畅过渡

于 2024-06-03 12:01:47 发布
阅读量1.4k 收藏 18
点赞数 22
分类专栏： three.js 文章标签： sass elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42696432/article/details/139410243
版权

前言

在Web开发领域，Three.js已经成为构建精彩3D内容的首选库之一。它让开发者能够轻松地在浏览器中创建和展示复杂的3D场景。然而，要让这些场景栩栩如生，平滑的动画效果是必不可少的。这就引入了Tween.js——一个轻量级但功能强大的JavaScript库，专门用于在Web应用中创建平滑的补间动画。本文将探讨如何在Three.js项目中集成并利用Tween.js来增强3D对象的动画表现。

简介

Tween.js 是一个简单易用的库，专注于数值的平滑插值(interpolation)，非常适合于实现动画效果。无论是简单的颜色渐变、对象位置移动，还是复杂的序列动画，Tween.js都能轻松应对。在与Three.js结合时，它能显著提升3D场景的互动性和视觉吸引力。

安装Tween.js

官方地址为：https://github.com/tweenjs/tween.js

npm install tween.js

当然three.js包中自带的包含tween.js，其中three.js得tween地址为：node_moduls>three>examples>jsm>libs>tween.module.js

导入补间动画

import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

tween.js的核心方法

.to()方法

        控制补间的运动形式及方向.to(), 当tween启动时，Tween.js将读取当前属性值并 应用相对值来找出新的最终值。

.start(time) 方法

        补间动画启动的方法，.start方法接受一个参数 time , 如果加入这个参数,那么补间不会立即开始直到特定时刻才会开始

.stop()方法

        关闭补间动画 .stop() , 关闭这个正在执行的补间动画。

.repeat()方法

        使用该方法可以使动画重复执行，它接受一个参数 , 描述需要重复多少次。

.delay()方法

        延迟执行动画的方法.delay(), 接受一个参数用于控制延迟的具体时间，表示延迟多少时间后才开始执行动画。

.pause()方法

        暂停动画.pause() ， 暂停当前补间运动，与resume方法配合使用。

.resume()方法

        恢复动画 .resume() ， 恢复这个已经被暂停的补间运动。

.yoyo() 方法

        控制补间重复的模式 .yoyo(), 这个功能只有在使用repeat时才有效果 ,该动画像悠悠球一样来回运动 , 而不是重新开始。

.update()方法

更新补间动画 TWEEN.update() , 动态更新补间运动一般配合 window.requestAnimationFrame 使用

.chain()方法

        链式补间动画，当我们顺序排列不同的补间动画时，比如我们在上一个补间结束的时候立即启动另外一个补间动画，使用 .chain() 方法来做。

//tweenB动画在tweenA动画完成后执行
tweenA.chain(tweenB);

在一些情况下，可能需要将多个补间链接到另一个补间，以使它们（链接的补间）同时开始动画：

tweenA.chain(tweenB,tweenC);

注意：调用 tweenA.chain（tweenB） 实际上修改了tweenA，所以tweenA总是在tweenA完成时启动。 chain的返回值只是tweenA，不是一个新的tween。

.getAll()方法

        获取所有的补间组 TWEEN.getAll()。

.removeAll()方法

        删除所有的补间组 TWEEN.removeAll()。

.add()方法

        新增补间 TWEEN.add(tween) ，添加一个特定的补间 var tween=new TWEEN.Tween()。

.remove()方法

        删除补间 TWEEN.remove(tween)，删除一个特定的补间var tween=new TWEEN.Tween()。

.Group()方法

        新增一个补间组，var Group=TWEEN.Group() , new TWEEN.Tween({ x: 1 }, Group) ,将已经配置好的补间动画进行分组 , TWEEN.update()和TWEEN.removeAll() , 不会影响到已经分好组的补间动画。

tween.js回调函数

.onStart（）补间动画开始时执行

        补间动画开始时执行,只执行一次，new TWEEN.Tween().onStart((obj)=>{}) , 补间开始时执行,只执行一次, 当使用repeat()重复补间时,不会重复运行 onStart((obj)=>{}) obj补间对象作为第一个参数传入。

.onStop() 停止补间动画时执行

        new TWEEN.Tween().onStop((obj)=>{}) , 当通过 onStop() 显式停止补间时执行，但在正常完成时并且在停止任何可能的链补间之前执行补间,onStop((obj)=>{}) obj补间对象作为第一个参数传入。

.onUpdate() 每次更新时执行

        new TWEEN.Tween().onUpdate((obj)=>{}) , 每次补间更新时执行，返回实际更新后的值， onUpdate((obj)=>{}) obj补间对象作为第一个参数传入。

.onComplete() 补间动画完成时执行

        new TWEEN.Tween().onComplete((obj)=>{}) , 当补间正常完成（即不停止）时执行 , onComplete((obj)=>{}) obj 补间对象作为第一个参数传入。

.onRepeat() 重复补间动画时执行

        new TWEEN.Tween().onRepeat((obj)=>{}) , 当补间动画完成，即将进行重复动画的时候执行 ,onComplete((obj)=>{}) obj 补间对象作为第一个参数传入。

TWEEN.Easing 缓动函数

        tween.js为我们封装好了常用的缓动动画，如线性，二次，三次，四次，五次，正弦，指数，圆形，弹性，下落和弹跳等缓动函数， 以及对应的缓动类型：In (先慢后快) ；Out (先快后慢) 和 InOut (前半段加速，后半段减速)
Tween.js在Three.js中的应用：为3D动画添加流畅过渡

常见缓动动画

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

以上每个效果都分三个缓动类型，分别是：
easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。

Tween.JS和Three.js示例

Tween.js在Three.js中的应用：为3D动画添加流畅过渡

  1. 导入动画组件库
import * as TWEEN from "three/examples/jsm/libs/tween.module.js"
  1. 创建一个圆柱几何
const sphere1 =  new THREE.Mesh(
new THREE.CylinderGeometry(1, 1, 1, 64),
  new THREE.MeshBasicMaterial( {color: 0xffff00} )
)
sphere1.position.set(0, 10, 0)
sphere1.position.x = 0      
sphere1.position.y = 0      
sphere1.position.z = 0
sphere1.scale.set(-1, -1, 1) 
sphere1.rotation.z = -Math.PI/2 
this.scene.add(sphere1)
  1. 创建tween实例和tween动画
const tween = new TWEEN.Tween(sphere1.position)      
const tweenXZ = new TWEEN.Tween(sphere1.rotation)
const tween2 = new TWEEN.Tween(sphere1.position)
const tween3 = new TWEEN.Tween(sphere1.position)
const tween4 = new TWEEN.Tween(sphere1.position)
//移动
tween.to({x:4},300).onUpdate(()=>{})
//旋转
tweenXZ.to({y:-Math.PI/2},150).onUpdate(()=>{})
//移动
tween2.to({y:-4},300).onUpdate(()=>{})
//移动
tween3.to({x:0},300).onUpdate(()=>{})
//移动
tween4.to({y:0},300).onUpdate(()=>{})
// 一边移动一边旋转，动画在tween动画完成后执行tween2,并带有旋转效果
tween.chain(tween2,tweenXZ)
tween2.chain(tween3,tweenXZ)
tween3.chain(tween4,tweenXZ)      
tween4.chain(tween,tweenXZ)
  1. 设置动画速度运行曲线
tween.easing(TWEEN.Easing.Quadratic.Inout)
  1. 开启动画
 tween.start()
  1. 开启动画后还不能完全动起来，还需要逐帧更新动画
 animate() {
      this.controls.update()
      TWEEN.update()
      requestAnimationFrame( this.animate );
      this.renderer.render( this.scene, this.camera );
    }

完整代码：

<template>
  <div id="container">
    
  </div>
</template>

<script>
import * as THREE from 'three'
// webGL兼容
import WebGL from 'three/examples/jsm/capabilities/WebGL.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
//导入RGBRload加载器
import { RGBELoader } from  "three/examples/jsm/loaders/RGBELoader.js"
//导入场景模型加载器
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js"
//导入模型解压器
import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js"
//导入Tween动画组件库
import * as TWEEN from "three/examples/jsm/libs/tween.module.js"
export default {
  name: 'Three9',
  components: {
  },
  mounted(){
    this.init()
  },
  data(){
    return {
      camera: null,  //相机对象
      scene: null,  //场景对象
      renderer: null,  //渲染器对象
      mesh: null,  //网格模型对象Mesh
      mesh2:null,
      controls:null, //轨道控制器
      material2:null, //父元素
      planeMesh:null, //平面
      rgbeLoacer:null,
    }
  },
  methods:{
    //随机生成十六进制颜色
    color16(){//十六进制颜色随机
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
			return color;
    },
    init(){
      let container = document.body;
      //创建一个场景
      this.scene = new THREE.Scene()
      //透视摄像机
      this.camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,700)
      //创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      //渲染器尺寸
      this.renderer.setSize( window.innerWidth,  window.innerHeight );    
      
      // 创建三个球
      const sphere1 =  new THREE.Mesh(
        new THREE.CylinderGeometry(1, 1, 1, 64),
        new THREE.MeshBasicMaterial( {color: 0xffff00} )
      )
      sphere1.position.set(0, 10, 0)
      sphere1.position.x = 0      
      sphere1.position.y = 0      
      sphere1.position.z = 0
      sphere1.scale.set(-1, -1, 1) 
      sphere1.rotation.z = -Math.PI/2 
      this.scene.add(sphere1)
      const tween = new TWEEN.Tween(sphere1.position)      
      const tweenXZ = new TWEEN.Tween(sphere1.rotation)
      const tween2 = new TWEEN.Tween(sphere1.position)
      const tween3 = new TWEEN.Tween(sphere1.position)
      const tween4 = new TWEEN.Tween(sphere1.position)
      //移动
      tween.to({x:4},300).onUpdate(()=>{})
      //旋转
      tweenXZ.to({y:-Math.PI/2},150).onUpdate(()=>{})
      //移动
      tween2.to({y:-4},300).onUpdate(()=>{})
      //移动
      tween3.to({x:0},300).onUpdate(()=>{})
      //移动
      tween4.to({y:0},300).onUpdate(()=>{})
      // 一边移动一边旋转，动画在tween动画完成后执行tween2,并带有旋转效果
      tween.chain(tween2,tweenXZ)
      tween2.chain(tween3,tweenXZ)
      tween3.chain(tween4,tweenXZ)      
      tween4.chain(tween,tweenXZ)
      //动画运行速度曲线
      tween.easing(TWEEN.Easing.Quadratic.Inout) 
      tween.start()
      this.scene.background=new THREE.Color(0x999999)
      // 设置相机位置
      this.camera.position.z = 15;   
      this.camera.position.y =2;  
      this.camera.position.x = 2; 
      // 看的方向 
      this.camera.lookAt(0,0,0)
      //添加世界坐标辅助器
      const axesHelper = new THREE.AxesHelper(3) 
      this.scene.add( axesHelper );
      //添加轨道控制器
      this.controls = new OrbitControls(this.camera,this.renderer.domElement)
      //添加阻尼带有惯性
      this.controls.enableDamping = true
      //设置阻尼系数
      this.controls.dampingFactor = 0.05
      //元素中插入canvas对象
      container.appendChild(this.renderer.domElement); 
      if ( WebGL.isWebGLAvailable() ) {
        this.animate();
      } else {
        const warning = WebGL.getWebGLErrorMessage();
        document.getElementById( document.body ).appendChild( warning );
      }
    },
    //旋转起来
    animate() {
      this.controls.update()
      TWEEN.update()
      requestAnimationFrame( this.animate );
      this.renderer.render( this.scene, this.camera );
    }
  }
}
</script>
天生我材必有用_吴用
关注
专栏目录
想要用tween实现相机的移动，three.js渲染的canvas画布上相机位置一点没动，如何解决？？
**My Coding Family**
06-26 1078
ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bugj菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；
tween.js可生成平滑动画效果的js动画库
12-12
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
详解tween.js 中文使用指南
10-18
本篇文章主要介绍了详解tween.js 中文使用指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
threeJs tweenJs
12-19
在游戏开发中将两个物体融合为一个物体进行游戏设计，最方便的一个使用工具
Three.js —— Tween.js 使用文档
最新发布
weixin_50999722的博客
04-09 1727
本文主要为Tween.js动画的基本使用介绍，对Tween.js官方使用文档进行了总结归纳以及three.js + tween.js 的动态案例供大家参考参考。
WEB 3D技术 three.js 补间动画(tween)
weixin_45966674的博客
01-02 2220
我们new 出一个 Tween 对象 他的两个参数 一个是 sphere1 我们写的一个圆形几何体 就要用它动画 然后 position 告诉它动画操作 position字段。然后 修饰动画 to 两个参数 第一个告诉它 我们要改什么 动画 x轴最终变成4 第二个参数告诉它用时 我们这里 1000 一千毫秒 就是一秒。因为 如果要监听动画对象的 update 你两个都要监听 所以 我们直接监听 TWEEN.update就可以了。然后 它每一次的动画效果 我们也是可以事件监听的。
threejs结合tween实现动画效果
popstarqq的博客
12-06 4630
1 渲染一个八卦图，实现尺寸从1增大到2，并伴随着旋转 效果如下 如果用原生js实现上面效果的话，代码如下: 首先创建一个八卦图圆面: // 创建圆面 let texture = new THREE.TextureLoader().load( require(`../../assets/images/bagua.jpeg`) ); let geometry = new THREE.CircleGeometry(20, 150); let mesh=new THREE.Mesh( g.
threejs Tween插件
默茉的博客
04-19 2005
Tween var twe = new TWEEN.Tween(sprite.position) .to({x:600}, time * 16.6) .easing(TWEEN.Easing.Exponential.InOut) ...
Three.js - 使用 Tween.js 实现动画效果
热门推荐
ithanmang
09-03 1万+
tween.js是一个小型的javaScript库，其github地址是https://github.com/tweenjs/tween.js 通过这个插件可以是用来定义，某个属性值之间的过渡，自动计算出起始值和结束值之间的所有中间值，这个过程叫做tweening补间。 示例： http://ithanmang.com/threeJs/home/201808/20180829/05-anima...
three.js学习笔记 用Tween.js做动画
mystery的专栏
01-06 7267
Tween.js 可以定义某个属性在两个值之间过渡。我们可以通过Tween.js控制我们的camera(相机)进行漫游或是控制物体或是粒子进行补间动画的操作。   添加补间动画   1.定义要控制的属性 var option = { px: camera.position.x, pz: camera.position.z }; 我们这里控制camera(相机)的x,z轴
tweenjs动画库配合ThreeJS使用DEMO
12-09
在本文中，我们将深入探讨如何将TweenJS动画库与Three.js结合使用，通过一个实际的DEMO来展示这种结合的应用。TweenJS是一个轻量级的JavaScript库，它提供了平滑的缓动效果，用于对象属性的过渡动画。而Three.js则是...
JS Tween 颜色渐变
10-30
从我写的as tween改写的，基本功能跟as里面写的一样，只是没有扩展特定功能的接口（比如alpha2，move2，size2，color2等接口,这些在as tween里面都有实现）。
使用three.js制作的3D揭示效果.zip
01-06
在本项目中，"使用three.js制作的3D揭示效果.zip"是一个包含使用three.js库创建的3D动画示例的压缩包。three.js是一个基于WebGL的JavaScript库，它使得在网页上创建复杂的3D场景变得简单。下面将详细探讨three.js库...
Tween.js:简单补间课程
05-06
Tween.js使得在JavaScript中添加过渡效果变得简单，无论是在2D还是3D场景中。 补间（Tween）是一种动画技术，它通过在起始值和结束值之间逐步改变对象的属性来创建流畅的运动。在Tween.js中，你可以对各种属性进行...
threejs添加点击事件（给楼宇扫描效果加上点击事件）
weixin_40856652的博客
06-09 3817
threejs、webgl、shader、3D、光墙效果。使用shader实现楼宇扫描效果并添加点击选中效果，three.js添加点击事件
Threejs+Tween完成运镜动画
weixin_48070278的博客
01-06 632
记录一下Three和Tween一起使用完成相机运镜的效果
tween.js+three.js： 使用文档 --- Three.js
weixin_1095的博客
01-24 1173
目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：// 1 设置动画const action=new TWEEN.Tween({x:0,y:0,z:0}) // 初始值.to({x:20,y:50,z:30},1000) // 目标值，毫秒数// 在动画执行期，不断被调用。其中obj为"to"里面的内容// x:20}).start()// 2 启动动画// 更新动画。
TWEEN在ThreeJs的基本使用
m0_53770605的博客
11-11 428
/如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()// 将webgl渲染的canvas内容添加到body。// 设置相机投影矩阵的宽高比和视口大小。// 设置动画位置，设置动画次数，设置动画往返。// 使用渲染器，通过相机将场景渲染进来。// 定义窗口大小改变时的回调函数。//在渲染函数中渲染TWEEN。// 将几何体添加到场景中。// 设置渲染的尺寸大小。// 添加坐标轴辅助器。// 导入轨道控制器。// 引入tween。// 创建轨道控制器。
Three.js - tween.js 补间动画
ithanmang
07-18 3111
Tween.js 是一个小型的JavaScript库。
three.js 使用tween.js 做运动动画
05-10
是的，Three.js可以使用Tween.js库来制作运动动画。Tween.js是一个简单易用的JS库，它可以让你轻松地控制和管理动画过程。在Three.js中，你可以使用Tween.js来控制对象的位置、旋转、缩放等属性的变化。下面是一个使用Tween.js实现简单动画的例子： ```javascript // 创建一个Tween对象 var tween = new TWEEN.Tween(object.position) .to({ x: 100, y: 100, z: 100 }, 2000) // 设置目标位置和时间 .easing(TWEEN.Easing.Quadratic.InOut) // 设置缓动函数 .onUpdate(function() { // 动画过程中更新对象的位置 object.position.x = this.x; object.position.y = this.y; object.position.z = this.z; }) .start(); // 开始动画 ``` 在这个例子中，我们创建了一个Tween对象，设置了目标位置、时间和缓动函数，并在动画过程中更新了对象的位置。最后，我们调用start()方法开始动画。注意，我们还需要在每一帧中调用TWEEN.update()方法，让Tween.js更新动画状态。 ```javascript function animate() { requestAnimationFrame(animate); TWEEN.update(); // 更新动画状态 renderer.render(scene, camera); } ``` 除了控制对象的位置，你还可以使用Tween.js来控制对象的旋转、缩放等属性的变化。只需要将Tween对象的目标值设置为一个包含相应属性的对象即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值