Blog Papervision3D

Blog Français sur Papervision3D

Chargement de modèle 3D, les fichiers DAE.

Posté par Ocelyn le 15 octobre, 2009 | 15 commentaires 
Publié dans Tutoriaux

Aujourd’hui, nous allons voir une des manières possible pour charger un modèle 3D dans Papervision et plus précisément un fichier DAE tiré de Google Sketchup.

Google Sketchup propose une grande base de donnée de modèle 3D, vous trouverez facilement votre bonheur sur ce site :)

Dans le cadre de notre exercice, nous allons utiliser une tour Eiffel.

Vous verrez que vous avez la possibilité de télécharger plusieurs type de modèle, pour notre exemple nous téléchargerons le fichier Collada contenu dans un zip.

Astuce : Vous pouvez aussi télécharger le fichier Google Earth 4 .kmz et remplacer l’extension par un .zip vous aurez alors le même type de fichier qu’au dessus :)

Après avoir téléchargé votre .zip en le décompressant vous aurez un dossier nommé Untitled, dedans 2 fichiers et 2 dossiers, vous pouvez supprimer les deux fichiers doc.kml et textures.txt qui ne nous sont pas utile.

Enfin copiez votre dossier Untitled à coté de votre fichier .html

Nous pouvons passer au code :

Nous créons un nouveau objet DAE (ligne 17) et chargeons notre modèle (ligne 18) en lui passant le chemin vers le modèle DAE, ici le dossier Untitled / models / model.dae, si vous ouvrez votre swf dans une page HTML le chemin sera par rapport à la position de notre page HTML, si vous faites les tests en ouvrant directement votre fichier swf alors le chemin sera par rapport à ce dernier, le mieux est d’avoir notre fichier swf dans le même dossier que notre page HTML.

Puis nous changeons la taille de notre objet avec l’attribut scale (ligne 19) pour le réduire de taille si nous passons un chiffre inférieur à 1 ou l’agrandir si supérieur à 1.

Nous le déplaçons sur notre scène (ligne 20) et enfin l’ajoutons à notre scène (ligne 21).

Nous lui faisons subir une rotation sur Y (ligne 26) pour le voir sur toutes les coutures.

  1. package {
  2. import org.papervision3d.objects.parsers.DAE;
  3. import org.papervision3d.view.BasicView;
  4.  
  5. import flash.events.Event;
  6.  
  7. public class BasicScene extends BasicView {
  8.  
  9. public function BasicScene()
  10. {
  11. loadDae();
  12. startRendering();
  13. }
  14.  
  15. private function loadDae() : void
  16. {
  17. eiffel = new DAE();
  18. eiffel.load("Untitled/models/model.dae");
  19. eiffel.scale = 0.1;
  20. eiffel.y = -500;
  21. scene.addChild(eiffel);
  22. }
  23.  
  24. override protected function onRenderTick(event:Event=null):void
  25. {
  26. eiffel.rotationY++;
  27. super.onRenderTick(event);
  28. }
  29.  
  30. private var eiffel : DAE;
  31. }
  32. }

Statsview voir les performances de vos scène Papervision3D.

Posté par Ocelyn le 13 octobre, 2009 | Pas de commentaire 
Publié dans Tutoriaux

Salut à tous,

Voici une astuce qui vous permettra de mesurer les performances de vos scène sous Papervision3D grâce à classe StatsView de Papervision.

J’ai repris le code de la leçon précédente en y ajoutant une fonction initStats (ligne 14), à l’intérieur de laquelle je créé un objets Statsview (ligne 20) et auquel je passe le BasicRenderEngine de la classe BasicView (renderer).

Il ne me reste plus qu’à l’addChilder sur ma scène (ligne 21).

