Papervision3D. Vérifiez que le trace du constructeur s'affiche bien dans le panneau de sortie avant de passer à l'étape suivante.

Transcription

1 1 sur 5 02/02/ :39 Production multimédia - TP3 Licence ATC Corpsem Matthieu Chavigny Papervision3D Introduction Papervision3D est un ensemble de classes en ActionScript 3 permettant de créer, d'importer, d'afficher et d'animer des objets en 3 dimensions. 1) Préparation Pour commencer, créez un dossier de travail sur le bureau si vous n'en avez pas encore sur ce poste puis créez un dossier "TP3 AS3" et un dossier "classes" à l'intérieur. Téléchargez les classes Papervision3D en recherchant sur Google et en cliquant sur "papervision3d Google Code" puis sélectionnez "Papervision3D_2.0_beta_1_src.zip" dans la liste des "Featured Downloads" ou, téléchargez-les directement par ce lien : /files/papervision3d_2.0_beta_1_src.zip Une fois téléchargée, ouvrez l'archive puis copiez le dossier "org" dans votre dossier "classes" et supprimez le fichiers zip et tous les autres fichiers concernant Papervision. Pendant le TP vous pourrez vous référer à la documentation complète des classes de Papervision qui se trouve à cette adresse : 2) Création d'un cube en 3D Lancez Adobe Flash CS3 et créez une nouvelle animation flash avec les mêmes paramètres de publication qu'au TP1 et 2 (indiquez le chemin de classe "./classes/" et décochez "Déclarer automatiquement les occurrences de scène"). Changez la dimension de la scène en 400x400 et réglez la cadence d'animation à 30 images par seconde. Enregistrez le fichier à la racine de votre dossier de travail en la nommant "cube.fla". Dans Flash CS3 créez la classe CubeAnim.as (Fichier > Nouveau > "Fichier ActionScript") et enregistrez-la dans votre dossier classes. Déclarez la classe avec "extends MovieClip" et son constructeur (en ajoutant un trace à l'intérieur) puis liez la classe à l'animation cube.fla. Vérifiez que le trace du constructeur s'affiche bien dans le panneau de sortie avant de passer à l'étape suivante. Il est maintenant temps de préparer les éléments qui permettront d'afficher un cube sur la scène. Pour cela, vous devrez créer : - Un objet de la classe Viewport3D (org.papervision3d.view.viewport3d). C'est la zone à travers laquelle on observera le rendu 3D, vous devrez indiquer ses dimensions dans les paramètres de son constructeur : new Viewport3D(stage.stageWidth, stage.stageheight) puis ajouter cet objet à l'animation flash via la méthode addchild. - Un objet de la classe Scene3D (org.papervision3d.scenes.scene3d). C'est l'endroit qui contient l'environnement 3D. Les objets 3D seront placés dans cette scène. - Un objet de la classe Camera3D (org.papervision3d.cameras.camera3d). L'objet caméra permettra de définir le point de vue du spectateur sur la scène. - Un objet de la classe BasicRenderEngine (org.papervision3d.render.basicrenderengine). Il reliera ensemble Viewport3D, Scene3D, et Camera3D pour collecter leurs données, générer un rendu, puis appeler les fonctions nécessaires à la mise à jour du rendu (avec la méthode

2 2 sur 5 02/02/ :39 renderscene). Dans votre classe CubeAnim, importez les différentes classes (les chemins sont indiqués entre parenthèses), déclarez un objet pour chaque classe (en private) et créez-les dans une nouvelle méthode privée "creerscene" que vous appellerez dans le constructeur de la classe. Compilez l'animation pour vérifier qu'il n'y a pas d'erreur. Maintenant que la scène est initialisée, on ajoute le cube grace au 3 classes suivantes : - La classe ColorMaterial (org.papervision3d.materials.colormaterial) sert à définir une texture de couleur unie à partir d'une valeur en hexadécimale. - La classe MaterialsList (org.papervision3d.materials.utils.materialslist) définit une liste de matériaux (dans notre cas, chaque face du cube). - Et enfin la classe Cube (org.papervision3d.objects.primitives.cube) permet de créer le cube lui-même. On indique dans les paramètres du constructeur la liste des matériaux (classe MaterialsList), la largeur, la profondeur et la hauteur du cube. Importez ces classes dont vous aurez besoin puis déclarez un objet de la classe Cube en propriété privée. Créez une nouvelle méthode "creercube" dans lequel vous ajouterez le code pour créer l'objet cube avec en paramètres la MaterialsList décrite ci-dessous et des côtés de 300 pixels. new MaterialsList( front: new ColorMaterial(0x7EBAE7), top: new ColorMaterial(0xDBB58A), left: new ColorMaterial(0xF1FC69), back: new ColorMaterial(0xCB2816), bottom: new ColorMaterial(0x4E9491), right: new ColorMaterial(0xA281E4) ) Ajoutez le cube à la scène Papervision en utilisant la méthode addchild sur l'objet de la classe Scene3D précédement créé. Dans le constructeur de la classe, appelez la méthode creercube() et la méthode renderscene avec en paramètres la Scene3D, la Camera3D et la Viewport3D sur l'objet de la classe BasicRenderEngine précédement créé. En compilant l'animation, vous devriez voir apparaitre un carré (le cube vue de face). Essayez maintenant de modifier la position du cube dans l'espace en modifiant les valeurs de ses propriétés : x, y, z, rotationx, rotationy, rotationz. 3) Animation du cube Pour animer le cube, il suffit de modifier ses propriétés à chaque frame et de recalculer son rendu. Ajouter un écouteur sur l'événement Event.ENTER_FRAME (flash.events.event) pour lancer une fonction dans laquelle vous incrémenterez les propriétés de rotation du cube et appellerez la fonction renderscene de la même manière que dans le constructeur.

