Threejs教程——动画

在Threejs中实现动画可以采用两种方式,一种是直接在render循环中写动画逻辑,比如每次渲染的时候修改动画对象的一些属性,这种方法比较简单粗暴,没有很好的控制。还有一种是较为高级的使用成熟的第三方库Tween来做。接下来我们就两种方法分别介绍:

第一中:

我们在render循环中写入一下代码

    var render = function () {
        requestAnimationFrame(render);
        step += 0.01;
        cube.position.x = 2 + (1 * (Math.cos(step)));
        cube.position.y = 2 + (10 * Math.abs(Math.sin(step)));
        cube.rotation.x += 0.03;
        cube.rotation.y += 0.03;
        cube.rotation.z += 0.03;
        renderer.render(scene, camera);
    };

运行就可以看到cube在进行旋转和平移的动画,这种动画比较初级。

接下来我们着重讲下Tween动画库。Git地址是https://github.com/tweenjs/tween.js,使用起来也非常方便。

第一步下载文件(在git的src目录下面)并且引入Tween的文件

<script src="js/Tween.js"></script>

第二步初始化一个Tween

var tweenPosition = new TWEEN.Tween(cubeMesh.position)
           .to({ x: cubeMesh.position.x, y: height * 0.5 * full, z: cubeMesh.position.z }, 1500)
           .easing(TWEEN.Easing.Back.Out)
           .start();

第三步,在主循环中调用Tween类的静态方法update

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

注意,这里是TWEEN的静态方法,而不是你实例化的动画对象,这个静态方法会自动更新调用所有动画。

比如我们可以写两个动画,一个修改位置,一个修改大小。

       var tweenScale = new TWEEN.Tween(cubeMesh.scale)
            .to({ x: 1, y: height * full, z: 1 }, 1500)
            .easing(TWEEN.Easing.Back.Out)
            .start();
        var tweenPosition = new TWEEN.Tween(cubeMesh.position)
           .to({ x: cubeMesh.position.x, y: height * 0.5 * full, z: cubeMesh.position.z }, 1500)
           .easing(TWEEN.Easing.Back.Out)
           .start();

另外Tween还支持多种Easing函数,让你的动画更加生动,比如弹跳效果等,具体大家可以参考Tween的文档


最后给出一个在线demo

本文由 Leo's Blog 创作,采用 署名-非商业性使用 2.5 中国大陆 进行许可。
如需转载、引用请署名作者且注明文章出处。
2016年12月29日 5827 浏览 评论 Threejs webgl Tween 动画
上一篇:Threejs ShapeGeometry自定义形状贴图 | 下一篇:Threejs教程——加载模型