Blog Papervision3D

Blog Français sur Papervision3D

Texturer une Plane avec une image et animer la Plane.

Posté par Ocelyn le 28 février, 2008
Publié dans Tutoriaux

Tutoriel pour apprendre à ajouter une texture à une Plane grâce à une image et animer la Plane. (Code source sous la vidéo)

Get the Flash Player to see this player.

  1. package
  2. {
  3. import flash.display.Sprite;
  4. import flash.events.Event;
  5. import org.papervision3d.cameras.FreeCamera3D;
  6. import org.papervision3d.render.BasicRenderEngine;
  7. import org.papervision3d.scenes.Scene3D;
  8. import org.papervision3d.view.Viewport3D;
  9. import org.papervision3d.objects.primitives.*;
  10. import org.papervision3d.materials.*;
  11.  
  12. public class Main extends Sprite
  13. {
  14.  
  15. private var viewport:Viewport3D;
  16. private var scene:Scene3D;
  17. private var camera:FreeCamera3D;
  18. private var renderer:BasicRenderEngine;
  19. private var plane:Plane;
  20. private var material:BitmapFileMaterial;
  21.  
  22. public function Main(){
  23. init();
  24. }
  25.  
  26. private function init():void{
  27.  
  28. initPapervision();
  29. initMaterials();
  30. initObjects();
  31.  
  32. }
  33.  
  34. private function initPapervision():void
  35. {
  36.  
  37. viewport = new Viewport3D();
  38. addChild( viewport );
  39.  
  40. scene = new Scene3D();
  41.  
  42. camera = new FreeCamera3D;
  43.  
  44. renderer = new BasicRenderEngine;
  45.  
  46. }
  47.  
  48. private function initMaterials():void{
  49. material = new BitmapFileMaterial("logo.jpg");
  50. material.doubleSided = true;
  51. }
  52.  
  53. private function initObjects():void{
  54. plane = new Plane( material, 127, 128, 8, 8 );
  55. scene.addChild( plane );
  56. addEventListener(Event.ENTER_FRAME, onEnterFrame);
  57. }
  58.  
  59. private function onEnterFrame (e:Event):void{
  60. renderer.renderScene ( scene, camera, viewport );
  61. //Plane.x += (-)X; Déplacer une Plane vers la droite ou gauche.
  62. //Plane.y += (-)X; Déplacer une Plane vers le haut ou le bas.
  63. //Plane.z += (-)X; Faire avancer ou reculer la plane, par rapport à la caméra.
  64. //Plane.rotationX += (-)X; Faire tourner la Plane vers la haut.
  65. //Plane.rotationX += (-)X; Faire tourner la Plane par le coté;
  66. //Plane.rotationX += (-)X; Faire tourner la Plane en diagonale;
  67. //Plane.pitch( (-)X ); Pareil que rotationX.
  68. //Plane.yaw( (-)X ); Pareil que rotationY.
  69. //Plane.roll( (-)X ); Pareil que rotationZ.
  70. plane.rotationZ += 4;
  71. }
  72.  
  73. }
  74. }

Tutoriel réalisé grâce à l’aimable accord de John Lindquist, une partie du code source lui appartient !

Share and Enjoy:
  • Facebook
  • Twitter
  • LinkedIn
  • del.icio.us
  • Technorati
  • Digg
  • Netvibes
  • Wikio FR
  • Live
  • Google Bookmarks
  • email
  • Print

34 commentaires dans ce post, pour l'instant.

Suivre ce post par RSS ou poser un trackback
mygif
9. PeZ dit,
29 février, 2008 à 1:13

Petite correction, l’évenement EnterFrame n’est pas joué toutes les secondes. Il dépend du framerate de ton animation.

De base, le framerate est à 12, ce qui signifie que l’évenement EnterFrame est éxécutée 12 fois par seconde. Il vaut mieux le mettre à 25 pour que l’animation paraisse fluide pour l’oeil.

mygif
10. admin dit,
29 février, 2008 à 7:49

Merci pour la correction ;)

mygif
16. Eric dit,
6 mars, 2008 à 23:08

Bonjour,

Merci pour ce tuto.

Par contre, j’ai droit a un message d’erreur de problème de sécurité avec l’ajout d’une image:

SecurityError: Error #2148: Le fichier SWF file:///C:/Documents and Settings/Eric/My Documents/Flex Builder 3_2/Test_3D_papervision/bin-debug/Test_3D_papervision.swf ne peut pas accéder à la ressource locale file:///C:/Documents and Settings/Eric/My Documents/Flex Builder 3_2/Test_3D_papervision/bin-debug/fdlogo.jpg. Seuls les fichiers SWF local-système de fichiers et les fichiers locaux de confiance peuvent accéder aux ressources locales.
at flash.display::Loader/get content()
at org.papervision3d.materials::BitmapFileMaterial/loadBitmapCompleteHandler()[C:\labs\...\BitmapFileMaterial.as:286]

