You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
4.4 KiB
86 lines
4.4 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="ja">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Three.jsは行列(*matrices*)を使って3次元変換(位置の変換、回転、スケーリング)をエンコードします。
|
||
|
|
すべての[page:Object3D]インスタンスは、そのオブジェクトの位置や回転、スケールを保存した行列([page:Object3D.matrix
|
||
|
|
matrix])を持っています。このページではオブジェクトの３次元変換をどうやって行うかを説明しています。
|
||
|
|
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Convenience properties and *matrixAutoUpdate*(便利なプロパティとmatrixAutoUpdate)</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
オブジェクトの変換を更新するには二つの方法があります。
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
オブジェクトの*position*や*quaternion*(四元数)や<strong>スケールのプロパティ</strong>を変更することで、three.jsに
|
||
|
|
オブジェクトの行列を再計算させます。
|
||
|
|
<code>
|
||
|
|
object.position.copy( start_position );
|
||
|
|
object.quaternion.copy( quaternion );
|
||
|
|
</code>
|
||
|
|
デフォルトでは、*matrixAutoUpdate*のプロパティはtrueで、行列は自動的に再計算されます。
|
||
|
|
オブジェクトが静的な場合や、再計算するタイミングを制御したい場合は、このプロパティをfalseに設定することでパフォーマンスが改善する可能性があります。
|
||
|
|
|
||
|
|
<code>
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
プロパティを変更した後には、行列を手動で更新してください。
|
||
|
|
<code>
|
||
|
|
object.updateMatrix();
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
オブジェクトの行列を直接修正する方法です。
|
||
|
|
[page:Matrix4]クラスには行列を変更するための様々なメソッドがあります。
|
||
|
|
<code>
|
||
|
|
object.matrix.setRotationFromQuaternion( quaternion );
|
||
|
|
object.matrix.setPosition( start_position );
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
この場合 *matrixAutoUpdate*は*false*に設定<em>しなくてはならない</em>ことに注意してください。
|
||
|
|
また*updateMatrix*を呼ば<em>ない</em>ようにしてください。
|
||
|
|
*updateMatrix*を呼ぶと、行列にマニュアルで加えた変更がなくなり、<strong>位置やスケール</strong>などから行列が再計算されます。
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Object and world matrices(オブジェクトとワールド座標系での行列)</h2>
|
||
|
|
<p>
|
||
|
|
オブジェクトの行列([page:Object3D.matrix matrix])は、[page:Object3D.parent parent](親オブジェクト)に対する<em>相対的な</em>変換を保持しています。
|
||
|
|
<em>ワールド座標系での</em>オブジェクトの変換を取得するには、オブジェクトの[page:Object3D.matrixWorld]にアクセスする必要があります。
|
||
|
|
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
親オブジェクトや子オブジェクトの変換が変更された場合は、[page:Object3D.updateMatrixWorld updateMatrixWorld]()を呼び出すことで、子オブジェクトの[page:Object3D.matrixWorld matrixWorld]の更新を要求することができます。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Rotation and Quaternion(回転と四元数)</h2>
|
||
|
|
<p>
|
||
|
|
three.jsでは3次元の回線を表すためにオイラー角([page:Euler Euler angles])と4元数([page:Quaternion Quaternions])という2つの方法があります。
|
||
|
|
また、three.jsではこの2つの間の変換メソッドも提供されています。
|
||
|
|
オイラー角はgimbal lockと呼ばれる問題の影響をうけることがあります。
|
||
|
|
gimbal lockが発生すると、特定の設定のときにオブジェクトの回転の自由度が失われます(オブジェクトが特定の軸方向に回転できなくなります)
|
||
|
|
このため、オブジェクトの回転は<em>つねに</em>オブジェクトの4元数([page:Object3D.quaternion quaternion])に保持されます。
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
以前のバージョンのライブラリには*useQuaternion*プロパティがあり、これをfalseに設定すると、
|
||
|
|
オブジェクトの行列([page:Object3D.matrix matrix])がオイラー角から計算されるようになっていました。
|
||
|
|
このやり方は古くなってきたので、代わりに[page:Object3D.setRotationFromEuler setRotationFromEuler]メソッドを使用して、
|
||
|
|
四元数を更新します。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|