Sandy 3D : Animations et interactions avec des objets 3d.

Maintenant que nous savons créer des formes simples, il serait intéressant de pouvoir les animer, voir même intéragir avec elles.

I/ Animation d'un objet 3d

Pour se faire, nous allons utiliser les propriètés des objets 3D.
Les propriètés sont :

• x : pour effectuer une translation sur l'axe x.
• y : pour effectuer une translation sur l'axe y.
• z : pour effectuer une translation sur l'axe z.
• rotateX : pour effectuer une rotation autour de l'axe x.
• rotateY : pour effectuer une rotation autour de l'axe y.
• rotateZ : pour effectuer une rotation autour de l'axe z.

Pour utiliser ces propriètés, nous allons réutiliser l'exemple du précédent tutoriel( Sandy 3D : Premier Objet 3D simple (Plane) ) où nous avons créer une Plane. Nous modifierons un peu le code pour obtenir une rotation de l'objet sur lui même en continu. J'en profiterais aussi pour utiliser un nouveau 'material' à appliquer sur la Plane pour la texturer avec une Image.

Code Source

package {
  import sandy.core.Scene3D;
  import sandy.core.data.*;
  import sandy.core.scenegraph.*;
  import sandy.primitive.Plane3D;
  import flash.display.*;
  import flash.events.*;
  //Ajout
  import flash.net.URLRequest;
  import sandy.materials.*;
  import sandy.materials.attributes.*;
 

  public class Main extends Sprite {
    private var scene:Scene3D;
    private var camera:Camera3D;
    private var plane:Plane3D;
    //Ajout
    var loader:Loader;
    private var material:Material;   

    public function Main():void{
        loadImgs();
    }
   
    //Ajout des 2 fonctions suivantes
    private function loadImgs():void{
        loader = new Loader();
        var file:URLRequest = new URLRequest("grin.png");
        loader.load(file);
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, initList);
    }
   
    public function initList(e:Event):void{
        initSandy();
        initMaterials();
        initObjects();
        initListeners();
    }
   
    private function initSandy():void{
        camera = new Camera3D(300, 300);
        scene = new Scene3D("scene", this, camera, new Group());
    }

    //Ajout de initListeners()
    private function initListeners():void{
        plane.container.addEventListener(MouseEvent.CLICK, planeClick);
        addEventListener(Event.ENTER_FRAME, render);
    }
   
    private function render(e:Event):void {
        plane.rotateY ++; //Ajout d'une rotation autour de l'axe Y
        scene.render();
    }
   
    private function initObjects():void{
        plane = new Plane3D("plane", 100, 100, 8, 8);
        //Ajout
        plane.enableBackFaceCulling = false; //Applique le materiel sur les 2 faces du Plane
        plane.appearance = new Appearance(material);
        scene.root.addChild(plane);
    }
   
    //Ajout des 2 fonctions
    private function initMaterials():void{
        var bmp:Bitmap = Bitmap(loader.content);
        material = new BitmapMaterial(bmp.bitmapData);
    }

    private function planeClick(e:MouseEvent):void{
         plane.x +=50;
    }
  }
}

Résultat Obtenu

Pour ma part, mon fichier de texture est ce smiley, le fond de l'image est transparent, c'est pour cela que la Plane n'a dessiné que le smiley et non le fond. Par contre, même si le fond reste transparent, il reste tout de même cliquable. Dans cet exemple, la Plane tourne sur elle même et se déplace vers la droite si l'on clique dessus. Nous aurions pu tout aussi bien définir une autre action telle que la navigation vers une autre page internet via navigateToUrl() par exemple.

Explications

Passons maintenant aux explications du code ci-dessus.
Comme d'habitude, nous effectuons les imports de classes nécessaires, ici nous aurons besoin de différents évênements pour réaliser les interactions avec notre Plane, c'est pour ceci que nous ajoutons la classe Event. Nous souhaitons aussi appliquer une texture sur notre objet depuis un fichier donc nous ajoutons URLRequest, ainsi que les différents matériaux de Sandy 3D.

Ensuite, nous créons un 'material' à appliquer sur notre objet pour le texturer. Nous avons besoin d'utiliser la proprièté enableBackFaceCulling sur notre objet, ce qui spécifie que l'on texture les deux faces de l'objet.

Ceci fait, nous ajoutons des écouteurs d'évênements sur Event.ENTER_FRAME pour créer la rotation continu de notre objet sur lui même ainsi que l'écouteur d'évênements pour le clique sur l'objet via plane.container.addEventListener(MouseEvent.CLICK, planeClick).

new BitmapMaterial( bitmapData );

• bitmapData: de type BitmapData, représente le fichier image charger via URLRequest() et servant de texture à appliquer sur l'objet.

Il existe aussi d'autre matériaux au sein de Sandy 3D tel que :

new ColorMaterial( color );

• color : de type uint, il représente le code couleur hexadécimal de la couleur à appliquer (ex: 0x00ff00 : vert).

Voilà pour ce tutoriel sur l'animation et l'intéraction des objets 3D. Dans un prochain tutoriel( Sandy 3D : Intégration de Tweens via Caurina. ), nous verrons l'utilisation de la bibliothèque Caurina pour l'application de Tweens sur nos objets 3D pour rendre les animations plus fluides et plus esthétiques.

Ce tutoriel vous a été utile? Abonnez-vous au fil RSS !

Cordialement, Romain Dedenis.