Blog Papervision3D

Blog Français sur Papervision3D

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

Posté par Ocelyn le 13 novembre, 2009 | Pas de 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. }

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

Posté par Ocelyn le 15 octobre, 2009 | 10 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. }
Page 1 sur 1012345»...Last »