Je me suis penché sur Papervision3D dans le cadre d’un projet et j’ai voulu tester son intégration dans un projet MXML. Malheureusement, je me suis rendu compte que la plupart des tutoriels sur le sujet pour ne pas dire tous, parlent de la création d’un projet en ActionScript 3. J’ai donc créer des classes permettant l’intégration d’un objet papervision3D en tant que balise MXML, permettant ainsi d’inclure facilement une scène 3D dans un projet Flex. Je vous propose donc un petit exemple montrant l’utilisation de ces classes au sein d’un projet MXML.

Exemple disponible ici avec les sources. Les explications se trouvent dans la suite de l’article…Je me suis inspiré de ce tutoriel sur la création d’une scène générique et sur son initialisation pour créer une nouvelle classe PV3DScene.

J’ai ajouté principalement 4 choses :

• L’extension de la classe Canvas plutot que Sprite dans les projets AS3
• La possibilité de ne pas calculer le rendu à chaque frame avec la variable needRender et l’ajout d’une méthode invalidateScene (qui permet d’économiser pas mal de CPU dans le cas d’une scène statique !)
• Le redimensionnement de la scène en fonction de la taille du canvas
• La création des objets dans la scène au moyen de méthode comme add3DObject et remove3DObject et l’ajout d’un Array childrenObjects

J’ai ensuite créer une classe PV3DObject qui permet de gèrer l’interactivité des modèles importés type Collada entre autres.Le résultat c’est la possibilité de définir des objets 3D de cette manière :

public class FxCube extends PV3DObject{
public var faceWidth:Number = 500;
public var quality:Number = 20;

public function FxCube() {
super();
}

override protected function createChildren():void {
var ml:MaterialsList = new MaterialsList;
var mat:BitmapFileMaterial = new BitmapFileMaterial(’fx.jpg’);
ml.addMaterial(mat,’all’);
addChild(new Cube(ml,faceWidth,faceWidth,faceWidth,quality));}
}

Et leurs ajouts dans le composant 3D au sein d’un composant MXML de cette manière :

<mx:Panel>
<pv3d:PV3DScene id=”scene3D” width=”90%” height=”90%”>
<pv3d:childrenObjects>
<objects:FxCube faceWidth=”400″ id=”cube” />
</pv3d:childrenObjects>
</pv3d:PV3DScene>
</mx:Panel>

Les sources complètes du projet (incluant papervision3D) sont disponibles ici. A savoir qu’il est nécessaire pour la compilation de disposer des sources de Papervision.

Cette opération est décrite dans ce tutoriel, mais afin de vous simplifier la tâche, j’ai inclut dans le projet une copie de ces sources et il est juste nécessaire d’ajouter ces sources dans le Source Path du projet en faisant : Menu Project > Properties > Flex Build Path > Onglet Source Path > Add Folder… et sélectionner le dossier nommé PV3D_GreatWhite_rev428.

Un deuxième exemple sur l’utilisation d’objet au format Collada est en préparation. On verra comment ajouter un objet issu de 3DSMax dans papervision et comment interagir à la souris avec lui.

N'oubliez pas que vous pouvez vous abonner à mon Twitter http://twitter.com/flexinfo ou au flux RSS ;)