1，Threejs中使用Tweenjs实现动画
在Threejs中使用Tweenjs很简单，步骤主要是引入Tweenjs，写动画，动画刷新。
如下示例：
<body> <div id="dom"></div> <script type="text/javascript" src="libs/three.js"></script> <script type="text/javascript" src="libs/Tween.min.js"></script> <script type="text/javascript"> var camera; var renderer; function init() { // 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。 var scene = new THREE.Scene(); // 创建一个摄像机，它定义了我们正在看的地方 camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.x = 180; camera.position.y = 80; camera.position.z = 90; camera.lookAt(scene.position); // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景 renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, }); renderer.setSize(window.innerWidth, window.innerHeight); // 在屏幕上显示坐标轴 var axes = new THREE.AxesHelper(10000); scene.add(axes); var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(function(){ console.log(this.x) }) // .start(); // 将呈现器的输出添加到HTML元素 document.getElementById("dom").appendChild(renderer.domElement); // 启动动画 renderScene(); function renderScene() { TWEEN.update(); // 使用requestAnimationFrame函数进行渲染 requestAnimationFrame(renderScene); renderer.render(scene, camera); } // 渲染的场景 renderer.render(scene, camera); } window.onload = init; </script> </body>
2， Tween.js使用说明文档
Tween.js是一个轻量级的JavaScript库，可以从https://github.com/sole/tween.js/下载。
通过这个库可以很容易地实现某个属性在两个值之间进行过渡，而且起始值和结束值之间的所有中间值都会自动计算出来，这个过程叫作tweening（补间）。
var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000) .easing(TWEEN.Easing.Elastic.InOut) .onUpdate(function(){ // update the mesh }) .start();
上述代码创建了TWEEN.Tween对象，这个对象会确保x属性值在10000毫秒内从10变化到3。通过Tween.js，你还可以指定属性值是如何变化的，是线性的、指数性的，还是其他任何可能的方式（完整列表可以参照http://sole.github.io/tween.js/examples/03_graphs.html）。
属性值在指定时间内的变化被称为easing（缓动），在Tween.js中你可以使用easing()方法来配置缓动效果;
var tweenBack = new TWEEN.Tween({x: 3}).to({x: 10}, 10000);
tweenBack.easing(TWEEN.Easing.Elastic.InOut);
tweenBack.chain(tween);
tweenBack.start();
这个通过chain()方法可以将这两个补间衔接起来，这样当动画启动之后，程序就会在这两个补间循环。例如：一个动画在另一个动画结束后开始。可以通过chain方法来使实现。
tweenBack.repeat(10);
如果你想制作循环动画可以使用chain来实现，但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次。
tweenBack.yoyo();
这个函数只在你使用repeat方法是起作用。当它被激活时，tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。
tweenBack.delay(1000);
delay方法用于控制动画之间的延时。
TWEEN.add(tween) 和 TWEEN.remove(tween)
用于向被激活的tweens中添加一个tween，或移除一个tween。
以上方法通常只是在内部使用，一般情况下你了解即可。
