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

Formes 3D

Par

heero78

Mise à jour : 13/01/2009

Difficulté : Intermédiaire

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

Faire tourner un point c'est bien, mais en faire tourner deux c'est mieux.

Dans ce tuto on va essayer de construire une forme relativement simple : un cube.
C'est partiiiiiiiiiiiiiiiiiiiiiiii !

Retour en haut

Sommaire du chapitre :

Gérer plusieurs points
Mouvement simultané
Relier les points
Un cube

Retour en haut

Gérer plusieurs points

En écrivant notre code, vous avez sûrement remarqué que nos trois fonctions ne peuvent faire tourner qu'un seul et unique point.
Nous allons donc les modifier pour qu'elles puissent faire tourner n'importe quel point.
Pour cela, nous devons ajouter dans les paramètres de nos fonctions un MovieClip qui fera le lien vers le point que nous voulons traiter.
Code : Actionscript

function placer_clip(clip:MovieClip){
    clip._x = 100
}
placer_clip(monClip)
// En exécutant la fonction, le MovieClip 'clip' va faire référence au MovieClip 'monClip'. 
// Mais dans une ligne suivante, nous pouvons tout aussi bien exécuter la fonction 'placer_clip()' avec un autre MovieClip.

Dans notre cas, notre code sera modifié comme cela :
Code : Actionscript

function conversion_radians(degre:Number):Number{
    return degre/180*Math.PI;
}
function rotationZ(point:MovieClip,angle:Number):Void{ // ligne modifiée et importante
    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;
    var newY:Number = (point.y-centreY)*cosAngle+(point.x-centreX)*sinAngle;
    point.x = centreX+newX;
    point.y = centreY+newY;
    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 point1:MovieClip = new MovieClip(); // ligne modifiée
point1.x = 0; // ligne modifiée
point1.y = 100; // ligne modifiée
point1.z = 0; // ligne modifiée
var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point1.x // ligne modifiée
clip._y = point1.y // ligne modifiée
// clip.swapDepths(point1.z) // ligne modifiée
this.onEnterFrame = function(){
    rotationZ(point1,5) // ligne modifiée et importante
}

Dans ce code, je n'ai fait apparaitre qu'une seule des trois fonctions ; il faudra faire les mêmes modifications pour chaque fonction (juste ajouter le paramètre, en fait

Maintenant si nous voulons ajouter un point, rien de plus simple :
Code : Actionscript

var point2:MovieClip = new MovieClip();
point2.x = 200;
point2.y = 100;
point2.z = 0;
// Par contre, il ne faut pas lui donner les mêmes coordonnées que le 'point1', sinon ils seront confondus et donc il y en a un qui ne nous servira à rien. ^^ (À moins qu'on lui applique des rotations différentes.)

Puis pour lui appliquer à lui aussi des rotations, il faut modifier la fonction qui s'exécute avec l'évènement onEnterFrame :
Code : Actionscript

this.onEnterFrame = function(){
    rotationZ(point1,5)
    rotationZ(point2,2) // ligne ajoutée
}

Retour en haut

Mouvement simultané

Petite remarque : si nous voulons créer une forme qui puisse tourner, il faut que tous les points tournent à la même vitesse.
Et donc, contrairement à la boucle précédente, nous aurions plutôt ce code-ci :
Code : Actionscript

this.onEnterFrame = function(){
    rotationZ(point1,5)
    rotationZ(point2,5) // Même angle que pour le 'point1'.
}

Et l'avantage d'avoir nommé nos points comme cela, c'est que nous pouvons maintenant écrire une boucle qui va faire tourner tout nos point :
Code : Actionscript

this.onEnterFrame = function(){
    for(var i:Number = 1; i <= 2 ; i++){
        rotationZ(this['point'+i],5)
    }
}
// rotation de 'point1' puis de 'point2'

Ce code ne vous paraît peut-être pas très avantageux, mais je suis sûr que beaucoup d'entre vous auront compris qu'en changeant uniquement i <= 2 par i <= 5, nous allons faire tourner 5 points au lieu de 2 (si nous les avons créés précédemment, bien sûr).

Retour en haut

Relier les points

Si vous avez testé le code précédent, vous avez sûrement remarqué que notre clip ne simule le mouvement que d'un seul point.
Pour visualiser le deuxième, il faudrait créer un deuxième clip.

Avant de vous jeter dans cette tentative, je vais vous proposer une autre méthode.
Au lieu de visualiser les mouvements des points avec des clips, nous allons simplement relier les points entre eux.

Dans un premier temps, supprimons toutes les lignes qui deviennent inutiles, c'est-à-dire toutes les lignes qui créent et positionnent notre clip :
Code : Actionscript

var clip:MovieClip = this.attachMovie('boule','mc_boule',1);
clip._x = point1.x
clip._y = point1.y
// clip.swapDepths(point1.z)

Et dans les fonctions :
Code : Actionscript

clip._x = point.x;
clip._y = point.y;
// clip.swapDepths(point.z)
clip._xscale = point.z + 200
clip._yscale = point.z + 200

On a donc supprimé 19 lignes de notre script (4 + 3*5), c'est donc une bonne phase d'optimisation.

Maintenant, créons la fonction qui va relier nos deux points :
Code : Actionscript

function relier(){
    this.clear()
    this.lineStyle(1,0x000000,100)
    this.moveTo(point1.x,point1.y)
    this.lineTo(point2.x,point2.y)
}

Puis exécutons-la dans notre boucle :
Code : Actionscript

this.onEnterFrame = function(){
    for(var i:Number = 1; i <= 2 ; i++){
        rotationZ(this['point'+i],5)
    }
    relier() // ligne ajoutée
}

Retour en haut

Un cube

Bon : dans cette partie, on va mettre en pratique ce que nous venons de voir depuis le début de ce chapitre.
Nous allons créer un cube.

Alors, en premier, il faut savoir de combien de points nous aurons besoin pour créer un cube.
Secret (cliquez pour afficher)

1 par somme, donc 8 points.

Au lieu d'écrire 8 fois les 4 lignes pour créer un point, je vous propose de créer une fonction qui exécutera une boucle 8 fois.
Pour les coordonnées des points, vous pouvez par exemple les enregistrer dans un tableau.
Code : Actionscript

function init():Void{
    var tabX:Array = new Array(50,150,150,50,50,150,150,50);
    var tabY:Array = new Array(50,50,150,150,50,50,150,150);
    var tabZ:Array = new Array(-50,-50,-50,-50,50,50,50,50);
    for(var i:Number = 1 ; i <= 8 ; i++){
        var clip:MovieClip = this.createEmptyMovieClip("point"+i,i);
        clip.x = tabX[i-1];
        clip.y = tabY[i-1];
        clip.z = tabZ[i-1];
    }
}
init() // On exécute la fonction

Maintenant que nous avons créé nos points, encore faut-il relier les bons entre eux. Pour cela il nous faut modifier la fonction tracer().
Étant donné l'ordre dans lequel nous avons créé les points (en fonction de la position dans les tableaux), il faut relier le point1 au point2 puis au point3 et enfin au point4.
Pareil pour les points 5, 6, 7, 8.
Et enfin relier deux à deux les points 1, 2, 3, 4 aux points 5, 6, 7, 8.

Maintenant, votre code devrait se composer :