Tutoriel Flex et Alternativa3d : HelloWorld!

Aujourd’hui on va faire un petit Hello World avec alternativa3D sous flex. En fait ce tutoriel va consister à créer un cube que l’on pourra tourner avec la souris et qui réagira au clic en se texturant. En gros on va faire quelque chose d’assez simple pour commencer à poser les bases de l’utilisation du moteur 3D.

Pour commencer on va devoir télécharger les composants SWC du moteur en se rendant sur alternativa3D. Il vous faudra vous enregistrer sur leur site pour pouvoir télécharger les composants. Ensuite vous décompressez le fichier et vous lancez FlexBuilder. On va créer un nouveau projet que l’on appellera HelloWorld et on avance jusqu’au moment ou on va devoir choisir le nom du mxml et les dossiers de bibliothèques.

Là on va cliquer sur l’onglet Library Path et ensuite sur add SWC et ajouter les 3 SWC qui se trouvent dans le dossier Flash9 du fichier que l’on vient de dézipper. (Attention de ne pas utiliser les fichiers contenus dans Flash10!). Si tout est OK vous devriez obtenir ceci:

Et là on va pouvoir commencer à écrire notre HelloWorld. On commence par créer une classe dans le dossier src, qui contiendra tout le code et que l’on nommera Hello.as. car notre mxml principal se nomme déjà HelloWorld. Je vous colle directement tout le code du fichier Hello.as et je vais détailler les points intéressants dans la suite de l’article.

package
{
	import alternativa.engine3d.controllers.CameraController;
	import alternativa.engine3d.core.Camera3D;
	import alternativa.engine3d.core.Object3D;
	import alternativa.engine3d.core.Scene3D;
	import alternativa.engine3d.display.View;
	import alternativa.engine3d.events.MouseEvent3D;
	import alternativa.engine3d.materials.FillMaterial;
	import alternativa.engine3d.materials.TextureMaterial;
	import alternativa.engine3d.primitives.Box;
	import alternativa.types.Texture;
	import alternativa.utils.FPS;
	import alternativa.utils.MathUtils;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import mx.core.Application;
	import mx.core.UIComponent;
	public class Hello extends UIComponent {
		//variables indispensables à la creation d'une scene 3D
		private var scene:Scene3D;
		private var view:View;
		private var camera:Camera3D;
		private var cameraController:CameraController;
		//variables utils dans notre exemple
		private var box:Box;
		private var textureOnOff:Boolean = true;
		//variable de classe pour la texture
		[Embed(source="../media/wall.jpg")] private static const bmpWall:Class;
		private static const wallTexture:Texture = new Texture(new bmpWall().bitmapData, "wall");
		public function Hello() {
			super();
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		public function init(pevt:Event): void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			// Creation de la scene
			scene = new Scene3D();
			scene.root = new Object3D();
			// Creation de la camera et de la vue
			camera = new Camera3D();
			//positionnement de la camera
			camera.x = 100;
			camera.y = -150;
			camera.z = 200;
			scene.root.addChild(camera);
			//creation du cube avec texture unie
			box = new Box(100, 100, 100, 3, 3, 3, false, true);
			box.cloneMaterialToAllSurfaces(new FillMaterial(0x333333));
			box.addEventListener(MouseEvent3D.CLICK, onClick);
			scene.root.addChild(box);
			//creation et parametrage de la vue
			view = new View();
			view.interactive = true;
			addChild(view);
			view.camera = camera;
			// Connection du cameraController à la camera
			cameraController = new CameraController(stage);
			cameraController.camera = camera;
			cameraController.lookAt(box.coords);
			// Ajout du compteur de FPS
			FPS.init(stage);
			//ajout des écouteurs
			stage.addEventListener(Event.RESIZE, onResize);
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			onResize(null);
		}
		private function onClick(pevt:MouseEvent3D):void {
			if (textureOnOff == true) {
				textureOnOff = false;
				box.cloneMaterialToAllSurfaces(new TextureMaterial(wallTexture));
			} else {
				textureOnOff = true;
				box.cloneMaterialToAllSurfaces(new FillMaterial(0x333333));
			}
		}
		private function onMouseMove(pevt:MouseEvent):void {
			box.rotationX = (stage.stageWidth - stage.mouseX)/360;
			box.rotationY = (stage.stageHeight - stage.mouseY)/360;
		}
		private function onResize(pevt:Event):void {
			view.width = stage.stageWidth;
			view.height = stage.stageHeight;
			Application.application.width = stage.stageWidth;
			Application.application.height = stage.stageHeight;
		}
		protected function onEnterFrame(pevt:Event):void {
			//Calcul de la scène
			scene.calculate();
		}
	}
}

