Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript
Code

Visualiza modelos de 3DS con Away3D 4.0 Beta

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial aprenderemos cómo cargar y mostrar un archivo de modelo 3DS en Flash, usando Away3D 4.0 beta y la aceleración de hardware GPU de Stage3D.


Vista previa del resultado final

Echemos un vistazo al resultado final hacia el que estaremos trabajando:

Haz clic para descargar los archivos de ejemplo.


Introducción

Para usar este tutorial necesitarás tener un modelo en 3D (exportado como un archivo .3ds) y su textura (como un archivo de imagen).

He creado un modelo en 3D simple de una tetera en Autodesk 3DS Max, y lo exporté a un archivo llamado Teapot.3DS junto con su archivo de textura separado, teapot.jpg. Puedes encontrar ambos archivos en la descarga de la fuente.

Necesitarás descargar un paquete SWC de Away3D 4.0.0 beta (también puedes encontrar este SWC en los archivos fuente).

Y debes saber que la versión de Away3D 4.0.0 beta usa las nuevas herramientas de Stage3D de Adobe Flash, lo que significa que puede usar la GPU para la aceleración de gráficos 3D.

Vamos a construir este ejemplo usando AS3 puro, compilado en FlashDevelop (puedes leer más sobre esto aquí). FlashDevelop es un IDE de AS3 gratuito, aunque solamente para Windows. Si prefieres usar otro IDE aún podrás seguir este tutorial.


Paso 1: Crea un nuevo proyecto

Si aún no lo tienes, asegúrate de descargar e instalar FlashDevelop. Ábrelo y crea un nuevo proyecto de AS3.

Create a New Project in FlashDevelop

FlashDevelop creará una plantilla de proyecto AS3 vacía para tí. Usaremos la clase Main para todo nuestro código.


Paso 2: Opciones del compilador

Ve al menú Project (Proyecto), elige Properties (Propiedades) y cambia algunas opciones:

  1. Asigna el valor Flash Player 11.1 como plataforma destino.
  2. Cambia el tamaño del SWF a 550x400px.
  3. Configura el color de fondo para que sea negro.
  4. Cambia el valor de FPS a 40.
Target Flash 11

Si queremos ejecutar este tutorial desde el código HTML incrustado, tenemos que incluir el parámetro wmode=direct en los parámetros del objeto Flash en el archivo HTML. Se verá de esta forma:

En este tutorial vamos a cargar el archivo 3DS desde el almacenamiento local (en vez de hacerlo desde un servidor web), así que debemos cambiar algunas configuraciones en la pestaña Compiler Options (Opciones del Compilador). Asigna el valor False (Falso) a Use Network Services (Usar Servicios de Red).

Local file load


Paso 3: Agrega la biblioteca Away3D

Obtén away3d-core-fp11_4_0_0_beta.swc de los archivos fuente o descárgalo desde el sitio de Away3D.

Copia ese archivo al directorio lib de tu proyecto.

En FlashDevelop, haz clic con el botón derecho en el archivo SWC y elige Add to Library (Añadir a la biblioteca).

Add Away3D Library


Paso 4: Imports

Ahora vamos a comenzar a codificar con nuestro archivo Main.as. Para empezar, tenemos que importar los archivos de biblioteca necesarios para que el programa configure el motor Away3D y los componentes Flash. Son bastantes, así que vamos a deshacernos de esa tarea:


Paso 5: Inicializar el programa

Vamos a comenzar. Declararemos las variables que vamos a necesitar, a inicializar el motor 3D y a configurar el botón "Browse" ("Buscar") así como el campo de texto de salida de la depuración.

En las líneas 25-29 inicializamos los componentes de gráficos de Away3D. Creamos un nuevo View3D (un contenedor que almacena la cámara y los objetos), configuramos su lente y su cámara y lo agregamos a la lista de visualización.

Después de eso creamos un botón Browse (Buscar): dibujamos su fondo, agregamos su etiqueta, lo configuramos y lo agregamos a la lista de visualización.

Para facilitar el seguimiento del estado de carga de 3DS creamos una etiqueta de depuración, que es un campo de texto simple.

Finalmente, inicializamos una instancia de FileReference para gestionar la búsqueda del archivo 3DS.


Paso 6: Inicializar el cargador de 3D

La siguiente tarea importante que debemos llevar a cabo es crear un cargador para modelos en 3D.

Esta función tiene tres secciones:

  1. Primero limpiamos todo, en caso de que nuestro programa haya sido ejecutado anteriormente.
  2. Después de eso, inicializamos una nueva instancia de Loader3D y le agregamos funciones de escucha que se activarán cuando se lance un Error al cargar un archivo 3D por completo. Para hacerlo visible, lo añadimos a la escena de View3D.
  3. Para asegurarnos de que verdaderamente podamos ver el objeto una vez que haya sido cargado, le indicamos a la cámara que apunte hacia él.

Paso 7: Gestionar todos los eventos

A continuación vamos a añadir todas las funciones manejadoras de eventos, todas las cuales tienen qué ver con la carga del archivo de 3DS.

Cuando el usuario haga clic en el botón Browse (Buscar), mostramos el File Browse Dialog, o cuadro de diálogo de búsqueda de archivos, que usa un FileFilter para restringir los archivos mostrados y que sean solamente aquellos que tengan una extensión .3ds. Agregamos varios manejadores de eventos a este cuadro de diálogo para poder identificar si un archivo ha sido detectado o si ocurre un error.

Después de que un archivo haya sido seleccionado, lo cargamos en la instancia de FileReference que inicializamos anteriormente. Una vez que haya cargado, invocamos a la función initLoader() que definimos en el paso anterior y que carga nuestro modelo en 3D.

En este punto hay dos estados posibles que podemos detectar:

  • Uno es el estado de "error", que implica que nuestro programa no puede cargar el archivo del modelo en 3D (tal vez la ruta es incorrecta, o el archivo de mapa de texturas es el equivocado...).
  • El otro es el evento "loaded successfully" ("cargado exitosamente", durante el que enviamos el archivo cargado a un Mesh y lo añadimos a la escena del View3D.

Para liberar nuestra memoria y reutilizarla más adelante, debemos deshacernos de nuestro cargador.

Al final del código anterior (asumiendo que el archivo fue cargado) agregamos un evento ENTER_FRAME, que usaremos para renderizar el objeto. Ahora escribiremos ese manejador.


Paso 8: Iniciar el ciclo de renderizado

Ahora que todo ha sido inicializado, estamos listos para renderizarlo todo. Con cada cuadro, haremos que el objeto en 3D se mueva (gire) e invocaremos a la función render() de View3D para actualizar la vista.


Paso 9: ¡Compila y ejecuta!

¡Casi listo! compila tu SWF con F5 y observa tu resultado final. Muy interesante, ¿verdad?.

No puedes hacer más que simplemente girar el objeto. Intenta invocando object3d.moveFoward(10) u object3d.pitch(1). Incluso podrías hacer esto en respuesta al movimiento del ratón o a la pulsación de una tecla.

Solamente como referencia, y para asegurarte de que hayas usado los nombres de archivos y ubicaciones correctas para todo, ésta es la manera en la que debería verse tu proyecto de FlashDevelop:

Just for reference, and to ensure that you've used the correct filenames and locations for everything

Conclusión

Hemos terminado nuestro primer tutorial de 3D básico sobre la función de aceleración 3D más reciente de Adobe. De manera cálida, animo a todos los lectores que se pongan en contacto conmigo a través de los comentarios, o a través de mi sitio web, en cualquier momento. Gracias por leer. Hasta la próxima. ¡Buena suerte y QUE TE DIVIERTAS!.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.