three.js学习笔记 用Tween.js做动画

  Tween.js 可以定义某个属性在两个值之间过渡。我们可以通过Tween.js控制我们的camera(相机)进行漫游或是控制物体或是粒子进行补间动画的操作。

  添加补间动画

1.定义要控制的属性

var option = {
	px: camera.position.x,
	pz: camera.position.z
};

我们这里控制camera(相机)的x,z轴坐标。

2.实例化tween对象

var tween = new TWEEN.Tween(option)
		.to({
		        px: [-50, -40, -40, -50, -50, -50, -50, -50],
			pz: [-40, -40, -40, -40, -50, -50, -40, -40]
		}, 10000)
		.onUpdate(function() {
			camera.position.x = this.px;
			camera.position.z = this.pz;
		})
		.delay(1000)
		.start();

 tween属性：.to 控制属性过渡的中间值 10000表示中间值个数有10000个

                        .update 控制过渡时候的操作

                        .delay 控制每次动画开始的时延

                        .start 开始动画

可以调用chain()函数使动画循环播放或是几个动画连续播放。

 3.刷新动画

function render() {
		TWEEN.update();
		requestAnimationFrame(render);
		renderer.render(scene, camera);
				
}

完整代码：

fork me on github blog:   https://chenjy1225.github.io/