ステラのまほうのエンディングで始めるThree.js

この記事は、Three.js Advent Calendar 2016 9日目の記事です。 たまたま空いていたので、まんがタイムきらら Advent Calendar 2016 9日目の記事でもありますが、きらら成分はステラのまほうのアニメ(しかもエンディングだけ)となっていますので気をつけてください。 ✗目次 何でThree.js? はじめの一歩 四角を表示する 四角を増やす ランダムにいっぱいの四角を表示する カラフルにする カメラを動かす 微調整 背景アニメーション 最後に 仕事の疲れをステラのまほうで癒やしているとき、エンディングのヨナカジカルを見ているとWebGLでやれそうだなぁ...となったので仕事の息抜きにやってみた話です。 普段からWebGL触っている系の職種ではないため過度な期待はしないで下さい。 結果として以下のようなものが出来上がります。 embed.ly Demo