2
0

Matrix-transformations.html 4.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p>
  12. Three.jsは行列(*matrices*)を使って3次元変換(位置の変換、回転、スケーリング)をエンコードします。
  13. すべての[page:Object3D]インスタンスは、そのオブジェクトの位置や回転、スケールを保存した行列([page:Object3D.matrix
  14. matrix])を持っています。このページではオブジェクトの3次元変換をどうやって行うかを説明しています。
  15. </p>
  16. <h2>Convenience properties and *matrixAutoUpdate*(便利なプロパティとmatrixAutoUpdate)</h2>
  17. <p>
  18. オブジェクトの変換を更新するには二つの方法があります。
  19. </p>
  20. <ol>
  21. <li>
  22. オブジェクトの*position*や*quaternion*(四元数)や<strong>スケールのプロパティ</strong>を変更することで、three.jsに
  23. オブジェクトの行列を再計算させます。
  24. <code>
  25. object.position.copy( start_position );
  26. object.quaternion.copy( quaternion );
  27. </code>
  28. デフォルトでは、*matrixAutoUpdate*のプロパティはtrueで、行列は自動的に再計算されます。
  29. オブジェクトが静的な場合や、再計算するタイミングを制御したい場合は、このプロパティをfalseに設定することでパフォーマンスが改善する可能性があります。
  30. <code>
  31. object.matrixAutoUpdate = false;
  32. </code>
  33. プロパティを変更した後には、行列を手動で更新してください。
  34. <code>
  35. object.updateMatrix();
  36. </code>
  37. </li>
  38. <li>
  39. オブジェクトの行列を直接修正する方法です。
  40. [page:Matrix4]クラスには行列を変更するための様々なメソッドがあります。
  41. <code>
  42. object.matrix.setRotationFromQuaternion( quaternion );
  43. object.matrix.setPosition( start_position );
  44. object.matrixAutoUpdate = false;
  45. </code>
  46. この場合 *matrixAutoUpdate*は*false*に設定<em>しなくてはならない</em>ことに注意してください。
  47. また*updateMatrix*を呼ば<em>ない</em>ようにしてください。
  48. *updateMatrix*を呼ぶと、行列にマニュアルで加えた変更がなくなり、<strong>位置やスケール</strong>などから行列が再計算されます。
  49. </li>
  50. </ol>
  51. <h2>Object and world matrices(オブジェクトとワールド座標系での行列)</h2>
  52. <p>
  53. オブジェクトの行列([page:Object3D.matrix matrix])は、[page:Object3D.parent parent](親オブジェクト)に対する<em>相対的な</em>変換を保持しています。
  54. <em>ワールド座標系での</em>オブジェクトの変換を取得するには、オブジェクトの[page:Object3D.matrixWorld]にアクセスする必要があります。
  55. </p>
  56. <p>
  57. 親オブジェクトや子オブジェクトの変換が変更された場合は、[page:Object3D.updateMatrixWorld updateMatrixWorld]()を呼び出すことで、子オブジェクトの[page:Object3D.matrixWorld matrixWorld]の更新を要求することができます。
  58. </p>
  59. <h2>Rotation and Quaternion(回転と四元数)</h2>
  60. <p>
  61. three.jsでは3次元の回線を表すためにオイラー角([page:Euler Euler angles])と4元数([page:Quaternion Quaternions])という2つの方法があります。
  62. また、three.jsではこの2つの間の変換メソッドも提供されています。
  63. オイラー角はgimbal lockと呼ばれる問題の影響をうけることがあります。
  64. gimbal lockが発生すると、特定の設定のときにオブジェクトの回転の自由度が失われます(オブジェクトが特定の軸方向に回転できなくなります)
  65. このため、オブジェクトの回転は<em>つねに</em>オブジェクトの4元数([page:Object3D.quaternion quaternion])に保持されます。
  66. </p>
  67. <p>
  68. 以前のバージョンのライブラリには*useQuaternion*プロパティがあり、これをfalseに設定すると、
  69. オブジェクトの行列([page:Object3D.matrix matrix])がオイラー角から計算されるようになっていました。
  70. このやり方は古くなってきたので、代わりに[page:Object3D.setRotationFromEuler setRotationFromEuler]メソッドを使用して、
  71. 四元数を更新します。
  72. </p>
  73. </body>
  74. </html>