> Le Site du Zéro - Informatique > Cours > Tutoriels > Programmation > AS / Flash / Flex > Introduction à la 3D > Introduction à la 3D via la trigonométrie > Rotation 3D > Lecture du tutoriel

Rotation 3D

Par

heero78

Mise à jour : 13/01/2009

Difficulté : Intermédiaire

110 visites depuis 7 jours , dont 22 sur ce chapitre , classé 546/777

Dans ce chapitre, nous allons enfin commencer la 3D (ouf :lol:

).
Nous allons juste élargir les applications du code que nous avons vu dans le chapitre précédent, il est donc important que vous l'ayez compris.

Retour en haut

Sommaire du chapitre :

Mise au point
Différents plans
Troisième rotation
On combine le tout

Retour en haut

Mise au point

Jusqu'à présent nous avons travaillé seulement en 2 dimensions, à savoir l'abscisse et l'ordonnée de notre clip.

Pour introduire la 3^e dimension, nous allons avoir besoin de créer un 3^e axe 'z' dit de 'profondeur'.
Pour un clip dans Flash, la valeur de z peut s'apparenter au 'niveau' auquel se situe le clip, mais nous verrons cela plus en détails plus tard.
Au lieu de travailler avec des clips comme jusqu'à présent, nous allons travailler avec des points, ces points possèderont 3 coordonnées (x,y,z).
Puis, pour visualiser le tout, nous allons affecter aux coordonnées de notre clip les coordonnées de notre point.

Euh... Mais pourquoi ne pas travailler directement avec les coordonnées de notre clip, alors ? Pourquoi introduire un point ?

Eh bien tout simplement parce que le clip nous sert seulement à visualiser les changements de coordonnées de notre point ; par la suite, vous pourrez tout simplement supprimer ce clip et relier 2 points par un lineTo, pour visualiser les changements par exemple. Mais pour l'instant nous resterons avec notre clip, nous verrons le reste un peu plus tard.

Nous allons donc créer notre point :
Code : Actionscript

var point:MovieClip = new MovieClip(); // création d'un objet MovieClip
point.x = 0; // création de la variable x dans le MovieClip 'point'
point.y = 0; // création de la variable y
point.z = 0; // création de la variable z

Puis pour visualiser notre point (puisque par définition un point, c'est invisible

), nous allons attribuer au coordonnées de notre clip les valeurs de point.x et de point.y.
Code : Actionscript

1 2	clip._x = point.x clip._y = point.y

Dans la logique où nous nous sommes placés, la variable point.z représente la 'profondeur', cette notion est donc semblable à celle des niveaux dans Flash.
Nous pouvons donc aussi, si nous en avons besoin, modifier le niveau de notre clip avec la valeur de point.z :
Code : Actionscript

1	clip.swapDepths(point.z)

Si vous savez le faire, vous pouvez aussi créer une classe Point(), ce qui me paraît plus strict comme script.

Retour en haut

Différents plans

Dans le précédent chapitre, nous avons travaillé dans le plan défini par les vecteurs $\vec{x},\vec{y}$ .
Ce plan correspond à la surface de votre écran (plan bleu ci-dessous).

diferents plans.

Mais toutes les considérations géométriques que nous avons vues précédemment sont aussi valides dans d'autres plans.
Prenons par exemple le plan défini par les axes $\vec{x},\vec{z}$ (le plan vert ci-dessus), et un point de coordonnées (x=100,y=100,z=0) qui servira de nouveau centre à la rotation de notre clip.
On peut très facilement faire tourner notre clip dans ce plan en apportant quelques modifications à notre code.
Comme nous l'avons vu plus haut, ajoutons notre point et modifions les coordonnées de notre clip en fonction des variables de notre point :
Code : Actionscript

var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100; // J'ai mis 100 pour que notre point ait la même ordonnée que pour 'rotation', j'aurais tout aussi bien pu mettre n'importe quoi d'autre puisque cette variable ne variera pas pour l'instant.
point.z = 100; // Notre clip est maintenant situé juste au-dessus de notre 'centre' de 'rotation'.
var clip:MovieClip = this.attachMovie('boule','mc_boule',1); 
clip._x = point.x
clip._y = point.y
// Ici nous n'avons qu'un seul clip, nous n'avons donc pas besoin d'utiliser le 'swapDepths()', mais vous pouvez quand même le mettre si ça vous amuse.
// clip.swapDepths(point.z)

Nous devons aussi modifier la fonction rotation pour qu'elle modifie les variables de notre point et non plus directement les coordonnées de notre clip.
Code : Actionscript

function rotation(angle:Number):Void{
    var cosAngle:Number = Math.cos(conversion_radians(angle));
    var sinAngle:Number = Math.sin(conversion_radians(angle));
    var newX:Number = (point.x-centreX)*cosAngle-(point.y-centreY)*sinAngle; // ligne modifiée
    var newY:Number = (point.y-centreY)*cosAngle+(point.x-centreX)*sinAngle; // ligne modifiée
    point.x = centreX+newX; // ligne ajoutée
    point.y = centreY+newY; // ligne ajoutée
    clip._x = point.x; // ligne modifiée
    clip._y = point.y; // ligne modifiée
}

Maintenant, nous voulons que notre point (et par conséquent aussi le clip) tourne dans le plan défini par les vecteurs $\vec{x},\vec{z}$ , autour du point de coordonnées (x=100,y=100,z=0). Modifions notre code en conséquence :
Code : Actionscript