J’ai effectuer quelques recherches sur le net, et bon pas grand chose au final.

Une suggestion si ou plait?
Eric.

mygif
17. admin dit,
7 mars, 2008 à 9:05

Ton chemin vers ton image est comment ?

Tu a compilé avec flex sdk ?

Le fichier fdlogo.jpg est bien dans ton dossier bin-debug ?

mygif
18. Eric dit,
7 mars, 2008 à 9:13

Hi,

Mon chemin, j’ai testé:
material = new BitmapFileMaterial(« mon_logo.jpg »);

J’ai aussi essayé avec: (« http://localhost/mon_projet/bin-debug/mon_logo.jpg »);

Alors j’ai testé sur le pc du boulot impec, je refais un test chez moi.

Merci.
Eric.

mygif
47. totolabellevie dit,
6 avril, 2008 à 9:57

une toute petite remarque (pour les néophytes comme moi qui testent tout pour comprendre) pour les commentaires dans rajouter sur les différents mouvement dans la fonction « onEnterFrame »
ligne 65 et 66 vous aurez remarqué :

//Plane.rotationX += (-)X; Faire tourner la Plane vers la haut.
//Plane.rotationX += (-)X; Faire tourner la Plane par le coté;
//Plane.rotationX += (-)X; Faire tourner la Plane en diagonale;

C’est //Plane.rotationX à changer par Y et le suivant par un Z…. c’est coquin le copier/coller

mygif
49. totolabellevie dit,
6 avril, 2008 à 21:51

Et pour etre encore plus precis…. il y a encore une petite erreur, pour ne pas trop perturber les néophytes comme moi, il faudrait enlever la majuscule à ‘P’lane si on veut que ça marche ;)

mygif
56. d3ki dit,
29 avril, 2008 à 14:26

Bijour,

j’ai un petit problème… J’arrive à bien charger l’image
=> BitmapFileMaterial: Loading bitmap from nona.jpg

Mais pas possible de l’afficher ??? help

voici le code:

private function initMaterials():void
{

material = new BitmapFileMaterial( « nona.jpg » );

}

private function initObjects():void
{
plane = new Plane( material, 560, 316, 3, 3 );

scene.addChild( plane );

addEventListener(Event.ENTER_FRAME, onEnterFrame);

}

private function onEnterFrame (pEvt:Event):void
{
renderer.renderScene ( scene, camera, viewport );

}

;)

mygif
57. d3ki dit,
29 avril, 2008 à 15:48

ok ça va j’ai trouvé une faute de frappe!!

@++

mygif
90. M.Luffy dit,
5 juillet, 2008 à 11:22

Bonjour,

et d’abord merci pour ce site !!

j’ai une question concernant les dimensions de la plane !

Sont – elles en pixels ou autre ? parceque lors de la compilation, on dirait pas que la pla

mygif
91. M.Luffy dit,
5 juillet, 2008 à 11:24

Bonjour,

et d’abord merci pour ce site !!

j’ai une question concernant les dimensions de la plane !

Sont – elles en pixels ou autre ? parceque lors de la compilation, on dirait pas que la plane reste toujours très petite. Perso, j’ai une plane de 298×191 (la taille que je lui applique) mais on dirait qu’elle sont de 20×10 !

oO

mygif
93. Ocelyn dit,
6 juillet, 2008 à 7:21

Oui en pixels, si elle te semble petite c’est que la caméra est éloignée de ta plane, la difficulté étant de la rapprocher suffisamment pour lui rendre sa taille d’origine sans la faire grossir.

mygif
98. carmen dit,
12 juillet, 2008 à 14:07

Bonjour !

j’ai la même question que M.Luffy mais je ne vois pas bien comment on rapproche la caméra … :)

mygif
107. memel dit,
15 juillet, 2008 à 11:11

Pour changer la position de la caméra il suffit de rajouter le code suivant en dessous de camera = new Camera3D(); :

camera.z = taValeur; //Permet de modifier la position de la camera sur la profondeur de la scène

Tu peux également changer la position en x et y.

mygif
120. splendes dit,
5 août, 2008 à 14:55

Bonjour.
Ma question n’est pas directement en rapport avec le code, mais j’aimerai savoir si il est possible de déplacer le centre de rotation. Pour obtenir par exemple que l’image fasse un cercle au lieu de tourner sur elle même.
Merci.

mygif
122. Quevain dit,
6 août, 2008 à 21:52

Merci pour ces tutos!
Moi qui veux me lancer dans l’AS3 et la 3d avec flash, tous tes tutos me sont d’une grande utilité!

