Blog de Diseño Web y Programación

Tutorial 3D en Flash, realizar un cubo.

Archivado en: ActionScript 3.0, Flash, Tutoriales, Flash 3D — info @ Nov 18th, 2008

Lo primero será bajarnos las clases de Papervision3D y en su versión 2.0. Podemos hacerlo en esta dirección: http://code.google.com/p/papervision3d/downloads/list

Posteriormente, en Flash, tenemos que agregar en la ventana de Configuración de ActionScript 3, la ruta de las clases que hemos bajado.

Importamos las clases que vamos a usar y que están en los paquetes correspondientes de flash y de papervision3d. Recordamos que el asterisco (*) significa el comodín, para importar todas las clases de dicho paquete.

import flash.events.*;
import flash.display.*;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.core.proto.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.materials.*;

Ahora vamos a declarar las variables necesarias para el uso del 3D. Son los objetos cámara, un visor para mostrar lo que se va a renderizar, una escena, y el objeto de renderización que utilizaremos más adelante.

var camara:Camera3D = new Camera3D();
var vista:Viewport3D = new Viewport3D(550, 400);
var escena:Scene3D = new Scene3D();
var render:BasicRenderEngine = new BasicRenderEngine();

Por comodidad para este caso vamos a meter todos los elementos en un nuevo objeto 3D, que llamaremos contenedor. Esto no tiene por qué ser así, pero de esta forma tendremos la posibilidad de referirnos a todo el “objeto” 3D que vamos a realizar.

var contenedor:DisplayObject3D = new DisplayObject3D();

Definimos una variable para posteriormente usarla para el valor de transparencia de los materiales, en este caso un 20% (recordamos que debe ser un valor entre 0 y 1)

var transparencia = .2;

Cada cubo que vamos a hacer, tedrá un material asociado, que se ha de crear como una lista de materiales de las seis caras de un cubo. Cada cara puede ser el material deseado. Para este caso hemos usado un material de imagen (BitmapData) y cinco de color liso.

var material:MaterialsList = new MaterialsList({
front: new BitmapAssetMaterial(”foto”, true),
back: new ColorMaterial(0xFF0000, transparencia),
right: new ColorMaterial(0×00FF00, transparencia),
left: new ColorMaterial(0×333333, transparencia),
top: new ColorMaterial(0×0000FF, transparencia),
bottom: new ColorMaterial(0xFFFF00, transparencia)
});

Para el objeto BitmapData, que es usado en la clase BitmapAssetMaterial, es necesario crear una vinculación del símbolo (en el símbolo de la bibloteca pulsar el botón derecho y pulsar Vinculación) para ser usado en ActionScript y que extiende a la clase flash.display.BipmapData (la que sale por defecto). En este ejemplo se le ha asignado el identificado o clase “foto”.

Ahora nos toca hacer los cubos. Para ellos almacenamos en una variable la cantidad de cubos que vamos a hacer. En otra el Array que almacenará cada uno de los cubos. Definimos la variable “tam” para indicar el tamaño que tendrá cada cubo, para que vaya aumentando cada uno de forma progresiva. Mediante el constructor Cubo, pasamos el material, el tamaño y los vértices. Una vez hecho el cubo, lo incluimos en la lista como hijo del objeto “contenedor”.

var cant = 8;
var cubos: Array = new Array();
for (var i = 0; i<=cant; i++) {
var tam = (i+2)*10;
cubos[i] = new Cube(material, tam, tam,tam,2, 2, 2);
contenedor.addChild(cubos[i]);
}

Añadimos el visor (vista) con el tamaño definido arriba en su construcción, posicionamos la cámara, y añadimos el “contenedor” a la escena.

this.addChild(vista);
camara.z = -200;
escena.addChild(contenedor);

En la animación 3D en flash, hay que ir representando lo que se ha de ver en cada fotograma, por lo que aún siendo un proceso automático, hay que ordenar a que se renderice mediante el objeto “render” creado anteriormente. Para esto, creamos el evento ENTER_FRAME para que nuestro flash 3D se renderice a cada instante (si es eso lo que queremos, siempre que algo cambie en nuestro visor). La función que vamos a asociar a este evento es renderizar.

this.addEventListener(Event.ENTER_FRAME, renderizar);

Declaramos y definimos la función renderizar, que su objetivo es cambiar la rotación de los cubos, con una fórmula matemática fácilmente entendible, para que tengan una especie de deceleración con un rozamiento diferente según el tamaño del cubo.

Tras cambiar las rotaciones de los cubos, toca renderizar la escena. Para esto hacen falta los objetos: render, escena, camara y vista, y mediante el método renderScene de la clase BasicRenderEngine redibujamos la escena en el visor.

function renderizar(e:Event):void {
for (var i=0; i<=cant; i++) {
var clip = cubos[i];
var roz=(i+2)*3;
clip.rotationY = ((clip.rotationY*roz)+((mouseX-200)/1))/(roz+1);
clip.rotationX = ((clip.rotationX*roz)+((mouseY-275)/1))/(roz+1);
}
camara.z = ((camara.z*8)+mouseY-500)/9;
render.renderScene(escena, camara, vista);
}

Ver muestra