ふと、サッカーボールの立体図形をプログラムで算出させて描いてみたいと思いたったが、恐ろしくムズカシイ。。
原点から延びる半直線に直交する平面上に正多角形を描けるようになればなんか進みそうな気がしたので、球面上で色々やってみました。
回転対象とする点の軌道円
マウスでドラッグ操作すると視点を動かせます。（PC環境でないと動かせなさそう。）
R,G,B(赤、緑、青)の順で、x軸,y軸,z軸です。
See the Pen AxisAndRotationSampleUsing_Three_js by kob58im (@kob58im) on CodePen.
ちなみに、Three.jsではデフォルト設定だとx軸,y軸,z軸の順で回転させるようです（ググっただけの知識なので裏は取っていないです）。← どうにも胡散臭い・・・rotation.xとかを操作するときにこのへんは知っておいたほうがよいと思います。
まぁ、今回は現物合わせしていますが、、1
直交平面と球面が交わる円
円にはトーラスを使っています。トーラスを直接リサイズできないようなので、sceneから一度登録を削除して生成しなおし、再登録するようにしました。three.js の Mesh を削除する参照。
下記のU_angleは、原点と円周上の点を結ぶ直線を考えたときに、その直線と、原点から延びる半直線との成す角を指定しています。
See the Pen Torus_Resize_Using_Three_js by kob58im (@kob58im) on CodePen.
正六角形の頂点を球面上に置いてみる
回転行列を掛けて正六角形の頂点を一緒に回転させるところまではできた。
（※今回ハンドコーディングした回転行列の関数は、three.jsの仕様に合わせてはないのでsin,cosの取違いとか符号はテキトウに現物合わせしています。そのうち見直します。）
See the Pen PointsOnTheSphere_using_Three_js by kob58im (@kob58im) on CodePen.
物体のrotationの回転軸の順序を実験で確認してみた
実験的に確認したところだと、rotation.x, rotation.y, rotation.z に対する回転は、z軸⇒y軸⇒x軸の順で回転しているっぽい？
（すべての回転角を0(ここではスライダの左端の値を0としています)にしておき、z⇒y⇒xの順で操作すると、z軸⇒y軸⇒x軸を中心として回転しているように見受けられる。）
See the Pen SampleForCheckingRotationOrderUsingThreeJs by kob58im (@kob58im) on CodePen.
下記の順序で回転行列が乗算されてるっぽい。
\begin{pmatrix}
1 & 0 & 0 \\
0 & \cos\theta_X & -\sin\theta_X \\
0 & \sin\theta_X & \cos\theta_X \\
\end{pmatrix}
\begin{pmatrix}
\cos\theta_Y & 0 & \sin\theta_Y \\
0 & 1 & 0 \\
-\sin\theta_Y & 0 & \cos\theta_Y \\
\end{pmatrix}
\begin{pmatrix}
\cos\theta_Z & -\sin\theta_Z & 0 \\
\sin\theta_Z & \cos\theta_Z & 0 \\
0 & 0 & 1\\
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
z \\
\end{pmatrix}
参考サイト
- Three.jsで大量のパーティクルを表示する方法 - ICS MEDIA
- 球面上にランダムで置いたプロットをなるべく分散させたい - Qiita
- three.js の Mesh を削除する - Qiita
- せっちょう二十面体+座標 - Google検索
-
今回やってみて、現物合わせするにも、ある程度把握していないと（やみくもにやると）正解を当てられない。と思った次第です。 ↩