Bravo.

mygif
125. synfactory dit,
7 août, 2008 à 18:15

Salut,
génial les tutos!!!

J’aurai une tit question :

le champ de la caméra ne fait pas la taille de ma scène(le stage). Je m’explique, quand j’applique une
plane.z -=50 (par ex), ca zoome mais que sur une partie de mon stage.(mon stage fais 1000×700 et le rendu se fait en gros sur un carré de 500×500 en haut à gauche)
Comment fait-on?
Faut apeller les fonctions Stage?
mici :)

mygif
126. splendes dit,
8 août, 2008 à 7:22

salut synfactory.
Pour le zoom tu as un evenement camera.zoom
et si tu ne vois pas toute la scene a tu mis:
camera.lookAt(ta scene);
En esperant que sa t’aide.

PS:Si quelqu’un pouvait repondre a ma question.

mygif
127. synfactory dit,
8 août, 2008 à 9:22

Salut Splendes, merci pour l’info ^^

mais c’est toujours pareil, le camera.zoom l’agrandi mais mon stage est toujours de la meme taille.Pareil avec le lookAt.
Je n’arrive pas à comprendre ce problème…

mygif
133. synfactory dit,
14 août, 2008 à 15:55

ok j’ai trouvé, si yen a qui ont le meme probleme il faut rajouter entre les () de viewport :

new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);

et c ok

mygif
162. maestro dit,
14 octobre, 2008 à 16:53

Bonjour,
Alors tous marche niquel en passant merci pour les tutos nice!!
Mon probleme:
jai ca en panneau de sortie

INFO: Papervision3D Public Beta 2.0 – Great White (September 9th, 2008)

INFO: BitmapFileMaterial: Loading bitmap from moi.jpg
ERROR: MaterialObject3D: transformUV() material.bitmap not found!

Je capte pas
merci pour vos reponses

mygif
171. Scoch dit,
23 octobre, 2008 à 9:26

Bonjour,
merci pour ces tutos qui sont impec !
J’ai le même message d’erreur que maestro :
ERROR: MaterialObject3D: transformUV() material.bitmap not found!
Ce message sort à chaque passage dans la fonction onEnterFrame.
Un problème de version ?
Si quelqu’un a une solution, merci.

mygif
172. Scoch dit,
23 octobre, 2008 à 10:28

Ooops !
Je corrige mon commentaire précédent :
Ce message NE sort PAS à chaque passage dans la fonction onEnterFrame. Ce message est semble-t-il lié au chargement du bitmap, une fois celui-ci chargé il n’y a plus d’erreur.

Et bizarre, le zoom ne fonctionne pas comme souhaité (et ce depuis le tuto Création d’une Plane) : lorsque je donne la valeur 8, ma plane s’éloigne…

mygif
173. Scoch dit,
23 octobre, 2008 à 13:49

Désolé pour les multiples commentaires :{
J’ai résolu le problème de zoom en initialisant le focus de la caméra :
camera.focus = 100;

mygif
189. ByTeEaTeR dit,
15 novembre, 2008 à 22:10

Pas besoin de nous remercier pour le tutoriel puisque c’est toi qui l’a fait. ;-)

mygif
190. Aulren dit,
17 novembre, 2008 à 17:34

J’ai eu le même problème avec l’erreur : ERROR: MaterialObject3D: transformUV() material.bitmap not found!

Essaye avec une image moins grosse (- de 10ko). J’ai réessayer avec une de 8ko et au bou d’un moment l’image c’est afficher. Il n’y a ce message que pendant le temps de chargement.

mygif
221. fleporcq dit,
26 janvier, 2009 à 11:26

Bonjour, merci pour les tutos, j’ai juste une remarque. Je pense que la technique employée pour attendre le chargement du bitmap avant la création de la scène n’est pas la meilleure. Le principe ici est d’attendre l’évènement onEnterFrame pour « retarder » l’affichage du bitmap, mais si celui ci est très volumineux (ou que la machine est peu puissante), le temps ne sera peut être pas nécessaire pour charger l’image, cette technique n’est donc pas « certaine ». je pense qu’il faudrait utiliser la classe Loader qui sert justement à charger un fichier externe et qui permet d’intercepter la fin du chargement.

un exemple :

//création de l’objet URL pointant vers le fichier
var requestTexture:URLRequest = new URLRequest(« logo.jpg »);

//création de l’objet loader
var loaderTexture:Loader = new Loader();

//chargement du fichier en passant en param l’objet URL au loader
loaderTexture.load(requestTexture);

//ajout de l’evenement complete permettant de rediriger vers la methode initScene() en fin de chargement
loaderTexture.contentLoaderInfo.addEventListener(Event.COMPLETE, initScene);

