Tween.js × Three.js

Three.jsでTween.jsを使ってみる

デモ：オライリー本のサンプル

Tween.js適用部分を多少書き換えてみた

var posSrc = {pos: 1}; // 初期値
var tween = new TWEEN.Tween(posSrc)
            .to({pos: 0}, 5000)
            .easing(TWEEN.Easing.Bounce.InOut);
var tweenBack = new TWEEN.Tween(posSrc)
            .delay(1000)
            .to({pos: 1}, 3000)
            .easing(TWEEN.Easing.Sinusoidal.InOut);

// ループさせる | chain() 連結
tween.chain(tweenBack);
tweenBack.chain(tween);

var onUpdate = function () {
    var count = 0;
    var pos = this.pos; // this == {pos: 1}

    loadedGeometry.vertices.forEach(function (e) { // loadedGeometry.vertices.length == 8477
        var newY = ((e.y + 3.22544) * pos) - 3.22544;
        pointCloud.geometry.vertices[count++].set(e.x, newY, e.z);
    });

    pointCloud.geometry.verticesNeedUpdate = true;
};

// tweenがアップデートされるたび呼び出される
tween.onUpdate(onUpdate);
tweenBack.onUpdate(onUpdate);


loader.load("../assets/models/test.ply", function (geometry) {

    // モデルの読み込みが完了したらアニメーション開始
    tween.start();
});

function render() {
    TWEEN.update();
}

参考
Tweenアニメーションの種類
JavascriptアニメーションライブラリTween.jsの紹介
初めてのThree.js 第2版――WebGLのためのJavaScript 3Dライブラリ