Dans cet articles nous allons voir comment créer une lumière dans Papervision grâce au PointLight3D, et afficher l’ombre sur notre Plane.

Tout d’abord, nous créons notre PointLight3D (ligne 24), le premier argument à la création est showLight qui affichera l’objet PointLight3D en fil de fer si il est dans votre champ de caméra, si vous le passez à true, puis nous l’ajoutons à notre scene.

Ensuite nous créons la texture de notre Plane qui sera un PhongMaterial (ligne 27), il affichera un dégradé en fonction de l’éclairage que reçois votre Plane, vous noterez que nous lui passons notre objets Light, une couleur pour la lumière 0xffffff dans le cas présent, une ambiantcolor 0×000000 ici, qui sera la couleur de notre plane quand elle n’est pas éclairé et enfin le specularLevel qui agrandit ou rétrécit le dégradé.

A partir de là, il ne nous reste plus qu’à ajouter le material à notre plane

Quand on utilise des textures chargées de manières externes, il est nécessaires de pouvoir savoir à quel instant, elles ont été chargées pour les appliquer à nos objets 3D, dans le tutoriel d’hier nous avons vu une technique qui consiste à loader une image externe d’une manière conventionnel, en faire un objet BitmapData et l’ajouter à un BitmapMaterial.

Aujourd’hui, nous allons voir que les matériaux BitmapFileMaterial possèdent leur propre loader, ce qui est relativement pratique.

Nous créons donc notre BitmapFileMaterial (ligne 19) et lui passons le chemin vers notre image, puis nous plaçons deux écouteurs, pour écouter les évènements FileLoadEvent, un pour écouter la progression de l’image,pour faire un loading par exemple (ligne 21) et un évènement Complete pour écouter quand l’image est chargé.

Enfin quand l’image est chargé nous appelons la méthode buildPlane (ligne 29), créons notre plane et lui appliquons notre texture.

Nous allons voir comment ajouter un magnifique effet de flamme sur vos objets 3D.

Tout d’abords, nous allons chercher une texture pour notre objets 3D qui sera la planète Terre, vous pouvez en trouver ici, la carte de la Terre sera parfaite pour notre exemple, faites attention à en choisir une qui ne soit pas trop grande ou réduire la taille de votre image dans votre logiciel de retouche d’image favoris, une trop grande image réduirait fortement les performances de notre application.

Pour réaliser notre effets de feu sur notre objets nous allons utiliser un BitmapEffectLayer et lui ajouter un BitmapFireEffect.

Nous avons besoin d’une texture Bitmap pour que notre effet fonctionne, la première étape est donc de chargé l’image qui nous servira de texture (ligne 25 à 27), faites attention à passer le bon lien vers votre image, pour mon cas elle se trouve à cette adresse  « assets/earth.jpg » (ligne 27)

L’image chargée par notre flash, nous l’ajoutons dans un objet BitmapData (ligne 34-35).

Nous créons notre BitmapEffectLayer auquel nous passons notre Viewport (ligne 45) et nous créons notre BitmapMaterial auquel nous affectons notre objet BitmapData précédent (ligne 47).

Enfin nous créons, notre BitmapFireEffect (ligne 54), et affectons ce dernier à notre BitmapEffectLayer créé précédemment (ligne 55).

Nous pouvons enfin nous amuser avec les propriétés de notre BitmapFireEffect (ligne 56-57), tel qu’activer la propriété blueFlame pour rendre le feu bleu (qui rend très bien sur notre pauvre planète), changer la valeur de la propriété flameHeight pour changer la taille du feu.. Je vous laisse regarder les différentes propriété que nous pouvons modifier pour personnaliser votre flamme.

Enfin il nous reste à ajouter notre Sphere au BitmapEffectLayer (ligne 59) et ajouter le BitmapEffectLayer à notre Viewport (ligne 61).

Je me suis retrouvé récemment confronté à un problème au travail, comment rendre un DisplayObject3D interactif.

Mon DisplayObject3D peut contenir X planes, X cubes, X Sphere… et je souhaiterais écouter les évènements Mouse Over, Mouse Out, Mouse Down… la première solution consisterait à écouter tous ces évènements sur chaque objets présents dans mon Do3d, mais ça reste une solution lourde, et si je passe d’un objet à un autre le premier objet va afficher un Mouse Out… Cette solution reste donc relativement bancale.

Il faut aussi savoir que ce ne sont pas les objets qui sont interactif mais leur textures en activant la propriété interactive à true, à partir de là, on se rend compte qu’il est impossible d’écouter des évènements sur un DisplayObject3D dans son ensemble.

Pour gérer ce problème, la solution est d’utiliser un ViewportLayer, ce dernier comme son nom l’indique est un calque de notre Viewport, dans lequel nous allons stocker notre DisplayObject3D.

Pour ce faire nous créons simplement un nouveau ViewportLayer (ligne 41), dans lequel nous passons notre Do3d.

Il ne nous reste plus qu’à ajouter des écouteurs (ligne 43 et 44), le ViewportLayer nous offre aussi la possibilité de changer l’alpha de tout nos objets, ou d’ajouter un curseur au survol en lui ajoutant un buttonMode (ligne 45), ou encore ajouter un filtre, un mode de fusion…

Enfin si nous souhaitons atteindre le DisplayObject3D contenu dans notre ViewportLayer, nous ferons tout simplement :

MonViewportLayer.displayObject3D pour par exemple lancer un Tween ou autre au Roll over ou autre (ligne 53 et 61).

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…