Away3D : Installation et première animation

Le 4 mai 2011 - 3D, Molehill, Tutoriaux  -  1 Commentaire

Voici le premier article d'une (assez) longue série de tutorial sur Away3D.

Déjà pourquoi Away3D plutôt qu'Alternativa3D, papervision, ou autre ? Mon choix s'est porté sur ce moteur qui est selon moi celui qui propose le meilleur compromis entre rapidité et performance. Alternativa3D est très performant mais il n'est pas Open Source et Papervision a été abandonné me semble t-il. Il y a de nouveaux concurrents avec l'arrivée de Molehill qui changera peut être la donne, mais il est trop tôt pour en juger.

Installation
Donc on va commencer par le tout début. Pour les tutos qui vont suivre, j'utilise la version 3.6, vous pouvez la télécharger ici :
http://away3d.com/download/away3d_3_6_0.zip. Je vais utiliser Flash mais vous pouvez tout aussi bien le faire avec Flex.

Copiez les dossiers 'away3d', 'nochump' et 'wumedia' dans le dossier contenant le .fla (vous pouvez le mettre ailleurs bien sur, mais pour l'instant ce sera plus simple, Flash le trouvera automatiquement). Dans mes exemples je mets également les classes à la racine, c'est plus facile ensuite pour les partager.

Hello World
On va donc commencer par un « Hello World » en quelque sorte, simplement l'affichage d'un cube :

package {
	import flash.display.Sprite;
	import away3d.containers.View3D;
	import away3d.primitives.Cube;
 
	public class Hello extends Sprite {
		public function Hello() {
			var view:View3D = new View3D({x:200,y:150});
			this.addChild(view);
			var cube:Cube = new Cube();
			view.scene.addChild(cube);
			view.render();
		}
	}
}

La classe View3D est la vue principale dans Away3D qui est utilisé pour tout ce qui touchera la 3D. On ajoute toujours cette vue sur la scène comme un objet classique, et a donc une position, c'est a dire que l'on peut mettre des éléments à coté non 3D (ex un menu, background, etc).
Ici je l'ai placer au centre de mon animation en x, y.

Elle possède une propriété 'scene' qui est une objet Scene3D, qui est donc la scene 3D principale. C'est un peu l'équivalent de 'stage'. On va donc ajouter les objets sur cette scene (directement ou non).

Enfin il faut rafraîchir la vue par la méthode render(). Cette fonction fait un rendu de ce qui est visible. Lorsqu'on fera une animation il faudra donc appeler cette méthode dans un enterFrame ou un Timer (ou tout autre méthode appelé de façon successive).

Vous devriez avoir ceci:

This movie requires Flash Player 9

Vous avez fait votre première animation 3D! Bon ok c'est pas encore impressionnant, mais ça viendra avec la suite :
Tutorial 2 : Camera et mouvements de caméra
Tutorial 3 : Primitives, les principaux objets dont vous aurez besoin
Tutorial 4 : Materials (à venir)
Tutorial 5 : Lights, les différents éclairages (à venir)

Commentaires (1)

  • Trés bon debut , chapeau et dommage pour papervision jai toujours sur moi la formation lynda qui avait l'air d'etre assez riche quand meme , pour Away je vois sur le site la sortie de la ver 4 en alpha mais impossible à télécharger merci

Laisser un commentaire