three.js > 3次元矢印 > ゆっくり回転 / グラデーション

関連 http://qiita.com/7of9/items/3531d3acd78da87eb303#comment-8765eaa66e32dd1753da

code v0.1

描画した矢印を色々な方向から見ようとしている。

とりあえず、ゆっくり動くようにはなった。
あとは幾何学の勉強が必要。オイラー回転かQuaternionなど使うのだろうか。

http://qiita.com/mo49/items/1a9b28b9cda03135e6ea
を参考に以下を実装したら矢印が描画されなくなった。理由は未消化。

var theta = clock.getElapsedTime();

code v0.2 > 座標付き

直交座標を白色のベクトルで追加。

２本のベクトルの位置情報が見やすくなってきた。

code v0.3 > それらしい回転

https://en.wikipedia.org/wiki/Spherical_coordinate_system
の天頂角と方位角を考慮。

x = r * sin(theta) * cos(phi)
z = r * sin(theta) * sin(phi)
y = r * cos(theta)

自分が望んでいた回転が得られた。

code v0.4 > ベクトル終端を配列でセット

以下のように終端情報を渡すと描画してくれる。

var arrows = [
  [ 1, 1, 1 ],
  [ -1, 1, 1 ],
  [ 1, -1, 1 ],
  [ 1, 1, -1 ],
  [ -1, 1, -1 ],
];
var num_arrows = 5;

15本のベクトルを引いてみた。
http://jsfiddle.net/m0zq6du7/2/

データ生成(python)はこちら
http://qiita.com/7of9/items/533825503fb884e1ec15
http://ideone.com/PZPfxe

code v0.5 > グラデーションを追加

12本などの矢印を描画した時、どれが始点か、次の矢印はどれか、などわかりにくい。
グラデーションをつけた。
色が0xFF0000が始点、そこからblue成分が増していく矢印が後続のもの。

変更部分のsnippet

for(var idx=0; idx<num_arrows; idx++) {
drawvector(0,0,0, arrows[idx][0], arrows[idx][1], arrows[idx][2], 0xff0000 + idx * (0xff/num_arrows));
}

作成中のgeometry計算ルーチンのチェックに使っている。