Three.js - 使用 Tween.js 实现动画效果

最新推荐文章于 2025-03-04 09:26:42 发布

「已注销」

最新推荐文章于 2025-03-04 09:26:42 发布

阅读量1w

点赞数

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82344171

版权

本文介绍了如何利用Three.js库和Tween.js插件实现动画效果。Tween.js是一个用于定义和计算属性值过渡的库，它可以自动生成起始值到结束值之间的中间值。通过示例代码，展示了如何设置对象属性在指定时间内平滑变化，以及如何配置不同的缓动效果。在Three.js粒子系统的场景下，应用Tween.js使粒子上下移动，为视觉呈现增加了动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tween.js是一个小型的javaScript库，其github地址是https://github.com/tweenjs/tween.js 通过这个插件可以是用来定义，某个属性值之间的过渡，自动计算出起始值和结束值之间的所有中间值，这个过程叫做tweening补间。
示例：
https://ithanmang.gitee.io/threejs/home/201808/20180829/05-animation-tween.html
引入库文件：

<script src="../../libs/tween/Tween.js"></script>

例如：将一个网格x轴上的位置，在一秒内从10递减到3

let tween = new TWEEN.Tween({
   x:10}).to({
   x:3}, 1000);
tween.easing(TWEEN.Easing.Elastic.InOut);
tween.onUpdate(function () {
   
	// update the mesh
});

上面的例子中创建了一个TWEEn.Tween对象，这个对象可以保证x属性在1000毫秒之内，从10变化到3，通过Tween.js还可以在指定时间内属性变化方式，是线性的还是指数型。
属性值在指定时间内的变化称为easing缓动，在Tween.js中可以使用easing()函数来配置缓动效果。
示例中使用上一节的粒子系统的例子，实现的效果是，让所有的粒子来回向上和向下移动，通过下面这段代码可以实现

let position = {
   y: 1};

let tween = new TWEEN.Tween(position).to({
   y:0}, 5000);
tween.easing(TWEEN.Easing.Sinusoidal.InOut);

let tweenBcak = new TWEEN.Tween(position).to({
   y:1}, 5000);
tweenBcak.easing(TWEEN.Easing.Sinusoidal.InOut);

tween.chain(tweenBcak);
tweenBcak.chain(tween);

// 获取顶点个数
let count = geometry.getAttribute('position').count;

let onUpdate = function () {
   

   let y = this.y;

   let vertexs = [];

   for (let i = 0; i < count; i++ ) {
   

       vertexs.push(geometry.localPosition[i * 3] );
       vertexs.push(((geometry.localPosition[i * 3 + 1] +  3.22544) * y) -  3.22544);
       vertexs.push(geometry.localPosition[i * 3 + 2]);

   }

   geometry.getAttribute('position').array = new Float32Array(vertexs);
   geometry.getAttribute('position').needsUpdate = true;

};

tween.onUpdate(onUpdate);
tweenBcak.onUpdate(onUpdate);

tween.start()

最低0.47元/天解锁文章