Consejo rápido Visualización de un modelo 3D con Papervision3D

En este Consejo rápido veremos cómo incrustar y mostrar un modelo 3D en Flash, utilizando Papervision3D.

Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:

Introducción

Para utilizar este tutorial, deberá tener un modelo 3D, exportado como un archivo .dae, y su textura, como un archivo de imagen..

Voy a usar este modelo de bicicleta de montaña low-poly de 3DOcean, creado por OneManBand (que también creó este visor de objetos 3D en AIR).

Deberá descargar una copia de Papervision3D (también puede encontrar una copia en los archivos de origen)

Paso 1: Creando el archivo Flash

Cree un nuevo documento ActionScript 3 con dimensiones de 550x200 px y establezca la velocidad de fotogramas en 30 fps. Además, configure la clase de documento en "EmbeddingDAE".

Cree un rectángulo que cubra todo el escenario y rellénelo con un degradado radial de #FFFFFF a # D9D9D9. Ajusta el degradado con la herramienta Transformación de degradado, para que se vea así:

Paso 2: Configuración de la clase de documento

Cree un nuevo archivo ActionScript 3 y asígnele el nombre "EmbeddingDAE". Esta clase ampliará una clase de Papervision que tiene configurada toda la funcionalidad básica..

Como vamos a integrar el modelo 3D en su SWF, debemos asegurarnos de que el archivo se haya cargado por completo antes de intentar usarlo..

Aquí está el código para eso:

 package import flash.events.Event; importar org.papervision3d.view.BasicView; public class EmbeddingDAE extiende BasicView public function EmbeddingDAE () this.loaderInfo.addEventListener (Event.COMPLETE, onFullyLoaded);  función privada onFullyLoaded (e: Event): void

Paso 3: Incrustar los recursos

En lugar de alojar nuestros recursos en un servidor web y cargarlos desde allí, simplemente vamos a incrustarlos en el SWF. Hacemos esto usando el SDK de Flex Empotrar etiqueta. Si no tiene el SDK de Flex, o tiene problemas con la versión preinstalada, puede descargarlo aquí

Flash sabe cómo tratar con ciertos tipos de archivos, como mi .png archivo de textura, pero no sabe la .dae formato de archivo. Por lo tanto, tenemos que establecer un parámetro secundario, el tipo MIME, para aplicación / octet-stream - esto significa que el archivo se transformará en una ByteArray.

Al usar el Empotrar etiqueta, debemos referirnos a la ruta relativa (o completa) del archivo y asignar una clase a este archivo. Más tarde podemos crear una instancia del archivo incrustado usando esta clase.

Aquí puedes ver el código:

 public class EmbeddingDAE extiende BasicView [Embed (source = "mountain_bike.dae", mimeType = "application / octet-stream")] private var bikeModelClass: Class; [Embed (source = "bike_texture.png")] private var bikeTextureClass: Class; función pública EmbeddingDAE ()

Deberá reemplazar las rutas para que coincidan con sus propios archivos..

Paso 4: Manejo de la textura

Para usar nuestra textura con nuestro modelo en Papervision3D, necesitamos hacer tres cosas:

Crea una instancia de la textura como un Mapa de bits - para que podamos acceder a su bitmapData.
Crear un Material con este bitmapData -- esto funcionará como una textura.
Crear un Lista de materiales, Lo que vinculará nuestro material a nuestro modelo. Necesitará el nombre del material utilizado para el modelo. Si solo tiene un archivo de textura (que es el más común) no tiene que preocuparse por esto, simplemente use "todos".

Aquí está el código haciendo esto (añadido a onFullyLoaded ()):

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

Recuerda importar:

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

Paso 5: cargar el modelo

Para cargar nuestro modelo, tenemos que hacer cuatro cosas:

Cree una variable para nuestro modelo - piense en esto como una cáscara vacía.
Crear una instancia de la ByteArray que contiene nuestro modelo.
Cree una instancia de la variable para nuestro modelo - creando el shell.
Cargue nuestro modelo pasando el ByteArray y el Lista de materiales a nuestra cáscara vacía.

Primero crea la variable:

 bicicleta privada varModelDAE: DAE;

Luego haz el resto (añadiendo a onFullyLoaded)

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

Recuerda importar:

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

Paso 6: Viendo el modelo

Ahora todo lo que nos falta es poder ver el modelo, que es un pedazo de pastel. También estoy ajustando la posición de la cámara para que podamos ver bien este modelo. Entonces le digo a Papervision3D que vuelva a renderizar cada fotograma.

Aquí está el código (de nuevo agregando a onFullyLoaded ()):

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

Esto es lo que se verá:

Paso 7: Agregando Rotación

Ahora podemos ver el modelo, pero solo desde un punto de vista. Eso es un poco aburrido ¿no? Vamos a añadir algo de rotación! Aquí vamos a anular una función que Papervision3D llama a todos los cuadros..

 anular la función protegida onRenderTick (evento: Evento = nulo): void super.onRenderTick (evento); bikeModelDAE.yaw (1);

Aquí está una vez más:

Conclusión

Ahora sabe cómo agregar modelos 3D a sus proyectos Flash, y en realidad es bastante simple. Espero que hayan disfrutado la lectura y les haya resultado útil..

Gracias por leer!

Código