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

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

@tweenjs/tween.js-tween.js-TweenJS-TweenMax

tween.js在three.js中有很多使用场景，比如粒子动画，相机转场动画，物体运动。

### tween.chain

tweenA.chain(tweenB);

tweenA.chain(tweenB);
tweenB.chain(tweenA);

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 update = function () {
camera.position.set(p1.x,p1.y,p1.z);
};
tween1.onUpdate(update);
return tween1;
}


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 update = function () {
camera.position.set(p1.x,p1.y,p1.z);
};
tween1.onUpdate(update);
return tween1;
}


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)


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