Blog Papervision3D

Blog Français sur Papervision3D

ReflectionView, les reflets avec Papervision, c’est facile.

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

Avec la BasicView une autre classe est apparue la ReflectionView, cette classe vous permet en l’étendant, de créer rapidement une scène 3D (comme la BasicView) mais en lui rajoutant des propriétés permettant de créer un reflet pour vos objets.

Il faut tout d’abord, étendre notre classe avec la ReflectionView (ligne 9), puis configurer notre reflet.

La ReflectionView consiste à prendre l’image de la caméra qui rend la scène, puis la retourne pour lui donner un effet de miroir, vous avez donc la possibilité d’appliquer des effets à cette image grâce à la propriété viewportReflection (ligne 31), comme un Blur, un Glow… setReflectionColor (ligne 32) permet de changer du reflet, et surfaceHeight (ligne 33) comme son nom ne l’indique pas, permet de rapprocher ou d’éloigner le reflet de la scène 3D.

Enfin chose importante, pour afficher le reflet il faut absolument créer un EnterFrame (ligne 16) et lui ajouter un singleRender(); (ligne 40)

  1. package {
  2.         import org.papervision3d.core.effects.view.ReflectionView;
  3.         import org.papervision3d.materials.ColorMaterial;
  4.         import org.papervision3d.objects.primitives.Plane;
  5.  
  6.         import flash.events.Event;
  7.         import flash.filters.BlurFilter;
  8.  
  9.         public class BasicScene extends ReflectionView {
  10.                
  11.                 public function BasicScene()
  12.                 {      
  13.                         buildPlane();
  14.                         configReflection();
  15.                                                
  16.                         addEventListener(Event.ENTER_FRAME, enterFrameHandler);
  17.                 }
  18.  
  19.                 private function buildPlane() : void
  20.                 {
  21.                         var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
  22.                         colorMaterial.doubleSided = true;
  23.                         plane = new Plane(colorMaterial, 50, 50, 4, 4);
  24.                         scene.addChild(plane);
  25.  
  26.                         plane.z = ( camera.zoom * camera.focus ) – Math.abs(camera.z);
  27.                 }
  28.                
  29.                 private function configReflection() : void
  30.                 {
  31.                         viewportReflection.filters = [new BlurFilter(3,3,1)];
  32.                         setReflectionColor(.5, .5, .5);
  33.                         surfaceHeight = -100;
  34.                 }
  35.                
  36.                 private function enterFrameHandler(event : Event) : void
  37.                 {
  38.                         plane.rotationX ++;
  39.                         plane.rotationY ++;
  40.                         singleRender();                
  41.                 }
  42.                
  43.                 private var plane : Plane;
  44.         }
  45. }

Accèder aux propriétés de la BasicView et à son rendu

Posté par Ocelyn le 11 septembre, 2009 | 16 commentaires 
Publié dans Tutoriaux

Très vite après avoir créé sa scene 3D avec la BasicView, on va vouloir en modifier les propriétés, modifier la caméra, accéder au rendu pour par exemple faire bouger des objets en EnterFrame…

On pourra modifier les propriétés de la scène 3D, tout simplement en les appelants, pour modifier le Viewport par exemple (ligne 12) viewport.interactive, viewport.alpha… pour la caméra (ligne 22) , camera.zoom, camera.z…

Si on veut accéder au rendu de la scène 3D il faudra overrider la fonction de rendu onRenderTick, c’est à dire écraser la fonction présente dans la BasicView pour pouvoir l’utiliser dans notre classe (ligne 27), du fait qu’on écrase la fonction, il ne faudra pas oublier de réécrire sa fonctionnalité de base :  super.onRenderTick(event); (ligne 31).

  1. package {
  2. import org.papervision3d.materials.ColorMaterial;
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.view.BasicView;
  5.  
  6. import flash.events.Event;
  7.  
  8. public class BasicScene extends BasicView {
  9.  
  10. public function BasicScene()
  11. {
  12. viewport.interactive = true;
  13. buildPlane();
  14. }
  15.  
  16. private function buildPlane() : void
  17. {
  18. var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
  19. plane = new Plane(colorMaterial, 50, 50, 4, 4);
  20. scene.addChild(plane);
  21.  
  22. plane.z = ( camera.zoom * camera.focus ) – Math.abs(camera.z);
  23.  
  24. startRendering();
  25. }
  26.  
  27. override protected function onRenderTick(event:Event=null):void
  28. {
  29. plane.rotationX ++;
  30. plane.rotationY ++;
  31. super.onRenderTick(event);
  32. }
  33.  
  34. private var plane : Plane;
  35. }
  36. }

