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.
68 lines
3.7 KiB
68 lines
3.7 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Matrices de transformation ([name])</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Three.js utilise des `matrices` pour encoder des transformations 3D---translations (position), rotations, et mise à l'échelle. Chaque instance d'un [page:Object3D] a une [page:Object3D.matrix matrix] qui stocke la position de l'objet, sa rotation, ainsi que son échelle. Cette page décrit comment mettre à jour les transformations d'un objet.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Propriétés de commodité et `matrixAutoUpdate`</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il y a deux façons de mettre à jour les transformations d'un objet:
|
||
|
|
</p>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Modifier les propriétés `position`, `quaternion`, et `scale` de l'objet, et laissez three.js recalculer
|
||
|
|
la matrice de l'objet à l'aide de ces propriétés:
|
||
|
|
<code>
|
||
|
|
object.position.copy( start_position );
|
||
|
|
object.quaternion.copy( quaternion );
|
||
|
|
</code>
|
||
|
|
Par défaut, la propriété `matrixAutoUpdate` est à true, et la matrice sera automatiquement recalculée.
|
||
|
|
Si l'objet est statique, ou si vous souhaitez contrôler manuellement quand le recalcul de la matrice intervient, de meilleur performances peuvent-être obtenues en définissant la propriété comme false:
|
||
|
|
<code>
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
Et après avoir changé n'importe quelle propriété, mettez manuellement la matrice à jour:
|
||
|
|
<code>
|
||
|
|
object.updateMatrix();
|
||
|
|
</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Modifier la matrice de l'objet directement. La classe [page:Matrix4] dipose de différentes méthodes pour modifier les matrices:
|
||
|
|
<code>
|
||
|
|
object.matrix.setRotationFromQuaternion( quaternion );
|
||
|
|
object.matrix.setPosition( start_position );
|
||
|
|
object.matrixAutoUpdate = false;
|
||
|
|
</code>
|
||
|
|
Notez que `matrixAutoUpdate` <em>doit</em> être définie comme `false` dans ce cas, et vous devez vérifier que vous n'appelez <em>pas</em> `updateMatrix`. Appeler `updateMatrix` écrasera les modifications manuelles apportées à la matrice, en recalculant la matrice grâce à sa `position`, `scale`, ainsi de suite.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Matrices d'objets et du monde</h2>
|
||
|
|
<p>
|
||
|
|
La [page:Object3D.matrix matrix] d'un objet stocke les transformations <em>relatives</em> au [page:Object3D.parent parent] de l'objet; pour obtenir les transformations de l'objets en coordonnées du <em>monde</em>, vous devez accéder à la [page:Object3D.matrixWorld] de l'objet.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Quand les transformations de l'objet parent ou enfant changent, vous pouvez demander que la [page:Object3D.matrixWorld matrixWorld] de l'objet enfant soit mise à jour en appelant [page:Object3D.updateMatrixWorld updateMatrixWorld]().
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Rotation et Quaternions</h2>
|
||
|
|
<p>
|
||
|
|
Three.js propose deux manières de représenter les rotations 3D: [page:Euler Euler angles] et [page:Quaternion Quaternions], ainsi que des méthodes pour effectuer des conversions entre les deux. Les angles d'Euler sont sujets à un problème nommé "gimbal lock", où certaines configurations peuvent perdre un certain degré de liberté (empêchant l'objet d'effectuer une rotation sur un axe). Pour cette raison, les rotations d'objets sont <em>toujours</em> stockées dans la propriété [page:Object3D.quaternion quaternion] de l'objet.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Des versions précédentes de la librairie incluaient une propriété `useQuaternion` qui, si réglée sur false, faisait que la [page:Object3D.matrix matrix] matrice de l'objet était calculée depuis un angle d'Euler. Cette pratique est dépassée---à la place, vous devez utiliser la méthode [page:Object3D.setRotationFromEuler setRotationFromEuler], qui mettra le quaternion à jour.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|