Rotation des formes 3D

Effectuer des rotations en deux dimensions semble compliqué, et ça peut l'être. Il existe cependant des rotations simples. Par exemple, si nous faisons tourner notre cube autour de l'axe z (celui qui traverse l'écran), cela revient en fait à faire tourner un carré en deux dimensions :

Une bonne raison pour apprendre la trigonométrie

Nous pouvons simplifier un peu les choses en regardant juste un nœud à la position (x, 0). À l'aide d'une trigonométrie simple, on peut définir que la position du point, après lui avoir fait effectuer une rotation d'angle θ autour de l'origine, est :

$x^{'} = x \times c o s (θ)$ ‍
$y^{'} = x \times s i n (θ)$ ‍

Si vous ne comprenez pas d'où viennent ces équations, cette vidéo pourrait aider.

Rotation d'un point autour de l'origine

L'exemple précédent nous permettait d'effectuer la rotation d'un point situé sur l'axe des abscisses, autour de l'origine, mais si le point n'est pas situé sur l'axe des abscisses ? Il nous faut des éléments de trigonométrie légèrement plus avancés. Si on appelle la distance entre le point (x, y) et l'origine,

r

, et l'angle entre la ligne de (x, y) et l'axe des abscisses,

α

, alors :

$\begin{aligned} x = r \times c o s (α) \\ y = r \times s i n (α) \end{aligned}$ ‍

Si nous effectuons une rotation d'angle β pour aller vers le point (x', y'), alors :

$\begin{aligned} x^{'} = r \times c o s (α + β) \\ y^{'} = r \times s i n (α + β) \end{aligned}$ ‍

À l'aide des identités trigonométriques, nous obtenons :

$\begin{aligned} x^{'} = r \times c o s (α) c o s (β) - r \times s i n (α) s i n (β) \\ y^{'} = r \times s i n (α) c o s (β) + r \times c o s (α) s i n (β) \end{aligned}$ ‍

En substituant les valeurs de x et de y ci-dessus, on obtient une équation des nouvelles coordonnées, en fonction, et des anciennes coordonnées, et de l'angle de rotation :

$\begin{aligned} x^{'} = x \times c o s (β) - y \times s i n (β) \\ y^{'} = y \times c o s (β) + x \times s i n (β) \end{aligned}$ ‍

Écrire une fonction de rotation

Maintenant que nous connaissons les formules mathématiques, nous pouvons faire effectuer une rotation à un nœud, ou mieux encore, à notre tableau de nœuds, autour de l'axe z. Cette fonction va boucler sur tous les nœuds dans le tableau de nœud, trouver les coordonnées x et y, puis les mettre à jour. Nous enregistrons sin(theta) et cos(theta) à l'extérieur de la boucle, car il n'est nécessaire de les calculer qu'une seule fois :

var rotateZ3D = function(theta) {
    var sinTheta = sin(theta);
    var cosTheta = cos(theta);
    for (var n = 0; n < nodes.length; n++) {
        var node = nodes[n];
        var x = node[0];
        var y = node[1];
        node[0] = x * cosTheta - y * sinTheta;
        node[1] = y * cosTheta + x * sinTheta;
    }
};

Pour faire pivoter le cube de 30 degrés, nous devons appeler la fonction comme ceci :

rotateZ3D(30);

Vous pouvez voir le cube, après rotation, ci-dessous (c'est légèrement plus intéressant qu'avant, mais pas beaucoup) :

Rotation en trois dimensions

Nous pouvons maintenant faire effectuer une rotation à notre cube en deux dimensions, mais il a toujours l'apparence d'un carré. Et si nous voulions faire effectuer une rotation à notre cube autour de l'axe des y (l'axe vertical) ? Si nous nous imaginons en train de regarder notre cube par en dessous lorsqu'il effectue une rotation selon l'axe des y, nous verrions un carré qui pivote, exactement comme lorsque nous le faisions tourner autour de l'axe des z.

Nous pouvons réutiliser notre trigonométrie et nos fonctions précédentes, et renommer l'axe de telle manière que z devienne y. Dans ce cas, les coordonnées y du nœud ne changent pas, seules changent les coordonnées en x et en z :

var rotateY3D = function(theta) {
    var sinTheta = sin(theta);
    var cosTheta = cos(theta);
    for (var n = 0; n < nodes.length; n++) {
        var node = nodes[n];
        var x = node[0];
        var z = node[2];
        node[0] = x * cosTheta - z * sinTheta;
        node[2] = z * cosTheta + x * sinTheta;
    }
};

Et nous pouvons utiliser la même réflexion pour créer une fonction qui fasse effectuer une rotation de notre cube autour de l'axe des x :

var rotateX3D = function(theta) {
    var sinTheta = sin(theta);
    var cosTheta = cos(theta);
    for (var n = 0; n < nodes.length; n++) {
        var node = nodes[n];
        var y = node[1];
        var z = node[2];
        node[1] = y * cosTheta - z * sinTheta;
        node[2] = z * cosTheta + y * sinTheta;
    }
};

Maintenant que ces fonctions sont définies, nous pouvons faire effectuer une rotation de 30 degrés autour des deux autres axes :

rotateX3D(30);
rotateY3D(30);

Vous pouvez regarder le code complet ci-dessous. Essayez d'utiliser le modificateur de nombre à la volée, sur les valeurs, dans les appels de fonction :

Interaction utilisateur

Nous pouvons faire pivoter le cube en ajoutant des appels de fonction, mais il est beaucoup plus utile (et satisfaisant) de permettre à l'utilisateur de faire tourner le cube à l'aide de la souris. Pour cela, nous devons créer une fonction mouseDragged(). Cette fonction est automatiquement appelée quand on fait glisser la souris.

mouseDragged = function() {
    rotateY3D(mouseX - pmouseX);
    rotateX3D(mouseY - pmouseY);
};

mouseX et mouseY sont des variables intégrées qui contiennent les coordonnées actuelles de la souris. pmouseX et pmouseY sont des variables intégrées qui contiennent les coordonnées précédentes de la souris. Donc, si la coordonnée x augmente (on déplace la souris vers la droite), on envoie une valeur positive à la fonction rotateY3D() pour faire effectuer au cube une rotation autour de l'axe des y dans le sens des aiguilles d'une montre.

Vous pouvez regarder par vous-même ci-dessous :

Vous souhaitez rejoindre la discussion ?

Connectez-vous

Trier par :

Marc Le Grix de la Salle
Posté il y a il y a 9 ans. Lien direct vers le message de Marc Le Grix de la Salle «Ce serait juste mieux en ... »
Ce serait juste mieux en français car c'est un article très important.
Bouton qui renvoie à la page de connexionBouton qui renvoie à la page de connexion
(3 votes)
Réponse
Cédric Genin
Posté il y a il y a 7 ans. Lien direct vers le message de Cédric Genin «Bonjour, Dans le deuxieme ... »
Bonjour, Dans le deuxieme paragraphe "Écrire une fonction de rotation" pourquoi dans la boucle "for" de la fonction "rotateZ3D" on n'a pas besoin de rajouter "nodes[n][0] = node[0]; nodes[n][1] = node[1]; " ?
Quelle est l'instruction qui modifie les valeurs x et y de nodes[n]?
Bouton qui renvoie à la page de connexionBouton qui renvoie à la page de connexion
(2 votes)
Réponse
byoussouf228
Posté il y a il y a 4 ans. Lien direct vers le message de byoussouf228 «j'aime telement aimé merc ... »
j'aime telement aimé merci a khanacademy
Bouton qui renvoie à la page de connexionBouton qui renvoie à la page de connexion
(1 vote)
Réponse

Vous comprenez l'anglais ? Cliquez ici pour participer à d'autres discussions sur Khan Academy en anglais.