3 3 sur 5 02/02/ :39 4) Création d'une sphère Dupliquez l'animation flash cube.fla, nommez la "sphere.fla" et liez-la à la classe SphereAnim. Créez le fichier de classe "SphereAnim.as" à partir du Cube.as : - Remplacez le nom de la classe et du constructeur - Supprimez l'importation de la classe Cube, la méthode creercube et ce qui fait référence au cube (laissez le rendu de la scène dans la méthode appelée à chaque frame). - Déclarez une nouvelle méthode "creersphere" et un objet de la classe Sphere (org.papervision3d.objects.primitives.sphere) appelé "sphere" dans les propriétés de classe - Créez la sphère dans la méthode creersphere en indiquant comme paramètres du constructeur Sphere (la matière, le diamètre, nombre de segments horizontales, nombre de segments verticales) : null, 300, 13, Ajoutez la sphère à la scène 3D. - Appelez la méthode creersphere dans le constructeur. 5) Contrôler la caméra Le but est de zoomer et dézoomer sur la scène avec la molette de la souris, pour cela : - Créez la méthode "mousewheel" qui sera appelée quand on actionnera la roulette. - N'oubliez pas qu'une méthode appelée depuis un écouteur d'événement, reçoit un objet du type de l'événement (MouseEvent) en paramètre. - Dans le constructeur, ajoutez sur l'objet stage un écouteur de l'événement MouseEvent.MOUSE_WHEEL (flash.events.mouseevent) - Dans cette méthode, faire varier la propriété z de la camera en fonction la propriété "delta" de l'objet MouseEvent reçu en paramètre (c'est un nombre qui désigne de combien la molette a été tournée). 6) Contrôler la sphère Le but est de pouvoir faire tourner la sphère sur elle-même en glissant avec la souris. - Déclarez une méthode setmousedown et setmouseup sur les événements MouseEvent.MOUSE_DOWN et MouseEvent.MOUSE_UP à écouter sur le stage. - Déclarez une propriété "mousedown" de type Boolean que vous mettrez à true dans la méthode setmousedown et à false dans la méthode setmouseup. - Déclarez une propriété "deplacementx" de Number pour mémoriser la propriété mousex dans la méthode setmousedown. - Dans la méthode appelée à chaque frame, ajoutez le code suivant pour faire tourner la sphère en fonction du déplacement horizontal de la souris : if (mousedown) if (mousex!= deplacementx) sphere.rotationy += deplacementx - mousex; deplacementx = mousex; 7) Ajouter une texture Dans les paramètres du constructeur de la sphère, remplacez null par un objet de la classe "BitmapFileMaterial" (org.papervision3d.materials.bitmapfilematerial) : new BitmapFileMaterial(" 8) Importer un objet 3D Papervision3D permet également d'importer des fichiers d'objets 3D créés dans des logiciels de 3D comme 3Ds Studio Max. Téléchargez un fichier d'objet en 3D (un avion) réalisé sous 3DS Max : Placez ce fichier à la racine de votre dossier de travail. Créez une classe Avion.as dans votre dossier de classes. Dupliquez l'animation flash sphere.fla, nommez la "avion.fla" et liez-la à la classe Avion : package

4 LICENCE AS3 TP3 4 sur 5 02/02/ :39 import flash.display.movieclip; import org.papervision3d.materials.bitmapfilematerial; // Pour créer la scene Papervision import org.papervision3d.view.viewport3d; import org.papervision3d.cameras.camera3d; import org.papervision3d.scenes.scene3d; import org.papervision3d.render.basicrenderengine; // Pour créer la sphere import org.papervision3d.objects.parsers.max3ds; // Pour l'événement EnterFrame import flash.events.event; // Pour gérer les événements de souris import flash.events.mouseevent; public class Avion extends MovieClip private var viewport:viewport3d; private var camera:camera3d; private var scene:scene3d; private var renderer:basicrenderengine; private var avion:max3ds; private var mousedown:boolean = false; private var mousexsav:number; private var mousexdown:number; public function Avion() trace("avion"); creerscene(); creeravion(); addeventlistener(event.enter_frame, handlerenterframe); stage.addeventlistener(mouseevent.mouse_wheel, onmousewheel); stage.addeventlistener(mouseevent.mouse_down, setmousedown); stage.addeventlistener(mouseevent.mouse_up, setmouseup); mousexsav = mousex; mousexdown = mousex; camera.z = -70;,true); private function setmousedown(e:mouseevent):void mousexdown = mousex; mousedown = true; private function setmouseup(e:mouseevent):void mousedown = false; private function creerscene():void viewport = new Viewport3D(stage.stageWidth, stage.stageheight, true addchild(viewport); renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); private function creeravion():void

5 LICENCE AS3 TP3 5 sur 5 02/02/ :39 avion = new Max3DS(); avion.load("avion.3ds"); scene.addchild(avion); private function handlerenterframe( e:event ):void //Gestion de la souris pour faire glisser l'objet if (mousedown) mousexsav = mousex; avion.rotationy += (mousexdown - mousexsav) / 15; if (mousexdown>mousexsav) mousexdown -= (mousexdown - mousexsav)/15; if (mousexdown<mousexsav) mousexdown += (mousexsav - mousexdown)/15; // Rendu de la scène 3D renderer.renderscene(scene, camera, viewport); private function onmousewheel(e:mouseevent):void // Fait varier le zoom de la caméra selon de combien la roulette a tourné camera.z -= e.delta * 2;