Vous verrez apparaitre un carré noir contenant les différentes stats en haut à gauche de votre scène, les stats FPS (Nombres d’image par seconde), Mem (Mémoire utilisé par le flash player) vous permettront de voir rapidement les performances de vos applications, à noter que si vous avez d’autres sites ou applications flash lancée en même temps, la mémoire prendra en compte ces derniers.

  1. package {
  2.         import org.papervision3d.materials.special.Letter3DMaterial;
  3.         import org.papervision3d.typography.Text3D;
  4.         import org.papervision3d.typography.fonts.HelveticaBold;
  5.         import org.papervision3d.view.BasicView;
  6.         import org.papervision3d.view.stats.StatsView;
  7.  
  8.         import flash.events.Event;
  9.  
  10.         public class BasicScene extends BasicView {
  11.                
  12.                 public function BasicScene()
  13.                 {      
  14.                         initStats();
  15.                         buildLetters();
  16.                 }
  17.  
  18.                 private function initStats() : void
  19.                 {
  20.                         var sv : StatsView = new StatsView(renderer);
  21.                         addChild(sv);
  22.                 }
  23.  
  24.                 private function buildLetters() : void
  25.                 {
  26.                         var font : HelveticaBold = new HelveticaBold();
  27.                        
  28.                         var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
  29.                         material.doubleSided = true;
  30.                        
  31.                         txt3d = new Text3D("Blog Papervision3D", font, material);
  32.                        
  33.                         scene.addChild(txt3d);
  34.                        
  35.                         startRendering();
  36.                 }
  37.  
  38.                 override protected function onRenderTick(event:Event=null):void
  39.                 {
  40.                         txt3d.rotationY++;
  41.                         super.onRenderTick(event);
  42.                 }
  43.                
  44.                 private var txt3d : Text3D;
  45.         }
  46. }

Text3D dans Papervision.

Posté par Ocelyn le 2 octobre, 2009 | Pas de commentaire 
Publié dans Tutoriaux

Papervision3D nous offre la possibilité de créer des textes 3D, ceci en trois étapes.

Dans un premier temps nous allons créer notre Font, la police de caractère que nous allons appliquer à notre Text3D, il en existe 4 déjà définis dans Pv3d : HelveticaBold, HelveticaLight, HelveticaMedium et HelveticaRoman.

Nous créons donc notre font (ligne 18), puis notre Letter3DMaterial auquel nous passons une couleur et lui appliquons la propriété doubleSided (ligne 20 et 21).

Enfin nous créons notre Text3D (ligne 23), nous lui passons une chaine de caractère qui sera le texte affiché en 3D, notre font et notre material créés précédemment.

Si nous souhaitons changer le texte, il suffit simplement de faire txt3d.text = « Ma nouvelle chaine de caractère »; ou txt3d.text = txt3d.text + « -fr »; pour afficher Blog Papervision3D-fr.

  1. package {
  2.         import org.papervision3d.materials.special.Letter3DMaterial;
  3.         import org.papervision3d.typography.Text3D;
  4.         import org.papervision3d.typography.fonts.HelveticaBold;
  5.         import org.papervision3d.view.BasicView;
  6.  
  7.         import flash.events.Event;
  8.  
  9.         public class BasicScene extends BasicView {
  10.                
  11.                 public function BasicScene()
  12.                 {      
  13.                         buildLetters();
  14.                 }
  15.  
  16.                 private function buildLetters() : void
  17.                 {
  18.                         var font : HelveticaBold = new HelveticaBold();
  19.                        
  20.                         var material : Letter3DMaterial = new Letter3DMaterial(0xff00ff);
  21.                         material.doubleSided = true;
  22.                        
  23.                         txt3d = new Text3D("Blog Papervision3D", font, material);
  24.                        
  25.                         scene.addChild(txt3d);
  26.                        
  27.                         startRendering();
  28.                 }
  29.  
  30.                 override protected function onRenderTick(event:Event=null):void
  31.                 {
  32.                         txt3d.rotationY++;
  33.                         super.onRenderTick(event);
  34.                 }
  35.                
  36.                 private var txt3d : Text3D;
  37.         }
  38. }

Stopper le rendu d’une scène 3D.

Posté par Ocelyn le 1 octobre, 2009 | 1 commentaire 
Publié dans Tutoriaux

Un tutoriel très court mais qui concerne un point crucial sur Pv3d, la gestion de la mémoire.

La manière la plus efficace pour ne pas gaspiller vos ressources dans une scène 3D, est de stopper le rendu de votre scène, quand vous n’avez plus aucune animation à afficher.

Pour cela, deux solutions :

Dans le cas où vous avez créé votre scène 3D grâce à un BasicView ou ReflectionView et avez lancé un startRendering() pour afficher vos objets et animations, il vous suffit simplement de faire appel à la fonction stopRendering(); (ligne 43) pour stopper le rendu et refaire un startRendering(); pour le reprendre.

Si vous avez créé votre scène 3D par vous même il vous suffira de supprimer votre EnterFrame qui vous sert au rendu pour stopper le rendu et de le recréer pour le reprendre.

A noter que même si le rendu est stoppé, les interactions avec les objets 3D sont toujours actifs, dans l’exemple ci-dessous, nous créons nos objets 3D et ne lançons qu’un seul rendu pour les afficher n’ayant pas d’animation.

