Création et déplacement d’objets d’affichage 3D

Flash Player 10 et les versions ultérieures, Adobe AIR 1.5 et les versions ultérieures

Pour convertir un objet d’affichage 2D en objet d’affichage 3D, vous devez explicitement définir sa propriété z sur une valeur numérique. Lorsque vous affectez une valeur à la propriété z , un objet Transform est créé pour l’objet d’affichage. La définition des propriétés DisplayObject.rotationX ou DisplayObject.rotationY crée également un objet Transform. Celui-ci contient une propriété Matrix3D qui régit la représentation de l’objet d’affichage dans l’espace 3D.

Le code suivant définit les coordonnées d’un objet d’affichage appelé « leaf » (feuille) : 

leaf.x = 100; leaf.y = 50; leaf.z = -30;

Vous pouvez visualiser ces valeurs, ainsi que les propriétés qui en dérivent, dans la propriété matrix3D de l’objet Transform de la feuille : 

var leafMatrix:Matrix3D  = leaf.transform.matrix3D; 
 
trace(leafMatrix.position.x); 
trace(leafMatrix.position.y); 
trace(leafMatrix.position.z); 
trace(leafMatrix.position.length); 
trace(leafMatrix.position.lengthSquared);

Pour plus d’informations sur les propriétés de l’objet Transform, voir la classe Transform . Pour plus d’informations sur les propriétés de l’objet Matrix3D, voir la classe Matrix3D .

Déplacement d’un objet dans l’espace 3D

Vous pouvez déplacer un objet dans l’espace 3D en modifiant la valeur de ses propriétés x, y ou z . Lorsque vous modifiez la valeur de sa propriété z , l’objet semble se rapprocher ou s’éloigner de l’observateur.

Le code suivant modifie la valeur de la propriété z de deux ellipses en réponse à un événement pour leur imprimer un mouvement de va-et-vient le long de leur axe z. ellipse2 se déplace plus rapidement qu’ ellipse1 : sa propriété z est incrémentée d’un multiple de 20 sur chaque événement Frame, alors que la propriété z d’ ellipse1 est incrémentée d’un multiple de 10 : 

var depth:int = 1000; 
 
function ellipse1FrameHandler(e:Event):void 
{ 
    ellipse1Back = setDepth(e, ellipse1Back); 
    e.currentTarget.z += ellipse1Back * 10; 
} 
function ellipse2FrameHandler(e:Event):void 
{ 
    ellipse2Back = setDepth(e, ellipse1Back); 
    e.currentTarget.z += ellipse1Back * 20; 
} 
function setDepth(e:Event, d:int):int 
{ 
    if(e.currentTarget.z > depth) 
    { 
        e.currentTarget.z = depth; 
        d = -1; 
    } 
    else if (e.currentTarget.z <  0) 
    { 
        e.currentTarget.z = 0; 
        d = 1; 
    } 
}

Rotation d’un objet dans l’espace 3D

Vous pouvez faire pivoter un objet de trois façons différentes, selon la définition de sa propriété de rotation : rotationX , rotationY et rotationZ .

La figure ci-dessous illustre deux carrés qui ne sont pas soumis à une rotation :

Dans la figure suivante, la propriété rotationY du conteneur des carrés a été incrémentée pour les faire pivoter sur l’axe y. La rotation du conteneur, ou objet d’affichage parent, des deux carrés fait pivoter ceux-ci : 

container.rotationY += 10;

Dans la figure suivante, la propriété rotationX du conteneur des carrés est modifiée : Elle fait pivoter ceux-ci sur l’axe x.

Dans la figure suivante, la propriété rotationZ du conteneur des carrés a été incrémentée et ceux-ci pivotent sur l’axe z.

Un objet d’affichage peut se déplacer et pivoter simultanément dans l’espace 3D.