r85「three.js入門」04「マテリアルを使う」は、立体表面の素材となるマテリアルに、いくつかの設定を加えたりマップも与えてみました。本稿は他のライブラリも使って、立体やカメラをアニメーションさせます。立方体の頂点をランダムに歪めて回す「three.js入門」03のコード002「3次元空間で頂点の歪んだ立方体が回る」に手を加えるかたちで進めます(サンプル001)。立方体の8頂点座標をランダムに歪ませたうえで、xy軸で回しています(図001)。正二十面体の頂点をランダムに歪めて回す立方体のジオメトリーは、正二十面体に改めます。ジオメトリーを使う」04「正二十面体をつくる」参照)。それにともなって、立体をつくる関数(createMesh())の引数と呼び出しが変わります。THREE.IcosahedronGeometry(radius);}正二十面体の頂点座標は、次項からアニメーションで歪めるようにします。そのとき、歪んだ二十面体の座標をさらにランダムに動かすと、立体がどんどん崩れてゆくでしょう。もとの正二十面体の頂点座標はとっておき、ランダムな座標はつねにもとの座標から求めるようにします。ジオメトリーの頂点座標を配列で参照するのがGeometry.verticesプロパティです。そこで、つぎのようにあらかじめ関数(getVertices())で頂点座標を別の配列に取り出して、変数(originalVertices)に納めておくことにしました。vertices;}正二十面体の頂点座標をランダムに歪ませる処理も、ふたつの段階に分けます。変数(originalVertices)にとっておいたもとの正二十面体の頂点座標から、歪ませた座標の配列を受け取ります(getRandomVertices())。この機会に、歪みの大きさを関数の引数(range)に加えました。つぎに、歪ませた座標の配列(randomVertices)にもとづいて、正二十面体の頂点座標(vertices)を変える(moveVertices())という流れです。newVertex.z;}}これで、正二十面体の頂点をランダムに歪めた立体が回ります(図002)。頂点の座標はランダムに決めていますので、実行し直すたびに二十面体のかたちが変わるでしょう(サンプル002)。スクリプトは以下のコード002にまとめました。頂点座標をトゥイーンアニメーションで変える正二十面体のもとのかたちから頂点が歪む動きを、トゥイーンアニメーションにしてみましょう。three.jsにトゥイーンのモジュールは含まれていません。そこで、ライブラリモジュールのスイートであるCreateJSからTweenJSを使います。つぎの<script>要素を加えると、CDNからTweenJSが読み込めます。src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>立体の頂点座標を指定した座標に動かす関数(moveVertices())は、座標は変えずにトゥイーンを定める関数(setTween())に渡します。関数の引数は立体の頂点のVector3オブジェクトと、トゥイーン先のランダムな座標をもったオブジェクトです。Tween.get()メソッドの第1引数にトゥイーンしたいオブジェクトを渡すと、Tweenオブジェクトが返されます。オプションの第2引数のオブジェクトにはloopプロパティを加えました。trueを与えればアニメーションが繰り返されます(デフォルト値false)。トゥイーンを定めるのは、Tween.to()メソッドです。第1引数のオブジェクトにトゥイーンするプロパティと値を納めます。第2引数はアニメーションする時間(ミリ秒)です。第3引数は値の変わり方を決めるイージング関数で、Ease.bounceOutは弾むように変化します。createjs.Ease.bounceOut);tweens.push(tween);}イージング関数にどのようなものがあり、どういう値の変わり方をするのかは、TweenJSサイトのデモご覧になるとよいでしょう。画面右側の一覧から選ぶと、左にグラフが描かれます(図003)。図003■TweenJSサイトのイージング関数をグラフ表示するデモところが、これだけではトゥイーンアニメーションされません。Geometry.verticesプロパティの頂点座標を変えても、Geometry.verticesNeedUpdateプロパティをtrueにしないと結果が反映されないのです。座標を変えて描画が必要になるたびに、プロパティはtrueに定め直さなければなりません。描画更新の関数(update())に、この記述を加えましょう。立体を回転するコードは除きます。スクリプトは以下のコード002にまとめ、サンプル003をjsdo.itに掲げました。トゥイーンアニメーションごとに新たな頂点座標を定める前掲コード002のトゥイーンはループで繰り返されるものの、歪めた頂点座標ははじめに決まったまま変わりませんので、まったく同じアニメーションが繰り返されます。なく、毎回ランダムな頂点座標が変わるようにしましょう。そのためには、ランダムな座標決め(getRandomVertices())と頂点座標のトゥイーンの定め(moveVertices())とを繰り返さなければなりません。新たな関数(setMotion())に切り分けることにしましょう。トゥイーンを初期化するには、Tweenオブジェクトの配列(tweens)は空にしたうえで、Tween.removeAllTweens()メソッドを呼び出します。randomVertices);}Tween.to()メソッドは、プロパティのトゥイーンを定めるだけです。関数を呼び出すにはTween.call()メソッドに、関数の参照を渡します。Tweenクラスのメソッドは、基本的にTweenオブジェクトの参照を返すので、メソッドはドット(.)をつなげて呼び出せるのです。前のトゥイーンが済むのを待って、順番に実行されます。イージング関数は、Ease.elasticOutを試しましょう。これで二十面体は、トゥイーンアニメーションでつぎつぎにかたちが変わります(サンプル004)。OrbitControlsでカメラをインタラクティブに動かす仕上げに、カメラもアニメーションさせましょう。ダウンロードしたthree.jsライブラリの「examples/js/controls/」に含まれているOrbitControls.jsを使うと、マウスでカメラが操作できます。JavaScriptファイルをライブラリ用のフォルダ(ここではlib)に納めたら、<script>要素に読み込んで、つぎのようにOrbitControls()コンストラクタにカメラを渡して呼び出します(詳しくは「three.jsのOrbitControls.jsで簡単にカメラをマウスコントロールする」をお読みください)。controls.update();}カメラを動かすためのマウス操作は、つぎのとおりです。右ボタンドラッグOrbitControls.autoRotateプロパティにtrueを与えれば、カメラは立体を中心にゆっくりと周回します。この場合、アニメーションの再描画メソッド(update())の中からOrbitControls.update()メソッドを呼び出さなければなりません(サンプル005)。書き上がったスクリプトは、以下のコード003にまとめました。