three.js 入門 (6) - Matrix変換
以下の記事が面白かったので、ざっくり翻訳しました。
・Matrix transformations – three.js docs
前回
1. Matrix変換
「Three.js」は、Matrixを使用して3D変換をエンコードします。Object3Dの全てのインスタンスには、そのオブジェクトの位置、回転、スケールを格納するMatrixがあります。
2. 便利なプロパティとmatrixAutoUpdate
オブジェクトの変換を更新するには、次の2つの方法があります。
(1) オブジェクトのposition、quaternion、scale位置プロパティを変更し、「three.js」がこれらプロパティからオブジェクトのMatrixを再計算できるようにします。
object.position.copy(start_position);
object.quaternion.copy(quaternion);デフォルトでは、matrixAutoUpdateはtrueに設定されており、Matrixは自動的に再計算されます。オブジェクトが静的である場合、または再計算が発生するタイミングを手動で制御する場合は、falseに指定することでパフォーマンスを向上させることができます。
object.matrixAutoUpdate = false;プロパティを変更した後、Matrixを手動で更新します。
object.updateMatrix();(2) オブジェクトのMatrixを直接変更します。 Matrix4には、Matrixを変更するための様々なメソッドがあります。
object.matrix.setRotationFromQuaternion(quaternion);
object.matrix.setPosition(start_position);
object.matrixAutoUpdate = false;この場合、matrixAutoUpdateをfalseに設定し、updateMatrix()を呼び出さないようにする必要があります。updateMatrix()を呼び出すと、Matrixに加えた手動の変更が無効になります。
3. オブジェクトとワールドのMatrix
オブジェクトのmatrixには、オブジェクトの親に対するオブジェクトの変換が格納されます。ワールド座標でオブジェクトの変換を取得するには、オブジェクトのObject3D.matrixWorldを使う必要があります。
親オブジェクトまたは子オブジェクトのいずれかの変換が変更された場合、updateMatrixWorld()を呼び出すことにより、子オブジェクトのmatrixWorldの更新を要求できます。
4. RotationとQuaternion
「Three.js」は、3D回転を表す2つの方法を提供します。オイラー角とクォータニオン、および2つの間で変換する方法です。オイラー角には「ジンバルロック」と呼ばれる問題があり、特定の構成では自由度が失われる可能性があります（オブジェクトが1つの軸を中心に回転できないようにします）。 このため、オブジェクトの回転は常にオブジェクトのquaternionに格納されます。クォータニオンを更新するにはsetRotationFromEuler()を使用する必要があります。