Share
En este tutorial aprenderemos cómo cargar y mostrar un archivo de modelo 3DS en Flash, utilizando la versión beta de Away3D 4.0 y la aceleración de hardware GPU de Stage3D..
Echemos un vistazo al resultado final en el que trabajaremos:
Haga clic para descargar los archivos de demostración..
Para usar este tutorial, deberá tener un modelo 3D (exportado como un archivo .3ds) y su textura (como un archivo de imagen).
Creé un modelo 3D simple de una tetera en Autodesk 3DS Max y lo exporté a un archivo llamado Tetera.3DS junto con su archivo de textura separado, teapot.jpg. Puedes encontrar ambos archivos en la fuente de descarga..
Necesitará descargar un paquete SWC de Away3D 4.0.0 beta (también puede encontrar este SWC en los archivos de origen).
Y necesita saber que la versión beta de Away3D 4.0.0 usa las nuevas funciones Stage3D de Adobe Flash, lo que significa que puede usar la GPU para la aceleración de gráficos 3D.
Vamos a construir esta demostración usando AS3 puro, compilado en FlashDevelop (lea más sobre esto aquí). FlashDevelop es un IDE de AS3 gratuito, aunque solo es para Windows. Si prefiere utilizar otro IDE, aún podrá seguir este tutorial..
Si aún no lo tiene, asegúrese de descargar e instalar FlashDevelop. Ábrelo y comienza un nuevo proyecto AS3..
FlashDevelop creará un proyecto de plantilla AS3 en blanco para usted. Usaremos la clase principal para todo nuestro código..
Vaya al menú Proyecto, elija Propiedades y cambie algunas opciones:
Si queremos ejecutar este tutorial desde el código de inserción HTML, debemos incluir el parámetro wmode = directo En los parámetros del objeto Flash en el archivo HTML. Se verá así:
En este tutorial cargaremos el archivo 3DS desde el almacenamiento local (en lugar de hacerlo desde un servidor web), por lo que debemos cambiar algunos ajustes en la pestaña Opciones del compilador. Conjunto Utilizar servicios de red a Falso.
Obtener away3d-core-fp11_4_0_0_beta.swc de los archivos de origen, o descárguelo del sitio de Away3D.
Copia ese archivo a tu proyecto lib directorio.
En FlashDevelop, haga clic con el botón derecho en el archivo SWC y elija Agregar a la biblioteca.
Ahora vamos a empezar a codificar con nuestro Main.as expediente. Para comenzar, tenemos que importar los archivos de biblioteca necesarios para que el programa configure el motor Away3D y los componentes de Flash. Hay bastantes, así que vamos a quitarlos del camino:
// Tutorial de visor de modelos 3DS // por Vu Hoang Minh - www.3dgameflash.com // Creado para el paquete active.tutsplus.com // Las clases de Away3D importan away3d.cameras.lenses.PerspectiveLens; importar away3d.containers.ObjectContainer3D; importar away3d.containers.View3D; importar away3d.entities.Mesh; importar away3d.events.LoaderEvent; importar away3d.loaders.Loader3D; importar away3d.loaders.parsers.Max3DSParser; importar away3d.materials.TextureMaterial; importar away3d.textures.BitmapTexture; // Clases generales de Flash para visualización e interacción import flash.display.Bitmap; importar flash.display.MovieClip; importar flash.display.Shape; importar flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importar flash.geom.Vector3D; importar flash.text.TextField; // Clases para cargar el archivo 3DS desde el disco duro import flash.display.SimpleButton; importar flash.events.IOErrorEvent; importar flash.net.FileFilter; importar flash.net.FileReference; importar flash.net.URLRequest; importar flash.system.Security;
Empecemos. Declararemos las variables que vamos a necesitar, inicializaremos el motor 3D y configuraremos el botón "Examinar" y depuraremos el campo de texto de salida..
Accentsconagua
La clase pública Main extiende Sprite private var file: FileReference; var privado view3d: View3D; cargador de var privado: Loader3D; private var labelDebug: TextField; private var object3d: Mesh; función pública Main (): void // boilerplate cargando el código if (stage) init (); else addEventListener (Event.ADDED_TO_STAGE, init); función privada init (e: Evento = nulo): void // nos permite cargar un archivo local Security.allowDomain ("*"); removeEventListener (Event.ADDED_TO_STAGE, init); // init motor 3D view3d = nuevo View3D (); view3d.camera.lens = new PerspectiveLens (); view3d.camera.z = 100; addChild (view3d); // cargador 3D initLoader (); // Botón para abrir el buscador de archivos var mcBrowse: MovieClip = new MovieClip (); mcBrowse.graphics.beginFill (0xeeeeee); mcBrowse.graphics.drawRoundRect (1, 2, 100, 25, 7, 7); mcBrowse.graphics.endFill (); var labelBrowse: TextField = new TextField (); labelBrowse.text = "Examinar"; mcBrowse.addChild (labelBrowse); mcBrowse.mouseChildren = false; mcBrowse.buttonMode = true; labelBrowse.x = 25; mcBrowse.addEventListener (MouseEvent.CLICK, onClick_mcBrowse); addChild (mcBrowse); // debug output labelDebug = new TextField (); labelDebug.text = "…"; labelDebug.textColor = 0xff0000; labelDebug.selectable = false; labelDebug.y = mcBrowse.height / 2; labelDebug.width = 600; addChild (labelDebug); // archivo file = new FileReference (); En las líneas 25-29, inicializamos los componentes 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 Examinar: 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 un FileReference instancia para manejar la navegación para el archivo 3DS.
Lo siguiente importante que debemos hacer es crear un cargador de modelos 3D.
función privada initLoader (): void // borrar todo removeEventListener (Event.ENTER_FRAME, onEnterFrame); while (view3d.scene.numChildren> 0) view3d.scene.removeChild (view3d.scene.getChildAt (0)); // init nuevo cargador 3D Loader3D.enableParser (Max3DSParser); loader = new Loader3D (); loader.addEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.addEventListener (LoaderEvent.LOAD_ERROR, onError_loader); view3d.scene.addChild (cargador); // config camera view3d.camera.lookAt (loader.position);
Esta función tiene tres secciones:
Loader3D instancia, y agregue escuchas que se activen cuando se dispara un Error cuando un archivo 3D se ha cargado completamente. Para hacerlo visible, lo añadimos a la View3Descena de.A continuación, agregaremos todas las funciones del controlador de eventos, que tienen algo que ver con la carga del archivo 3DS..
función privada onClick_mcBrowse (e: MouseEvent): void file.browse ([nuevo FileFilter ("3DS", "* .3ds")]); file.addEventListener (Event.SELECT, onFileSelected); file.addEventListener (SecurityErrorEvent.SECURITY_ERROR, onSecurityError); file.addEventListener (IOErrorEvent.IO_ERROR, onIOError); función privada onSecurityError (e: Event): void labelDebug.text + = ". ¡Error de seguridad!"; función privada onIOError (e: IOErrorEvent): void labelDebug.text + = ".File no encontrado Error!"; función privada onFileSelected (e: Event): void labelDebug.text = "File:" + file.name; file.removeEventListener (Event.SELECT, onFileSelected); file.addEventListener (Event.COMPLETE, onFileLoaded); archivo.load (); función privada onFileLoaded (e: Event): void file.removeEventListener (Event.COMPLETE, onFileLoaded); initLoader (); loader.loadData (e.target.data); función privada onError_loader (e: LoaderEvent): void trace ("Error al cargar el archivo ..."); labelDebug.text + = ".Loading Error"; función privada onComplete_loader (e: LoaderEvent): void trace ("Archivo 3D cargado"); labelDebug.text + = ".Complete.Rendering…"; loader.removeEventListener (LoaderEvent.RESOURCE_COMPLETE, onComplete_loader); loader.removeEventListener (LoaderEvent.LOAD_ERROR, onError_loader); object3d = Mesh (loader.getChildAt (0)); view3d.scene.addChild (object3d); loader.dispose (); loader = null; addEventListener (Event.ENTER_FRAME, onEnterFrame); Cuando el usuario hace clic en el botón Examinar, mostramos el diálogo de búsqueda de archivos, que usa una FileFilter para restringir los archivos mostrados a aquellos con una .3ds extensión. Agregamos varios detectores de eventos a este cuadro de diálogo, para que podamos detectar cuándo se detecta un archivo o si se produce un error..
Después de seleccionar un archivo, lo cargamos en la FileReference instancia que hemos inicializado anteriormente. Una vez que tenga cargado, llamamos al initLoader () Función que definimos en el paso anterior, que carga nuestro modelo 3D..
En este momento, hay dos estados posibles que podemos atrapar:
Malla y añadirlo a la escena de View3D.Para liberar nuestra memoria y reutilizarla más tarde, debemos deshacernos de nuestro cargador..
Al final del código anterior (asumiendo que el archivo está cargado) agregamos un ENTER_FRAME Evento, que utilizaremos para renderizar el objeto. Vamos a escribir ese controlador ahora.
Ahora que todo se ha inicializado, estamos listos para procesarlo todo. Cada fotograma, haremos que el objeto 3D se desvíe (gire) y llamemos al hacer() funcion de View3D para actualizar la pantalla.
función privada onEnterFrame (e: Event): void object3d.yaw (1); // desvío por una unidad view3d.render ();
¡Casi termino! Compila tu SWF con F5 y ve tu resultado final. Muy interesante, ¿verdad??
Usted puede hacer que simplemente rotar el objeto, intente llamar object3d.moveFoward (10) o object3d.pitch (1). Incluso podría hacer esto en respuesta a un movimiento del mouse o presionando una tecla.
Solo como referencia, y para asegurarte de que has usado los nombres de archivo y las ubicaciones correctas para todo, aquí está el aspecto que debería tener tu proyecto FlashDevelop:
Hemos finalizado el primer tutorial básico en 3D sobre la función 3D Accelarate más reciente de Adobe. Doy una calurosa bienvenida a todos los lectores para que se pongan en contacto conmigo a través de los comentarios, o de mi sitio web, en cualquier momento. Gracias por leer. Nos vemos la proxima vez Buena suerte y diviertete!
