Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Sandy 3d

Compatible Flex Builder. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis Exter), le 28 janvier 2009

Dans ce tutoriel nous allons voir comment intégrer le moteur 3D de Sandy dans un projet Flex, par un exemple simple, un cube en rotation.

Vous devez télécharger l’API de Sandy à l’adresse suivante :

http://www.flashsandy.org

Pour ce faire, il y a deux méthodes, soit vous télécharger le code source à l’adresse suivante :

http://www.flashsandy.org/download

soit vous récupérez le code source depuis le SVN à l’adresse suivante :

http://sandy.googlecode.com/svn/trunk/sandy/as3/branches/3.0.2/

Nous allons maintenant créer notre projet FLex à l’aide de Flex Builder pour cela il faut cliquer sur le menu « File » –> « New » –> »Flex project », nommer votre projet « Sandy3D ».

Il faut ensuite intégrer la librairie de Sandy dans notre projet, pour ce faire, il suffit de copier le répértoire « sandy » qui contient toutes les classes du moteur 3D sous le répertoire « src » de notre projet Flex.

Nous allons commencer par importer tous les packages que nous allons utiliser dans notre projet, je reviendrai dessus plus tard :

import sandy.materials.Appearance;
import sandy.core.Scene3D;
import sandy.primitive.Box;
import sandy.core.scenegraph.Group;
import sandy.core.scenegraph.Camera3D;
import sandy.materials.ColorMaterial;
import sandy.materials.attributes.MaterialAttributes;
import sandy.materials.attributes.LightAttributes;

Nous allons maintenant initialiser quelques variables globales :

	private var scene:Scene3D;
	private var camera:Camera3D;
	private var g:Group;
	private var box:Box;

La première variable représente la scène dans laquelle on va créer ou charger des objets, il s’agit en fait d’un container.

La deuxième variable est utilisée pour rendre votre scène 3D, cela correspond au point de vue de l’utilisateur à l’intérieur de la scène. Elle peut être située dans la scène, et nous pouvons lui dire dans quelle direction regarder.

La troisième variable définit le groupe d’objet que nous allons utiliser dans notre scène. La relation entre les différents objets de notre scène peuvent être apparentés à un arbre, dont le groupe, en serait la racine.

La quatrième variable définit notre cube.

Afin de rendre notre animation 3D dans Flex, nous allons ajouter un container :

	<mx :UIComponent id= « spriteContainer » width= « 100% » height= « 100% »/>

Nous allons ensuite, définir notre groupe qui en l’occurrence, pour notre exemple, ne contiendra qu’un objet :

g = new Group();
 

Qui est notre cube, que l’on définit ci-dessous avec 3 arrêtes de 100px.

      	box = new Box( "box",100,100,100);

Nous allons l’incliner légèrement sur les axes x et y, afin que l’on voit bien toutes les surfaces lors de sa rotation sur lui-même.

      	box.rotateX = 30;
      	box.rotateY = 30;

Nous allons ensuite colorer un peu les surfaces de notre cube, pour cela nous devons utiliser les classes “Material” & “Appearance”, qui s’apparente à des skins. Dans Sandy3D, si nous ne définissons pas d’apparence, les objets sont rendus sous forme de fil de fer.

 	var mattAttr:MaterialAttributes = new MaterialAttributes(new LightAttributes( true, 0.3 ));

La classe “MaterialAttributes” accèpte plusieurs arguments, dans notre exemple nous avons simplement utilisé « LightAttributes » qui permet de définir la rangée d’utilisation de la lumière, et le niveau de lumière.

Nous devons ensuite définir quel type de matériel nous allons appliquer à cet attribut, dans notre cas il s’agit de « ColorMaterial » qui est le matériel le plus simple à utiliser.

	var cm:ColorMaterial = new ColorMaterial(0x00FF00,100, mattAttr);
	cm.lightingEnable=true;

Nous avons juste attributé la couleur verte aux face de notre cube, avec l’attribut « lightingEnable » activé, ce qui aura pour effet un rendu avec des ombres, les faces avant seront plus claires, et les faces arrières seront plus sombres.

	box.appearance=new Appearance(cm);

Puis nous ajoutons notre cube au groupe définit précédemment:

      	g.addChild( box );

Nous définissons notre camera et notre scène:

	camera=new Camera3D( 550, 400 )
scene = new Scene3D( "myScene", spriteContainer, camera, g );

Et finalement nous ajoutons un écouteur qui va s’occuper de rendre notre scène.

	addEventListener( Event.ENTER_FRAME, enterFrameHandler );

Dans cet écouteur, nous effectuons une rotation à notre cube selon son axe y, et nous effectuons le rendu.

private function enterFrameHandler( event : Event ) : void
	{
		box.rotateY += 0.5;
		scene.render();
	}

Le résultat :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

En conclusion, je vous invite à visiter le site de FlashSandy, il y a de nombreux tutoriaux, et toute la documentation, mais le mieux pour apprendre, est de jouer avec, et d’essayer de modifier les paramètres, et de voir quels effets cela a sur votre composition.

Télécharger le fichier du projet
Pour en discuter sur le forum