Three.js学习笔记-Tween.js插件

TweenJS中文文档了解插件的API

缓动函数

• Linear：线性匀速运动效果；
• Quadratic：二次方的缓动（t^2）；
• Cubic：三次方的缓动（t^3）；
• Quartic：四次方的缓动（t^4）；
• Quintic：五次方的缓动（t^5）；
• Sinusoidal：正弦曲线的缓动（sin(t)）；
• Exponential：指数曲线的缓动（2^t）；
• Circular：圆形曲线的缓动（sqrt(1-t^2)）；
• Elastic：指数衰减的正弦曲线缓动；
• Back：超过范围的三次方缓动（(s+1)t^3 – st^2）；
• Bounce：指数衰减的反弹缓动。
  每个效果都分三个缓动方式，分别是：
  In：从0开始加速的缓动，也就是先慢后快；
  Out：减速到0的缓动，也就是先快后慢；
  InOut：前半段从0开始加速，后半段减速到0的缓动。

基本操作

var testTween = new TWEEN.Tween({t: 0}).to({t: 0.1},3000).easing(TWEEN.Easing.Bounce.Out).onUpdate(
				function(){
					tTM.material.opacity = this.nOpacity;
					for(var i = 0;i < len;i++){
						if( i%4 < 2){
							tTM.morphTargetInfluences[i] = this.t;
						}
					}
				}
			);
		testTween.start();
...
var animate = function(){				
				requestAnimationFrame( animate );
				TWEEN.update(); //重要
				...
				}
	animate();

修改立方体的各个顶点

var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } ); //设置是可以发生形变的
	// construct 8 blend shapes
	for ( var i = 0; i < 8; i ++ ) {
		var vertices = [];
		for ( var v = 0; v < geometry.vertices.length; v ++ ) {
				vertices.push( geometry.vertices[ v ].clone() );
				if ( v === i ) {
					vertices[ vertices.length - 1 ].x *= 2;
					vertices[ vertices.length - 1 ].y *= 2;
					vertices[ vertices.length - 1 ].z *= 2;
					}
				}
			geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );
			}

			geometry = new THREE.BufferGeometry().fromGeometry( geometry );
			mesh = new THREE.Mesh( geometry, material );
			scene.add( mesh );

...
for(var i = 0; i < ;i++){
	mesh.morphTargetInfluences[i] = value; //value介于0-1，vertices中各个点的倍数
}

实例部分

var tTC = new THREE.BoxGeometry(1,1,1);
			var tTMa = new THREE.MeshBasicMaterial({color: 0x22ffff,morphTargets: true,transparent: true,opacity: 0.4});
			var vertices = [],len = tTC.vertices.length;
			
			for ( var v = 0; v < len; v ++) {
				vertices.push( tTC.vertices[ v ].clone() );
				if ( v%4 < 2 ) {
					vertices[ v ].y += 3.5;
				}
				tTC.morphTargets.push( { name: "target" + v, vertices: vertices } );
			}
				tTC = new THREE.BufferGeometry().fromGeometry( tTC );
			var tTM = new THREE.Mesh( tTC, tTMa );
				tTM.position.set(-2,0.5,0);
				scene.add(tTM);
			var nOpacity = tTM.material.opacity;
			var t;
			var testTween = new TWEEN.Tween({nOpacity: 0.4,t: 0}).to({nOpacity: 1,t: 0.1},3000).easing(TWEEN.Easing.Bounce.Out).onUpdate(
				function(){
					tTM.material.opacity = this.nOpacity;
					for(var i = 0;i < len;i++){
						if( i%4 < 2){
							tTM.morphTargetInfluences[i] = this.t;
						}
					}
				}
			);
		testTween.start();

//获取轨道控制器的摄像机
var targetZoom = orbit.object;
var tweenZoomCamera = new TWEEN.Tween(targetZoom).to({zoom: 4}, 1000
			).easing(TWEEN.Easing.Linear.None).onUpdate(function(){
					orbit.object.zoom = this.zoom;
					orbit.object.updateProjectionMatrix();
				}).onComplete(function(){
					orbit.object.zoom = 4;
				});
				//连接上一个动画，按照顺序执行
		tweenRotationOrbit.chain(tweenZoomCamera);
		tweenRotationOrbit.start();