glmatrix.jsとThree.jsで球体を惑星っぽく動かしてみました。

　JavaScriptのライブラリ、Three.jsとglmatrix.jsを使って球体が惑星のような動きをするプログラムを書いてみました。（※ブログパーツでは表示されないようですので、サイトに移動してご覧ください）

　ソースコードは上記のリンクから見ることができます。

　基本的な考え方としては、まず、原点O=(0,0,0)のときのxz平面上の円運動を考えます。

  x = rcosθ
　y = 0
  z = rsinθ

　このまま球体の座標に設定してθを動かせばxz平面上を円運動しますが、この場合は30度ほど傾けてみたいので、計算のためにベクトルにします。

  var rad = i*Math.PI/180; //(0=<i<360)
　v = vec3.clone([r*Math.sin(rad),0,r*Math.sin(rad)]);

　そしてこれを回転するための行列を作ります。

  var phy = 30*Math.PI/180;
  m = mat3.clone([
    1,0,0,
    0,Math.cos(phy),-Math.sin(phy),
    0,Math.sin(phy),Math.cos(phy)
  ]);

　このベクトルと行列を使って計算します。

  vec3.transformMat3(v,v,m);

　これでベクトルv(内部的には配列です)には回転済みの座標が入っていますので、最後にアニメーションの処理を書けばOKです！

　しかし行列がこんなに便利なものだったとは……！　

　それを知っていれば学生時代もっと真面目に行列を勉強したのになぁ。学生の頃にもっと色々チャレンジしていれば良かったとつくづく思います。