//ajout de l’evenement IO_ERROR pour intercepter les éventuelles erreurs et rediriger vers la fonction ioErrorHandler()
loaderTexture.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

//Ancienne fonction onEnterFrame je l’ai renommé initScene (plus logique ;o)
private function initScene(event:Event):void{
renderer.renderScene ( scene, camera, viewport );
}

private function ioErrorHandler(event:IOErrorEvent):void {
trace(« Impossible de charger l’image »);
}

mygif
222. fleporcq dit,
26 janvier, 2009 à 11:52

C’est encore moi en fait je me suis rendu compte que j avais oublie 2 ou 3 petites choses
il faut importer certaines classes et faire un bitmap data

import flash.display.BitmapData;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.IOErrorEvent;

//création de l’objet URL pointant vers le fichier
var requestTexture:URLRequest = new URLRequest(« logo.jpg »);

//création de l’objet loader
var loaderTexture:Loader = new Loader();

//chargement du fichier en passant en param l’objet URL au loader
loaderTexture.load(requestTexture);

//ajout de l’evenement complete permettant de rediriger vers la methode initScene() en fin de chargement
loaderTexture.contentLoaderInfo.addEventListener(Event.COMPLETE, initScene);

//ajout de l’evenement IO_ERROR pour intercepter les éventuelles erreurs et rediriger vers la fonction ioErrorHandler()
loaderTexture.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

//Ancienne fonction onEnterFrame je l’ai renommé initScene (plus logique ;o)

private function initScene(event:Event):void{
//j’ai regroupé les différentes fonction init pour l’exemple
//creation du bitmapdata une fois l’image chargé
var bitmapTexture:BitmapData = new BitmapData(loaderTexture.width, loaderTexture.height, false);
//passage du bitmapdata a BitmapFileMaterial
material = new BitmapFileMaterial(bitmapTexture);
material.doubleSided = true;
plane = new Plane( material, 127, 128, 8, 8 );
scene.addChild( plane );
renderer.renderScene ( scene, camera, viewport );
}

private function ioErrorHandler(event:IOErrorEvent):void {
trace(« Impossible de charger l’image »);
}

c’est un exemple j’ai pas testé dans ce projet mais je l’ai déjà mis en place ça marche bien, en tout cas l’idée est la

mygif
232. julien dit,
25 février, 2009 à 15:09

salut et Grand*Merci pour ces tutos :)

Je suis sur Mac, et tout fonctionne bien jusqu’à la texture, je n’ai pas de message comme quoi la texture est chargée, et à l’affichage je n’ai rien.

Est-ce que ça vient de l’endroit où je dois ranger cette image, et si oui, où ?

Merci encore pour la réponse

mygif
260. AngelK dit,
10 août, 2009 à 15:02

Bonjour, J’ai suivi exactement le tutoriel mais je n’arrive pas a voir s’afficher l’image uniquement la plane. Je travaille avec CS3 et papervision3D version 2.0.0. J’ai même essaye avec la même version que celle du tutoriel mais sans succès. Une idée de solution?
Merci.

mygif
440. Tonib dit,
24 novembre, 2009 à 15:11

Bonjour,

J’avais souvenir d’un site à ses début qui promettait et je vois maintenant qu’il manque parfois des détails qui font de grandes choses : comme la façon d’intégrer cette image au flash (chemin ???????)

Franchement gênant !

On espère des corrections

Bonne continuation

mygif
441. Ocelyn dit,
25 novembre, 2009 à 14:32

Bonjour à toi Tonib,

Si tu avais regardé la vidéo le mec du « site qui à ses débuts promettait » tu verra que l’image doit se trouver à coté du Flash.

Si tu n’es pas content du mec bénévole qui passe des heures pour vous offrir ses tutos, tu trouveras plein de gens pour te faire payer la même chose…

J’adore ce genre de commentaire….

Cordialement.

mygif
442. Volken nooby noob dit,
30 novembre, 2009 à 0:22

Et bien moi je te dis merci Ocelyn, tes tutos me donnent envie de me taper un énorme botin de AS3 pour bien maitriser!
tes tutos sont super, vraiment merci pour tout ton boulot, des que je peux je te remercie de façon plus concrète ^^
en tout cas t’assures!

mygif
459. capoeiradance dit,
1 mars, 2010 à 22:10

Bonsoir, tout d’abord trés bon tuto merci :D

Je voulais savoir s’il était possible à la place du logo.jpeg de mettre un .swf ?

J’ai essayé et cela n’a pas l’air de fonctionner… J’aimerais utiliser des images vectoriel.

Merci d’avance bonne soirée

Laisser un commentaire

Currently browsing Texturer une Plane avec une image et animer la Plane.

 Pseudo(*requis)

 Email (*privée)

 Site internet (*optionnel)