Afficher vos objets 3D à leur vrai taille.

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

L’affichage des objets 3D à leur vrai taille peu s’avérer compliqué si on ne connais pas la formule magique.

Pour les planes (ligne 19) il suffit de mettre la position Z égale à ( camera.zoom * camera.focus ) – Math.abs (camera.z), on remarquera qu’on peu accéder à la caméra en BasicView sans avoir à la définir dans une variable.

Pour un cube la formule sera :   ( camera.zoom * camera.focus ) – ( Math.abs (camera.z) – « cube.depth » / 2 ), « cube.depth » correspond à la profondeur du cube (quand vous créez un nouveau cube c’est la 3ème propriétés), vous ne pouvez pas y accéder directement, il faudra donc la stocker dans une variable pour l’utiliser par exemple.

  1. package {
  2. import org.papervision3d.materials.ColorMaterial;
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.view.BasicView;
  5.  
  6. public class BasicScene extends BasicView {
  7.  
  8. public function BasicScene()
  9. {
  10. buildPlane();
  11. }
  12.  
  13. private function buildPlane() : void
  14. {
  15. var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
  16. var plane : Plane = new Plane(colorMaterial, 50, 50, 4, 4);
  17. scene.addChild(plane);
  18.  
  19. plane.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
  20.  
  21. startRendering();
  22. }
  23. }
  24. }

Des effets sur vos Planes.

Posté par Ocelyn le 9 septembre, 2009 | Pas de commentaire 
Publié dans Tutoriaux

Les dernières versions de Papervision3D, apportent une nouveautés intéressantes la possibilité d’appliquer des filtres sur certains des objets 3D.

En passant la propriété useOwnContainer (ligne 21) à true, on active la possibilité d’appliquer des filtres ou de la transparence à votre plane.

On à par exemple la possibilité de mettre un effet de Glow (ligne 22), de Flou (ligne 23), une ombre 2D (ligne 24), pour un alpha on fera tout simplement plane.alpha = 0.5 par exemple.

Attention, certains des ces effets peuvent prendre énormément de mémoire en particulier si on a un nombre important de plane.

  1. package {
  2. import org.papervision3d.materials.ColorMaterial;
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.view.BasicView;
  5.  
  6. import flash.filters.DropShadowFilter;
  7.  
  8. public class BasicScene extends BasicView {
  9.  
  10. public function BasicScene()
  11. {
  12. buildPlane();
  13. }
  14.  
  15. private function buildPlane() : void
  16. {
  17. var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
  18. var plane : Plane = new Plane(colorMaterial, 220, 120, 4, 4);
  19. scene.addChild(plane);
  20.  
  21. plane.useOwnContainer = true;
  22. //plane.filters = [new GlowFilter(0xff0000, 1, 6, 6, 4)];
  23. //plane.filters = [new BlurFilter(8, 8, 1)];
  24. plane.filters = [new DropShadowFilter(4,45, 0×000000, 1)];
  25.  
  26. startRendering();
  27. }
  28. }
  29. }

Une scene Papervision avec une Plane en 20 lignes.

Posté par Ocelyn le 8 septembre, 2009 | 4 commentaires 
Publié dans Tutoriaux

Dans les dernières versions de Papervision, les contributeurs ont ajouté la possibilité de créer des configurer des scènes 3D en seulement quelques lignes.

Là où il nous fallait créer un viewport, créer une caméra etc… (voir les anciens tutoriels) en étendant notre classe avec une BasicView (ligne 7), nous n’avons plus rien à faire :) .

N’oubliez pas de lancer l’affichage de votre scène startRendering(); (ligne 19)

Nous verrons au travers des prochains tutoriaux comment configurer notre basicview, ou animer notre scène 3D.

  1. package  {
  2.  
  3. import org.papervision3d.objects.primitives.Plane;
  4. import org.papervision3d.materials.ColorMaterial;
  5. import org.papervision3d.view.BasicView;
  6.  
  7. public class BasicScene extends BasicView {
  8.  
  9. public function BasicScene()
  10. {
  11. buildPlane();
  12. }
  13.  
  14. private function buildPlane() : void
  15. {
  16. var colorMaterial : ColorMaterial = new ColorMaterial(0xff00ff);
  17. var plane : Plane = new Plane(colorMaterial, 220, 120, 4, 4);
  18. scene.addChild(plane);
  19. startRendering();
  20. }
  21. }
  22. }
Page 4 sur 10« First...«23456»...Last »