使用tween.js来制作three.js相机转场动画

使用tween.js来制作three.js相机转场动画

关于tween.js在之前的文章中有介绍, three.js补间动画Tween.js和选择物体
@tweenjs/tween.js-tween.js-TweenJS-TweenMax

tween.js在three.js中有很多使用场景,比如粒子动画,相机转场动画,物体运动。
这里我们使用tween.js的 chain来制作相机转场动画。

tween.chain

当你顺序排列不同的补间时,事情会变得有趣,例如在上一个补间结束的时候立即启动另外一个补间。我们称这为链式补间,这使用 chain 方法去做。因此,为了使 tweenB 在 tewwnA 启动:
tweenA.chain(tweenB);
或者,对于一个无限的链式,设置tweenA一旦tweenB完成就开始:
tweenA.chain(tweenB);
tweenB.chain(tweenA);
转场动画原理很简单,通过tween.js不断的去更新相机的位置和视点即可。直接上代码实验,写4个tween,组成一个无限循环。

var tweena = cameraCon({x:0,y:10,z:20},{x:20,y:0,z:0},4000);
var tweenb = cameraCon({x:20,y:0,z:0},{x:0,y:10,z:-20},4000);
var tweenc = cameraCon({x:0,y:10,z:-20},{x:-20,y:0,z:0},4000);
var tweend = cameraCon({x:-20,y:0,z:0},{x:20,y:0,z:0},4000);
tweena.chain(tweenb);
tweenb.chain(tweenc);
tweenc.chain(tweend);
tweend.chain(tweena);
tweena.start();

function cameraCon(p1={x:0,y:0,z:0},p2={x:30,y:30,z:30},time=6000) {
    var tween1 = new TWEEN.Tween(p1).to(p2,time||200000).easing(TWEEN.Easing.Quadratic.InOut);
    var update = function () {
        camera.position.set(p1.x,p1.y,p1.z);
    };
    tween1.onUpdate(update);
    return tween1;
}

跑一遍代码,发现只有在第一次的时候是正确的,后面循环相机就是跳动。仔细分析了之后找到了问题所在,于是把p1提到全局变量中。

var p1 = {x:0,y:10,z:20};
var tweena = cameraCon({x:20,y:2,z:0},9000);
var tweenb = cameraCon({x:0,y:10,z:-20},9000);
var tweenc = cameraCon({x:-20,y:2,z:0},4000);
var tweend = cameraCon({x:0,y:10,z:20},4000);
tweena.chain(tweenb);
tweenb.chain(tweenc);
tweenc.chain(tweend);
tweend.chain(tweena);
tweena.start();

function cameraCon(p2={x:10,y:30,z:10},time=6000) {
    var tween1 = new TWEEN.Tween(p1).to(p2,time).easing(TWEEN.Easing.Quadratic.InOut);
    var update = function () {
        camera.position.set(p1.x,p1.y,p1.z);
    };
    tween1.onUpdate(update);
    return tween1;
}

效果如下:
在这里插入图片描述
基本思路搞定了,剩下的就是自由发挥时间了。sin,cos,tan三角函数走起,转场效果就会更加圆滑了。
一些常用的补间函数:tween.easing(TWEEN.Easing.Sinusoidal.InOut);
在这里插入图片描述


关于tween.js 的参数有一个问题

var coords = { x: 0, y: 0 }; // 起始点 (0, 0)
var tween = new TWEEN.Tween(coords) // 创建一个新的tween用来改变 'coords'
    .to({ x: 300, y: 200 }, 1000) // 在1s内移动至 (300, 200)

比如上面代码:coords可以是一个对象(不带嵌套的对象),或者一个数组[1,2]。但是不能是一个变量 coords=x,也不能是对象中嵌套对象既:{x:{x1:0}}。
想去看下源码,也没看懂具体的原因。估计是因为变量属于值类型,tween需要的是一个引用类型的。而数组和对象就是,但是他用的是浅拷贝,所以嵌套的对象就不行了。

发布了231 篇原创文章 · 获赞 98 · 访问量 14万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览