Astuce Afficher un modèle 3D avec Papervision3D

Dans cette astuce, nous verrons comment incorporer et afficher un modèle 3D dans Flash à l'aide de Papervision3D..

Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:

introduction

Pour utiliser ce didacticiel, vous devez disposer d’un modèle 3D, exporté sous forme de fichier .dae, et de sa texture, sous forme de fichier image..

Je vais utiliser ce modèle de vélo de montagne low-poly de 3DOcean, créé par OneManBand (qui a également créé ce visionneur d'objets 3D soigné dans AIR)..

Vous devrez télécharger une copie de Papervision3D (vous pouvez également en trouver une copie dans les fichiers sources).

Étape 1: Création du fichier Flash

Créez un nouveau document ActionScript 3 de 550 x 200 pixels et définissez la cadence de prise de vue sur 30 images par seconde. Définissez également la classe de document sur "EmbeddingDAE"..

Créez un rectangle qui couvre toute la scène et remplissez-le avec un dégradé radial de #FFFFFF à # D9D9D9. Ajustez le dégradé à l'aide de l'outil de transformation du dégradé afin qu'il ressemble à ceci:

Étape 2: Configuration de la classe de document

Créez un nouveau fichier ActionScript 3 et nommez-le "EmbeddingDAE". Cette classe étendra une classe de Papervision qui a toutes les fonctionnalités de base configurées.

Comme nous allons incorporer le modèle 3D dans votre fichier SWF, nous devons nous assurer que le fichier a été entièrement chargé avant d'essayer de l'utiliser..

Voici le code pour cela:

 package import flash.events.Event; importer org.papervision3d.view.BasicView; Classe publique EmbeddingDAE étend BasicView fonction publique EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  fonction privée onFullyLoaded (e: Event): void

Étape 3: Intégration des ressources

Au lieu d’héberger nos ressources sur un serveur Web et de les charger à partir de cet emplacement, nous allons simplement les intégrer au fichier SWF. Nous faisons cela en utilisant le SDK Flex Intégrer étiquette. Si vous ne possédez pas le SDK Flex ou si vous rencontrez des problèmes avec la version pré-installée, vous pouvez le télécharger ici.

Flash sait comment traiter certains types de fichiers, comme mon .png fichier de texture, mais il ne connaît pas le .dae format de fichier. Par conséquent, nous devons définir un paramètre secondaire, le type MIME, pour application / flux d'octets - cela signifie que le fichier sera transformé en un ByteArray.

Lorsque vous utilisez le Intégrer balise, nous devons faire référence au chemin relatif (ou complet) du fichier et attribuer une classe à ce fichier. Plus tard, nous pouvons créer une instance du fichier incorporé en utilisant cette classe.

Ici vous pouvez voir le code:

 public class EmbeddingDAE étend BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Incorporer (source = "bike_texture.png")] private var bikeTextureClass: Class; fonction publique EmbeddingDAE ()

Vous devrez remplacer les chemins pour qu'ils correspondent à vos propres fichiers..

Étape 4: Manipulation de la texture

Pour utiliser notre texture avec notre modèle dans Papervision3D, nous devons faire trois choses:

Créer une instance de la texture en tant que Bitmap - afin que nous puissions accéder à sa bitmapData.
Créer un Matériel avec ça bitmapData -- cela fonctionnera comme une texture.
Créer un MatériauxListe, qui reliera notre matériel à notre modèle. Il aura besoin du nom du matériau utilisé pour le modèle. Si vous n'avez qu'un seul fichier de texture (ce qui est le plus courant), vous n'avez pas à vous en soucier, utilisez simplement "tous".

Voici le code faisant cela (ajouté à onFullyLoaded ()):

 var bitmap: Bitmap = new bikeTextureClass (); var bitmapMaterial: BitmapMaterial = new BitmapMaterial (bitmap.bitmapData); var materialsList: MaterialsList = new MaterialsList (); materialsList.addMaterial (bitmapMaterial, "all");

N'oubliez pas d'importer:

 import flash.display.Bitmap; import org.papervision3d.materials.BitmapMaterial; import org.papervision3d.materials.utils.MaterialsList;

Étape 5: chargez le modèle

Pour charger notre modèle, nous devons faire quatre choses:

Créez une variable pour notre modèle - considérez cela comme une coque vide.
Créer une instance de ByteArray contenant notre modèle.
Créer une instance de la variable pour notre modèle - créer le shell.
Chargez notre modèle en passant le ByteArray et le MatériauxListe à notre coquille vide.

Commencez par créer la variable:

 var privé bikeModelDAE: DAE;

Ensuite, faites le reste (en ajoutant à onFullyLoaded)

 var byteArray: ByteArray = new bikeModelClass (); bikeModelDAE = new DAE (); bikeModelDAE.load (byteArray, materialsList);

N'oubliez pas d'importer:

 import flash.utils.ByteArray; import org.papervision3d.objects.parsers.DAE;

Étape 6: Affichage du modèle

Il ne nous manque plus maintenant que de voir le modèle, qui est un morceau de gâteau. J'ajuste également la position de la caméra pour que nous puissions bien regarder ce modèle. Ensuite, je dis à Papervision3D de restituer chaque image.

Voici le code (en ajoutant à nouveau à onFullyLoaded ()):

 this.scene.addChild (bikeModelDAE); this.camera.z = 500; this.startRendering ();

Voici à quoi ça va ressembler:

Étape 7: Ajout de la rotation

Nous pouvons maintenant voir le modèle, mais d’un seul point de vue. C'est un peu ennuyeux n'est-ce pas? Ajoutons de la rotation! Ici, nous allons remplacer une fonction appelée chaque image par le moteur Papervision3D..

 redéfinit la fonction protégée onRenderTick (event: Event = null): void super.onRenderTick (event); bikeModelDAE.yaw (1);

La voici encore une fois:

Conclusion

Vous savez maintenant comment ajouter des modèles 3D à vos projets Flash, et c'est en fait assez simple. J'espère que vous avez aimé lire et que vous l'avez trouvé utile.

Merci d'avoir lu!

Code