function conversion_radians(degre:Number):Number{
    return degre/180*Math.PI;
}
function rotation(angle:Number):Void{
    var cosAngle:Number = Math.cos(conversion_radians(angle));
    var sinAngle:Number = Math.sin(conversion_radians(angle));
    var newX:Number = (point.x-centreX)*cosAngle-(point.z-centreZ)*sinAngle; // ligne modifiée (on a remplacé les variables de Y par les variables de Z)
    var newZ:Number = (point.z-centreZ)*cosAngle+(point.x-centreX)*sinAngle; // ligne modifiée
    point.x = centreX+newX;
    point.z = centreZ+newZ; // ligne modifiée
    clip._x = point.x;
    clip._y = point.y; // Cette ligne n'a pas été modifiée, car dans le repère que nous avons choisi, l'ordonnée de notre clip correspondra toujours à la variable 'y' de notre 'point'. Cette ligne devient donc obsolète pour la rotation dans ce plan (puisque la valeur de 'point.y' ne change pas).
    // clip.swapDepths(point.z) // Cette ligne est toujours inutile dans le cas où nous ne gérons qu'un seul clip.
}
var centreX:Number = 100;
var centreY:Number = 100;
var centreZ:Number = 0
var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100;
point.z = 100;
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point.x
clip._y = point.y
// clip.swapDepths(point.z)
this.onEnterFrame = function(){
        rotation(5)
}

À ce stade, si vous testez votre animation, le clip devrait se déplacer sur l'axe $\vec{x}$ .
Mais bien sûr, la variation de niveau sur l'axe $\vec{z}$ n'est pas visible.
Pour la mettre en évidence (et pour vous prouver que votre code marche bien

), il existe une infinité de méthodes, je vous propose donc de modifier la taille de notre clip pour donner un effet de 'loin' ou 'proche'.
À la fin de la fonction rotation, ajoutez ce code :
Code : Actionscript

clip._xscale = point.z + 200
clip._yscale = point.z + 200
// On fait varier la taille (en %) de notre clip en fonction du 'niveau' (qui correspond à la valeur de 'point.z').
// Puisque la valeur de point.z varie entre -100 et 100 (puisqu'on s'est arrangé pour que le clip se situe à 100 du centre et que le centre est au 'niveau' 0 (z=0)), on y ajoute 200 pour obtenir un pourcentage entre 100 (taille normale) et 300 (taille triplée).

Alors ? Magnifique, n'est-ce pas ? Nous savons maintenant comment faire tourner notre point dans 2 plans parallèles. Le faire tourner dans le 3^e plan ne nous posera donc aucun problème (juste quelques modifications du code).
Eh bien, prochaine étape, on combine les rotations.

Retour en haut

Troisième rotation

Je viens de vous dire que vous étiez capables de créer la rotation dans le 3^e plan, $\vec{y},\vec{z}$ . Mais il me vient un doute,

allez : montrez-moi que vous avez tout compris. Faites les modifications nécessaires avant de lire le code.

(Toujours autour du même centre, (x=100,y=100,z=0).)
Secret (cliquez pour afficher)

Code : Actionscript

function conversion_radians(degre:Number):Number{
    return degre/180*Math.PI;
}
function rotation(angle:Number):Void{
    var cosAngle:Number = Math.cos(conversion_radians(angle));
    var sinAngle:Number = Math.sin(conversion_radians(angle));
    var newY:Number = (point.y-centreY)*cosAngle-(point.z-centreZ)*sinAngle;
    var newZ:Number = (point.z-centreZ)*cosAngle+(point.y-centreY)*sinAngle;
    point.y = centreY+newY;
    point.z = centreZ+newZ;
    clip._x = point.x;
    clip._y = point.y;
    // clip.swapDepths(point.z)
    clip._xscale = point.z + 200
    clip._yscale = point.z + 200
}
var centreX:Number = 100;
var centreY:Number = 100;
var centreZ:Number = 0
var point:MovieClip = new MovieClip();
point.x = 100;
point.y = 100;
point.z = 100;
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point.x
clip._y = point.y
// clip.swapDepths(point.z)
this.onEnterFrame = function(){
        rotation(5)
}

Retour en haut

On combine le tout

Bon, eh bien maintenant, si on veut obtenir une rotation plus complexe, nous n'avons qu'à combiner les différentes rotation que nous avons vues précédemment.

En fait si l'on regarde bien, la seule chose que nous avons modifiée pour passer de la deuxième rotation à la troisième, c'est la fonction rotation. Nous allons donc récrire les 3 fonctions mais avec un nom différent pour chacune :

Code : Actionscript

function rotationX(){ // pour la rotation dans le plan (y,z)
 
}
function rotationY(){ // pour la rotation dans le plan (x,z)
 
}
function rotationZ(){ // pour la rotation dans le plan (x,y)
 
}

Si vous avez du mal, essayez de bien regarder où et comment nous avons modifié la fonction pour passer à la rotation dans le plan défini par les vecteurs $\vec{y},\vec{z}$ .
C'est exactement le même principe pour les 3 fonctions.

Voilà : si vous pensez avoir réussi, nous allons le vérifier tout de suite.
Nous allons appliquer à notre point plusieurs mouvements de rotation :
Code : Actionscript

this.onEnterFrame = function(){
    rotationY(5)
    rotationX(5)
    rotationZ(5)
    // Pour mieux visualiser la rotation obtenue, je vous conseille de dessiner un cercle de 200 px de diamètre et de coordonnées (0,0).
    // Si votre 'clip' sort de ce cercle, vous devez avoir un problème dans votre code.
}