Je vous met également le contenu du fichier HelloWorld.mxml.

Et si vous êtes du genre flemmard je vous met un zip qui contient le tout (sauf les swc).

Bon, maintenant on va commencer à pouvoir détailler le code. Et on va commencer par ce que vous aurez toujours à faire pour utiliser alternativa3d. Déjà pour le coté pratique de la chose je commence par créer ma classe principale en étendant la classe UIComponent cequi me permettra de l’ajouter au stage et de la manipuler comme un composant flex habituel. Voila pourquoi je rajoute un super() dans le constructeur. Ensuite je créé mes variables nécessaires à tous projets alternativa3d.

private var scene:Scene3D;
private var view:View;
private var camera:Camera3D;
private var cameraController:CameraController;

Je pense que n’ai pas vraiment besion de détailler cette partie là. Toujours dans les déclarations de variables je déclare ma texture:

[Embed(source="../media/wall.jpg")] private static const bmpWall:Class;
private static const wallTexture:Texture = new Texture(new bmpWall().bitmapData, "wall");

On se sert de la propriété bitmapData pour créer une texture nommée wall (car il s’agit d’un mur de briques). Ensuite on va instancier toutes les variables utilisées dans notre scène.

// Creation de la scene
scene = new Scene3D();
scene.root = new Object3D();
// Creation de la camera et de la vue
camera = new Camera3D();
//positionnement de la camera
camera.x = 100;
camera.y = -150;
camera.z = 200;
scene.root.addChild(camera);
//creation du cube avec texture unie
box = new Box(100, 100, 100, 3, 3, 3, false, true);
box.cloneMaterialToAllSurfaces(new FillMaterial(0x333333));
box.addEventListener(MouseEvent3D.CLICK, onClick);
scene.root.addChild(box);

Dans la déclaration du cube les « 100″ représentent les dimensions du cube, les « 3″ représentent le nombre de segments pour chaque dimension, le false indique qu’il s’agit du cube normal et non « reverse » et
et enfin le true indique que les segments sont triangulés. Plus vous rajoutez de segments à votre objets plus il sera précis mais plus il consommera de ressources. Pareil pour la triangulation. La méthode cloneMaterialToAllSurfaces
permet d’appliquer une texture à toutes les surfaces de notre cube et le FillMaterial permet de créer une texture de couleur unie.

//creation et parametrage de la vue
view = new View();
view.interactive = true;
addChild(view);
view.camera = camera;

Ne pas oublier le view.interactive = true pour pouvoir diffuser des événements sur des objets3D

// Connection du cameraController à la camera
cameraController = new CameraController(stage);
cameraController.camera = camera;
cameraController.lookAt(box.coords);

On dirige la caméra sur notre cube.

// Ajout du compteur de FPS
FPS.init(stage);
//ajout des écouteurs
stage.addEventListener(Event.RESIZE, onResize);
stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
onResize(null);

Pour le click sur le cube qui ajoute la texture on fait appel à un booléen qui est à true quand le cube est de couleur unie et qui passe à false quand le cube est texturé. Ceci est fait dans la fonction onClick ou l’on fait encore appel
à la méthode cloneMaterialTo AllSurfaces.

private function onMouseMove(pevt:MouseEvent):void {
			box.rotationX = (stage.stageWidth - stage.mouseX)/360;
			box.rotationY = (stage.stageHeight - stage.mouseY)/360;
		}

Pour le mouvement du cube on utilise les propiétés rotationX et Y en fonction de la position de la souris par rapport au stage. Attention alternativa3d utilise des radians et non des degrés. La fonction onResize permet de redimensionner la view et le stage en fonction de la taille disponible
du navigateur et des redimensionnements qu’il pourrait subir.

Voila c’est tout pour ce premier tuto. Dans le prochain on verra la création de forme particulière ainsi que la façon de texturer « propre ».

UPDATE : j’avais oublié de vous mettre le swf dans l’article pour que vous pussiez voir le résultat.

[SWF]http://www.mnt-tech.fr/blog/upload/alternativa3d/HelloWorld.swf, 640, 640[/SWF]