Puis au clique sur notre Sphere, nous appliquons une rotationY à notre DisplayObject3D (ligne 42), et relançons un rendu pour afficher cette modification (ligne 43), très utile pour des Roll Over par exemple.

  1. package {
  2.         import org.papervision3d.events.InteractiveScene3DEvent;
  3.         import org.papervision3d.materials.ColorMaterial;
  4.         import org.papervision3d.objects.DisplayObject3D;
  5.         import org.papervision3d.objects.primitives.Sphere;
  6.         import org.papervision3d.view.BasicView;
  7.  
  8.         public class BasicScene extends BasicView {
  9.                
  10.                 public function BasicScene()
  11.                 {      
  12.                         buildSphere();
  13.                         viewport.interactive = true;
  14.                 }
  15.  
  16.                 private function buildSphere() : void
  17.                 {
  18.                         do3d = new DisplayObject3D();
  19.                        
  20.                         //—
  21.                         var material : ColorMaterial = new ColorMaterial(0x000fff);
  22.                         material.interactive = true;
  23.                         sphere = new Sphere(material, 200, 20, 20);
  24.                        
  25.                         //—
  26.                         var material2 : ColorMaterial = new ColorMaterial(0xff0000);
  27.                         sphere2 = new Sphere(material2, 80, 20, 20);
  28.                         sphere2.x = 320;
  29.                        
  30.                         //—
  31.                         do3d.addChild(sphere);
  32.                         do3d.addChild(sphere2);
  33.                         scene.addChild(do3d);
  34.                        
  35.                         sphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, handleClick);
  36.                        
  37.                         singleRender();
  38.                 }
  39.                
  40.                 private function handleClick(event : InteractiveScene3DEvent) : void
  41.                 {
  42.                         do3d.rotationY += 10;
  43.                         singleRender();
  44.                 }
  45.                
  46.                 private var sphere : Sphere;
  47.                 private var sphere2 : Sphere;
  48.                 private var do3d : DisplayObject3D;
  49.         }
  50. }

Fog avec Papervision3D.

Posté par Ocelyn le 29 septembre, 2009 | 2 commentaires 
Publié dans Tutoriaux

Dans ce tutoriel nous allons créer un effets de brouillards dans Papervision3D.

Pour cela nous allons tout simplement utiliser un FogMaterial et un FogFilter que nous appliquerons à notre BasicRenderEngine (renderer).

Nous créons notre FogMaterial (ligne 20) et lui passons une couleur, le mieux est de choisir une couleur étant la même que votre couleur de fond. (blanc dans cet exemple)

Puis nous appliquons à notre renderer un nouveau filtre (ligne 21), un FogFilter qui reçoit 4 paramètres, le premier est notre FogMaterial créé précédemment puis le nombre de segments, c’est à dire le nombre de layers entre un fog à 0% et un fog à 100%, plus il y a de segments plus la progression vers le fond du brouillards seras détaillées.

Enfin nous lui passons les paramètres minDepth et maxDepth qui sont les points de départs et d’arrivé en Z de notre Fog.

Enfin nous faisons avancer notre Sphere en Z (ligne 37) pour la voir s’enfoncer progressivement dans le brouillard.

  1. package {
  2.         import org.papervision3d.core.render.filter.FogFilter;
  3.         import org.papervision3d.materials.ColorMaterial;
  4.         import org.papervision3d.materials.special.FogMaterial;
  5.         import org.papervision3d.objects.primitives.Sphere;
  6.         import org.papervision3d.view.BasicView;
  7.  
  8.         import flash.events.Event;
  9.  
  10.         public class BasicScene extends BasicView {
  11.                
  12.                 public function BasicScene()
  13.                 {      
  14.                         initFog();
  15.                         buildSphere();
  16.                 }
  17.                
  18.                 private function initFog() : void
  19.                 {
  20.                         var fogMaterial : FogMaterial = new FogMaterial(0xffffff);
  21.                         renderer.filter = new FogFilter(fogMaterial, 50, 1500, 2000);
  22.                 }
  23.  
  24.                 private function buildSphere() : void
  25.                 {
  26.                         var material : ColorMaterial = new ColorMaterial(0×000000);
  27.                         material.smooth = true;
  28.                        
  29.                         sphere = new Sphere(material, 200, 20, 20);
  30.                         scene.addChild(sphere);
  31.                        
  32.                         startRendering();
  33.                 }
  34.  
  35.                 override protected function onRenderTick(event:Event=null):void
  36.                 {
  37.                         sphere.z += 5;
  38.                         super.onRenderTick(event);
  39.                 }
  40.                
  41.                 private var sphere : Sphere;
  42.         }
  43. }
Page 2 sur 1012345...Last »