Discussions

Qthree.jsでの 物体の座標軸回転

立方体をx、y、z軸で回転させて遊んでいたときに
気づいたことを質問させていただきます。

x,y座標軸での回転度数が90を超えたあたりから、
z軸での回転と、x軸での回転が見かけ上同じ方向に回転し始めた。


他の軸での組み合わせでも同じよう見かけ上同じ方向に回転し始め、
望んだ物体の回転(上記の場合だと本来のx軸方向の回転)が実現できなくなってしまったのですが、
3Dレンダリングの世界では一般的なことなのでしょうか。

Sample Code

AAnswer to: three.jsでの 物体の座標軸回転

xl1

ある回転によって、2つの回転軸の向きが重なってしまい、2方向への回転しかできなくなって(回転の自由度が落ちて)しまうことがあります。これをジンバルロック(gimbal lock)というそうです。Three.js に特有の問題というわけではありません。

Wikipedia(英): http://en.wikipedia.org/wiki/Gimbal_lock
これがわかりやすいです: http://wonderfl.net/c/uTHS

この解決方法の1つとして、回転を四元数/クォータニオン(quaternion)で表すというものがあります。幸い Three.js には THREE.Quaternion クラスが用意されていて、59, 60 行目の

vec = new THREE.Vector3(x軸方向の回転角度, y軸方向の回転角度, z軸方向の回転角度);
quat = new THREE.Quaternion().setFromEuler(vec);

でそれぞれの軸方向の回転をクォータニオンでの表現に変換することができます。

motomizuki

ありがとうございます。
3Dレンダリングの世界ではよくみられる現象のようですね。
クォータニオンでの表現に切り替えて今後やっていきます!

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag