Blog Papervision3D

Blog Français sur Papervision3D

De retours

Posté par Ocelyn le 14 juin, 2010 | 2 commentaires 
Publié dans News

Bonjour à tous,

Tout d’abords veuillez m’excuser pour mon manque de présence sur ce blog ces 6 derniers mois, mais aborder mes activités d’étudiants à Gobelins, de développeur Flash à Digitas et de développeur Freelance en y rajoutant la création de tutoriels pour ce blog aurait été mission impossible :)

Durant cette seconde (et dernière) année de Gobelins, nous avons été en charge de la réalisation d’un projet de 9 mois, qui n’a eu aucune pitié pour nombres de nos nuits.

Nous avions envie de travailler avec des Collégiens, dans le domaine de l’éducation, et nous nous sommes donc posé cette question:

« Comment accompagner les collégiens pendant le temps des devoirs ? »

Trêves de bavardages,je vous laisse découvrir le résultat de cette question ici, vous serez surement très surpris :)
http://fr.projet-iko.com

Le temps que tout se calme, de nombreuses nouveautés vont arriver sur ce blog, par exemple un forum qui m’a été souvent réclamé et aussi la possibilité pour vous de pouvoir enfin partager vos tutoriels sur ce blogs afin d’en faire profiter toute la communauté :)

Papervisionnement votre ;)

Coordonnées 2D du sommet haut gauche d’une Plane.

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

Suite à l’article sur comment obtenir les coordonnées 2D du centre d’une Plane, je vous présente ici une astuce pour trouver les coordonnées 2D du somment haut gauche d’une Plane (comme si ce n’était qu’un simple MovieClip aligné en 0,0)

Cet article implique donc que vous ayez lu le précédent article, afin d’aller directement à l’essentiel :)

Tout d’abord, nous créons un DisplayObject3D (ligne 23), auquel nous ajoutons une Plane.

Comme vous le voyez (ligne 25) notre Plane fait 80 pixels par 80 pixels, pour pouvoir centrer en 0,0 notre plane dans notre DisplayObject3D.

Nous la déplaçons en x de la moitié de sa largeur (ligne 27) et en y (ligne 28) de -(sa hauteur divisé par deux).

Enfin nous activons le autoCalcScreenCoords non pas sur la Plane mais sur le DisplayObject3D (ligne 33).

Tout ceci nous permet avec la même formule que dans l’exemple précédent, de pouvoir positionner notre Sprite sur le sommet haut gauche de notre Plane.

  1. package{
  2. import org.papervision3d.materials.ColorMaterial;
  3. import org.papervision3d.objects.DisplayObject3D;
  4. import org.papervision3d.objects.primitives.Plane;
  5. import org.papervision3d.view.BasicView;
  6.  
  7. import flash.display.Sprite;
  8. import flash.events.Event;
  9.  
  10. public class BasicScene extends BasicView {
  11.  
  12. public function BasicScene()
  13. {
  14. topLeftPlane();
  15.  
  16. startRendering();
  17. }
  18.  
  19. private function topLeftPlane() : void
  20. {
  21. var mt : ColorMaterial = new ColorMaterial(0×0000ff);
  22.  
  23. do3d = new DisplayObject3D();
  24.  
  25. var tlPlane : Plane = new Plane(mt, 80, 80);
  26. do3d.addChild(tlPlane);
  27. tlPlane.x = 40;
  28. tlPlane.y = -40;
  29.  
  30. scene.addChild(do3d);
  31. do3d.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
  32.  
  33. do3d.autoCalcScreenCoords = true;
  34.  
  35. //—-
  36.  
  37. topLeftSprite = new Sprite();
  38. topLeftSprite.graphics.beginFill(0xff0000, 0.2);
  39. topLeftSprite.graphics.drawRect(0, 0, 40, 40);
  40. addChild(topLeftSprite);
  41. }
  42.  
  43. override protected function onRenderTick(event:Event=null):void
  44. {
  45. do3d.x -= 0.2;
  46. do3d.y -= 0.2;
  47.  
  48. topLeftSprite.x = ( do3d.screen.x + (this.width / 2 ) );
  49. topLeftSprite.y = ( do3d.screen.y + (this.height / 2 ) );
  50.  
  51. //—-
  52.  
  53. super.onRenderTick(event);
  54. }
  55.  
  56. private var do3d             : DisplayObject3D;
  57.  
  58. private var topLeftSprite     : Sprite;
  59. }
  60. }

