Three.jsで遊んでみた - 球面と回転 - 回転行列の適用順序

ふと、[サッカーボールの立体図形](https://ja.wikipedia.org/wiki/%E5%88%87%E9%A0%82%E4%BA%8C%E5%8D%81%E9%9D%A2%E4%BD%93)をプログラムで算出させて描いてみたいと思いたったが、恐ろしくムズカシイ。。
原点から延びる半直線に直交する平面上に正多角形を描けるようになればなんか進みそうな気がしたので、球面上で色々やってみました。

# 回転対象とする点の軌道円

マウスでドラッグ操作すると視点を動かせます。（PC環境でないと動かせなさそう。）
R,G,B(赤、緑、青)の順で、x軸,y軸,z軸です。

<p class="codepen" data-height="540" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="qBNawpe" style="height: 540px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="AxisAndRotationSampleUsing_Three_js">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/qBNawpe">
  AxisAndRotationSampleUsing_Three_js</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


ちなみに、Three.jsではデフォルト設定だとx軸,y軸,z軸の順で回転させるようです（ググっただけの知識なので裏は取っていないです）。`rotation.x`とかを操作するときにこのへんは知っておいたほうがよいと思います。
← どうにも胡散臭い・・・
まぁ、今回は現物合わせしていますが、、[^1]
[^1]: 今回やってみて、現物合わせするにも、ある程度把握していないと（やみくもにやると）正解を当てられない。と思った次第です。

# 直交平面と球面が交わる円

円にはトーラスを使っています。トーラスを直接リサイズできないようなので、`scene`から一度登録を削除して生成しなおし、再登録するようにしました。[three.js の Mesh を削除する](https://qiita.com/yomotsu/items/7be847bf2fd08335e8b1)参照。

下記のU_angleは、原点と円周上の点を結ぶ直線を考えたときに、その直線と、原点から延びる半直線との成す角を指定しています。

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="qBNqWRN" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Torus_Resize_Using_Three_js">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/qBNqWRN">
  Torus_Resize_Using_Three_js</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 正六角形の頂点を球面上に置いてみる

回転行列を掛けて正六角形の頂点を一緒に回転させるところまではできた。
（※今回ハンドコーディングした回転行列の関数は、three.jsの仕様に合わせてはないのでsin,cosの取違いとか符号はテキトウに現物合わせしています。そのうち見直します。）

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="gOMLOxy" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PointsOnTheSphere_using_Three_js">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/gOMLOxy">
  PointsOnTheSphere_using_Three_js</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 物体の`rotation`の回転軸の順序を実験で確認してみた

実験的に確認したところだと、`rotation.x`, `rotation.y`, `rotation.z` に対する回転は、z軸⇒y軸⇒x軸の順で回転しているっぽい？
（すべての回転角を0(ここではスライダの左端の値を0としています)にしておき、z⇒y⇒xの順で操作すると、z軸⇒y軸⇒x軸を中心として回転しているように見受けられる。）

<p class="codepen" data-height="550" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="JjKbpKd" style="height: 550px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SampleForCheckingRotationOrderUsingThreeJs">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/JjKbpKd">
  SampleForCheckingRotationOrderUsingThreeJs</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

下記の順序で回転行列が乗算されてるっぽい。

```math

\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](https://ics.media/tutorial-three/points/)
 - [球面上にランダムで置いたプロットをなるべく分散させたい - Qiita](https://qiita.com/clomie/items/e5dd35dcfcba082b2a7f#%E7%90%83%E9%9D%A2%E4%B8%8A%E3%81%AB%E4%B8%80%E6%A7%98%E5%88%86%E5%B8%83%E3%81%95%E3%81%9B%E3%82%8B%E8%A8%88%E7%AE%97%E6%96%B9%E6%B3%95%E3%81%8C%E3%81%82%E3%81%A3%E3%81%9F%E8%BF%BD%E8%A8%98)
 - [three.js の Mesh を削除する - Qiita](https://qiita.com/yomotsu/items/7be847bf2fd08335e8b1)
 - [せっちょう二十面体+座標 - Google検索](https://www.google.co.jp/search?q=%E3%81%9B%E3%81%A3%E3%81%A1%E3%82%87%E3%81%86%E4%BA%8C%E5%8D%81%E9%9D%A2%E4%BD%93+%E5%BA%A7%E6%A8%99)