「部門/Three.js/回転」の編集履歴（バックアップ）一覧はこちら

「部門/Three.js/回転」(2013/02/01 (金) 02:05:03) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

*オイラー角で回転
Three.jsで物体を回転させるときに最もよく使われるのはオイラー角のもよう。オイラー角の定義は
-[[オイラー角 - Wikipedia>http://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E8%A7%92]]
-[[Euler Angles -- from Wolfram MathWorld>http://mathworld.wolfram.com/EulerAngles.html]]
にあるような感じで、ふつうはこれと同じようにz-x-zの順で回転すると思うんだが（ランダウの力学の定義もこうだったと思う）、
-[[ロテーションについて - webgl - three.js>http://webgl.akjava.com/three-js/rotation]]
によるとx-y-zの順で回転するらしい。別の定義でオイラー角を計算し直すのはめんどうなので、Three.jsのほうでなんとかしてくれませんか。上のリンクからeulerOrder()というメソッドを使えばいいとわかっても引数をどうすればいいのか不明だったのだけど、そのままだった。
#highlight(){object.eulerOrder='XYZ';}
のようにする。（例えば、[[Streaming data from Blender into Three.js (WebGL+Websockets)>http://blenderartists.org/forum/showthread.php?243522-Streaming-data-from-Blender-into-Three-js-(WebGL-Websockets)&s=d0fc5b1e2c831db8ef438d1556c8cf8c&p=2053198&viewfull=1#post2053198]]に載ってた。）

*オイラー回転じゃなく、グローバルな座標に対して回転させたいとき
-[[javascript - How to rotate a object on axis world three.js? - Stack Overflow>http://stackoverflow.com/questions/11119753/how-to-rotate-a-object-on-axis-world-three-js]]
たぶんだけどこれ使えば任意のベクトルのまわりで回転できる。

*ちなみにROOTにおける回転は、
[[TRotation>http://root.cern.ch/root/html/TRotation.html]] 
にあるようにz-x-zの順。よく読んだら、ランダウ-リフシッツやゴールドスタインもこれって書いてある。

*参考リンク
-[[ロテーションについて - webgl - three.js>http://webgl.akjava.com/three-js/rotation]]
-[[クォータニオンによる視点の移動 （WebGL（Three.js））>http://www.natural-science.or.jp/article/20120416225426.php]]
-[[three.jsでの　物体の座標軸回転 - jsdo.it - Share JavaScript, HTML5 and CSS>http://jsdo.it/qa/79]]
-[[Rotate and position cylinders · Issue #1958 · mrdoob/three.js · GitHub>https://github.com/mrdoob/three.js/issues/1958]]

#comment_num2()

*オイラー角で回転
Three.jsで物体を回転させるときに最もよく使われるのはオイラー角のもよう。オイラー角の定義は
-[[オイラー角 - Wikipedia>http://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E8%A7%92]]
-[[Euler Angles -- from Wolfram MathWorld>http://mathworld.wolfram.com/EulerAngles.html]]
にあるような感じで、ふつうはこれと同じようにz-x-zの順で回転すると思うんだが（ランダウの力学の定義もこうだったと思う）、
-[[ロテーションについて - webgl - three.js>http://webgl.akjava.com/three-js/rotation]]
によるとx-y-zの順で回転するらしい。別の定義でオイラー角を計算し直すのはめんどうなので、Three.jsのほうでなんとかしてくれませんか。上のリンクからeulerOrder()というメソッドを使えばいいとわかっても引数をどうすればいいのか不明だったのだけど、そのままだった。
#highlight(){object.eulerOrder='XYZ';}
のようにする。（例えば、[[Streaming data from Blender into Three.js (WebGL+Websockets)>http://blenderartists.org/forum/showthread.php?243522-Streaming-data-from-Blender-into-Three-js-(WebGL-Websockets)&s=d0fc5b1e2c831db8ef438d1556c8cf8c&p=2053198&viewfull=1#post2053198]]に載ってた。）

*オイラー回転じゃなく、グローバルな座標に対して回転させたいとき
-[[javascript - How to rotate a object on axis world three.js? - Stack Overflow>http://stackoverflow.com/questions/11119753/how-to-rotate-a-object-on-axis-world-three-js]]
たぶんだけどこれ使えば任意のベクトルのまわりで回転できる。

*好きな方向を向かせる
数日間、回転について色々調べてうまく行かなかったんだけど、ベクトルの方向を求めて、それにそってlookAt(position)を使ってやるのががけっきょく簡単だった。
-[[javascript - Three.js lookat seems to be flipped - Stack Overflow>http://stackoverflow.com/questions/13757483/three-js-lookat-seems-to-be-flipped/13765140#13765140]]

*ちなみにROOTにおける回転は、
[[TRotation>http://root.cern.ch/root/html/TRotation.html]] 
にあるようにz-x-zの順。よく読んだら、ランダウ-リフシッツやゴールドスタインもこれって書いてある。

*参考リンク
-[[ロテーションについて - webgl - three.js>http://webgl.akjava.com/three-js/rotation]]
-[[クォータニオンによる視点の移動 （WebGL（Three.js））>http://www.natural-science.or.jp/article/20120416225426.php]]
-[[three.jsでの　物体の座標軸回転 - jsdo.it - Share JavaScript, HTML5 and CSS>http://jsdo.it/qa/79]]
-[[Rotate and position cylinders · Issue #1958 · mrdoob/three.js · GitHub>https://github.com/mrdoob/three.js/issues/1958]]

#comment_num2()