three.js TWEEN.js配合使用,制作补间动画

补间动画,顾名思义就是补充mesh从初始位置到结束位置的动画,然后其显得有过渡,自然.

1. 引入Tween.js

script标签引入,这个都不会,只能回去继续切图了--_--

2. 设置更新

常规来讲,three.js都会有一个动画函数,有的人明明为render,有的明明为animate

function render(){

    ......

    obritControls.update(); // 与本话题无关,只是方便某些童鞋找到某个函数,毕竟几乎是必备的一个控制器了

    TWEEN.update();// 请注意是大写的

}

3. 初始化一个实例

例如,你有很多个mesh需要做动画,还是那么可以定义一个函数

function getTween(){

    return new TWEEN.Tween(obj.position,要改变的某一个属性).to(到达某个属性的某个值,例如这里的position,需要传入,两个参数:{x:tartgetVal,y:targetVal,z:targetVal},duration,也就是动画时间).easing(TWEEN.Easing.Quartic.InOut,动画方式,只要有点css3的基础都可以理解的).toUpdate(回调函数).start(开始函数);

// 如果要实现依次动画或者无限循环动画,可以使用chain方法,具体实现可以自行解决,最简单的办法就是搞一个数组存储,依次开始动画(不过,这样比较蠢);

}