Tutoriel Papervision3D 3.0 – Classe Squelette

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

Salut à tous,

Comme demandé dans un commentaire voici une classe squelette de la nouvelle monture de Papervision : Papervision3D 3.0.

En pré-requis, il vous faudra bien entendu le package Papervision3D 3.0 que vous pouvez récupérer ici.

La possibilité de compiler en Flash Player 10 (avec Flash CS4, ou autre) et le Flash Player 10 pour pouvoir lire la scène. (si vous avez des erreurs à l’ouverture du swf ça viens surement de ça)

Une classe comme BasicView n’ayant pas encore été implanté, il nous faudra recréer notre scène à la main (ce qui n’est pas plus mal pour comprendre les nouveautés).

La première Chose est de créer notre Viewport (lignes 38-39), notre scene (ligne 41), qui maintenant est un DisplayObject3D en attendant la création de la classe Scene3D, notre caméra (lignes 43-44) qui maintenant doit être ajoutée à notre scene !

Et enfin nous créons notre rendrerer (ligne 49).

Puis nous créons notre Cube (lignes 52-54) en lui passant un WireframeMaterial , pour l’instant notre cube ne peu recevoir qu’un seul material et qu’une seule taille (on peu le scaler en X ou en Y pour le transformer par contre).

Enfin nous obligeons notre camera à regarder le cube, grâce à la propriété lookAt (ligne 56).

Le reste ne change pas, dans notre fonction EnterFrame, nous lançons le rendu de la scène :)

Papervision3D 3.0 débute mais ça annoncera surement que du bon !

  1. package
  2. {
  3. import flash.display.Sprite;
  4. import flash.events.Event;
  5.  
  6. import org.papervision3d.cameras.Camera3D;
  7. import org.papervision3d.materials.WireframeMaterial;
  8. import org.papervision3d.objects.DisplayObject3D;
  9. import org.papervision3d.objects.primitives.Cube;
  10. import org.papervision3d.render.BasicRenderEngine;
  11. import org.papervision3d.view.Viewport3D;
  12.  
  13. public class BasicScene extends Sprite
  14. {
  15.  
  16. public function BasicScene()
  17. {
  18. addEventListener(Event.ADDED_TO_STAGE, addedToStage);
  19. }
  20.  
  21. private function addedToStage(e:Event):void
  22. {
  23. removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
  24.  
  25. init();
  26. }
  27.  
  28. private function init() : void
  29. {
  30. initScene();
  31. buildCube();
  32.  
  33. addEventListener(Event.ENTER_FRAME, render);
  34. }
  35.  
  36. private function initScene():void
  37. {
  38. viewport = new Viewport3D(0, 0, true);
  39. addChild(viewport);
  40.  
  41. scene = new DisplayObject3D();
  42.  
  43. camera = new Camera3D();
  44. scene.addChild( camera );
  45. camera.z = 1000;
  46.  
  47. renderer = new BasicRenderEngine();
  48. }
  49.  
  50. private function buildCube():void
  51. {
  52. var wfm : WireframeMaterial = new WireframeMaterial(0xff00ff);
  53. cube = new Cube(wfm, 200);
  54. scene.addChild( cube );
  55.  
  56. camera.lookAt(cube);
  57. }
  58.  
  59. private function render(event:Event=null):void
  60. {
  61. cube.rotationX++;
  62. cube.rotationY++;
  63.  
  64. renderer.renderScene(scene, camera, viewport);
  65. }
  66.  
  67. private var cube : Cube;
  68. private var camera : Camera3D;
  69. private var viewport : Viewport3D;
  70. private var scene : DisplayObject3D;
  71. private var renderer : BasicRenderEngine;
  72. }
  73. }

Papervision3D 3.0 – Release

Posté par Ocelyn le 28 octobre, 2009 | 3 commentaires 
Publié dans News

Si vous n’êtes pas encore au courant (ce qui n’est finalement pas si grave, vous allez voir), la nouvelle version de Papervision3D (anciennement connu sous le nom de PapervisionX) viens de sortir.

