javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!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>