Blog Papervision3D

Blog Français sur Papervision3D

Plane à double face.

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

Créer une plane avec deux faces différentes est relativement simple.

Il suffit d’ajouter deux planes dans un même objets 3D, un DisplayObject3D (ligne 20), tout objets 3D (plane, cube, sphere…) dans Papervision3D ont été créé à partir de ce dernier.

Afin que nos deux planes ne se superposent pas, nous allons augmenter la distance en Z de notre planeFront (ligne 25), puis nous allons retourner la planeBack en rotationY (ligne 30) afin qu’elle soit visible, n’ayant pas activé la propriété doubleSided de la texture de notre planeBack.

A partir de là, il nous est facile de rendre un coté de la plane cliquable et non l’autre, d’ajouter deux différents types de textures à chaque face…

  1. package {
  2. import org.papervision3d.core.effects.view.ReflectionView;
  3. import org.papervision3d.materials.ColorMaterial;
  4. import org.papervision3d.objects.DisplayObject3D;
  5. import org.papervision3d.objects.primitives.Plane;
  6.  
  7. import flash.events.Event;
  8. import flash.filters.BlurFilter;
  9.  
  10. public class BasicScene extends ReflectionView {
  11.  
  12. public function BasicScene()
  13. {
  14. buildPlane();
  15. configReflection();
  16. }
  17.  
  18. private function buildPlane() : void
  19. {
  20. do3d = new DisplayObject3D();
  21.  
  22. var colorMaterialFront : ColorMaterial = new ColorMaterial(0xff00ff);
  23. var planeFront : Plane = new Plane(colorMaterialFront, 50, 50, 4, 4);
  24. do3d.addChild(planeFront);
  25. planeFront.z = 1;
  26.  
  27. var colorMaterialBack : ColorMaterial = new ColorMaterial(0×00ff00);
  28. var planeBack : Plane = new Plane(colorMaterialBack, 50, 50, 4, 4);
  29. do3d.addChild(planeBack);
  30. planeBack.rotationY = 180;
  31.  
  32. scene.addChild(do3d);
  33.  
  34. do3d.z = ( camera.zoom * camera.focus )Math.abs(camera.z);
  35.  
  36. startRendering();
  37. }
  38.  
  39. private function configReflection() : void
  40. {
  41. viewportReflection.filters = [new BlurFilter(3,3,1)];
  42. setReflectionColor(1, 1, 0.5);
  43. surfaceHeight = -100;
  44. }
  45.  
  46. override protected function onRenderTick(event:Event=null):void
  47. {
  48. do3d.rotationY ++;
  49. super.onRenderTick(event);
  50. }
  51.  
  52. private var do3d : DisplayObject3D;
  53. }
  54. }

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 | 18 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. }
Page 4 sur 10« First...«23456»...Last »