Vous pouvez la récupérer à cette adresse : http://github.com/Papervision3D/Papervision3D

Il faut savoir que le moteur a été réécrit entièrement pour profiter des fonctionnalité du Flash Player 10.

Quoi de beau, dans cette nouvelle version ? Et bien pas grand chose pour l’instant, je n’ai pas encore eu l’occasion de la tester mais en navigant dans les différents dossier, j’ai vu qu’il n’y a pour l’instant que peu de classes qui ont été réécrites, il faudra donc attendre encore un peu pour l’utiliser dans vos sites web :)

Coordonnées 2D du centre d’une Plane.

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

Dans cet article, nous allons voir comment récupérer les coordonnées 2D (x et y) d’une Plane dans Papervision, grâce à la propriété autoCalcScreenCoords.

Pour cet exercice nous allons créer une Plane et un rectangle 2D, ce dernier ira récupérer les coordonnées 2D de notre Plane pour se positionner en son centre, ceci étant la méthode la plus facile.

Nous créons notre Plane (lignes 21-25) et passons la propriété autoCalcScreenCoords de cette dernière à true (ligne 27), cette propriété nous permet d’activer la possibilité de récupérer les coordonnées 2D de notre Plane.

Puis nous créons notre rectangle 2D un Sprite (lignes 31-34) qui sera positionné au centre de la Plane, vous pourrez noter que à la création du rectangle (ligne 34) nous le centrons en lui même.

A partir de là dans notre fonction onRenderTick (ligne 37) nous déplaçons notre Plane en x et en y (lignes 39-40) pour voir le déplacement de notre Sprite que nous bougeons (lignes 42-43) grâce à la formule pour l’axe X par exemple :

centerSprite.x = ( plane.screen.x + (this.width / 2 ) );

Vous remarquez qu’au lieu de faire plane.x nous rajoutons la propriété screen qui permet d’obtenir la coordonnée X de la Plane sur le plan 2D et nous ajoutons à cette dernière, le centre de notre classe BasicScene grâce à la formule, largeur de notre classe (this.width this faisant référence à notre classe BasicScene) divisé par deux.

Il ne nous reste plus qu’à faire la même manipulation pour l’axe Y en remplaçant :

centerSprite.y = ( plane.screen.y + (this.height/ 2 ) );

  1. package {
  2.         import org.papervision3d.materials.ColorMaterial;
  3.         import org.papervision3d.objects.DisplayObject3D;
  4.         import org.papervision3d.objects.primitives.Plane;
  5.         import org.papervision3d.view.BasicView;
  6.  
  7.         import flash.display.Sprite;
  8.         import flash.events.Event;
  9.  
  10.         public class BasicScene extends BasicView {
  11.                
  12.                 public function BasicScene()
  13.                 {      
  14.                         centerPlane();
  15.                        
  16.                         startRendering();
  17.                 }
  18.  
  19.                 private function centerPlane() : void
  20.                 {
  21.                         var mt : ColorMaterial = new ColorMaterial(0×0000ff);
  22.                        
  23.                         plane = new Plane(mt, 80, 80);
  24.                         scene.addChild(plane);
  25.                         plane.z = ( camera.zoom * camera.focus ) – Math.abs (camera.z);
  26.                        
  27.                         plane.autoCalcScreenCoords = true;
  28.                          
  29.                         //—-
  30.                          
  31.                         centerSprite = new Sprite();
  32.                         centerSprite.graphics.beginFill(0xff0000, 0.2);
  33.                         centerSprite.graphics.drawRect(-20, -20, 40, 40);
  34.                         addChild(centerSprite);
  35.                 }
  36.  
  37.                 override protected function onRenderTick(event:Event=null):void
  38.                 {
  39.                         plane.x += 0.2;
  40.                         plane.y += 1;
  41.                         //—-
  42.                         centerSprite.x = ( plane.screen.x + (this.width / 2 ) );
  43.                         centerSprite.y = ( plane.screen.y + (this.height / 2 ) );
  44.                         //—-
  45.                         super.onRenderTick(event);
  46.                 }
  47.                
  48.                 private var plane                       : Plane;
  49.                 private var centerSprite        : Sprite;
  50.         }
  51. }
Page 1 sur 1012345»...Last »