Aplicaciones 3D en Flash y un tutorial Básico de Papervision 3D
January 23rd, 2009
Hace tiempo tengo ganas de empezar a escribir pequeños tutoriales sobre cosas entretenidas. Y una de las cosas mas entretenidas que descubrí en el ultimo año es la posibilidad de crear aplicaciones 3D en Flash. He visto sitios en 3d interactivos que me han dejado con la boca abierta. Hay un blog que se dedica a buscar y postear diariamente sitios en 3D buenos : Daily Papervision3D
Existen varios motores 3D que podemos utilizar: Away3D, Sandy, Five3D, Papervision3D, entre otros… En mi caso elegi papervision3D, ya que durante el año pasado estuve trabajando con él. Bueno, arranquemos con el breve tutorial…
Lo que vamos a hacer es lo siguiente:
Vamos a ver parte por parte este código:
En este caso nuestro document class esta extendiendo a BasicView. Por que? Bueno, cuando creamos algo en PV3d debemos encargarnos de crear y manejar diferentes objetos necesarios para redenderear el mundo 3d, ellos son: la escena, el viewport y la camara. Bueno, la gracia es que toda eso ya esta hecho dentro del BasicView, por lo cual al principio no debemos preocuparnos por esto. En este blog se puede leer un poco mas sobre el BasicView.
Luego, dentro de nuestro constructor tenemos:
Aqui estamos creando un cubo con determinado material (el wireframe es tan solo uno de los diferentes materiales que le podemos asignar a los objetos en pv3d, recomiendo mirar la documentacion para conocer mas sobre el tema materiales). Luego de creado el cubo lo debemos agregar como child de la escena que vamos a renderear. Si quieres que se muestren los objetos en pv3d, debes agregarlos a la escena. Tal cual lo haces usualmente con los sprites.
Bueno, el cubo ya esta en la escena. Lo que hacemos ahora es subir la camara al y=500, y luego la hacemos mirar al cubo que creamos anteriormente. Con esto logramos un angulo para apreciar mejor el efecto 3D. Ya tenemos todo listo, ahora empezamos a renderear. El startRendering agrega un eventListener al enter frame y llama a onRenderStick.
Para lograr la rotacion del cubo, lo que hacemos es girarlo 1 grado en cada frame con el yaw(1). Y luego rendereamos la escena usando la camara y el vierport del BasicView. En lugar de este ultima linea tambien podriamos usar super.onRenderStick(event).
Bueno, con esto tendriamos nuestro primer ejemplo de papervision funcionando. Para ver mas tutoriales de papervision recomiendo pegarse una vuelta por pv3d.org.
Muchas gracias
Existen varios motores 3D que podemos utilizar: Away3D, Sandy, Five3D, Papervision3D, entre otros… En mi caso elegi papervision3D, ya que durante el año pasado estuve trabajando con él. Bueno, arranquemos con el breve tutorial…
Lo que vamos a hacer es lo siguiente:
package
{
import flash.events.Event;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
import org.papervision3d.objects.primitives.Cube;
[SWF(width="640", height="480", backgroundColor="#FFFFFF", frameRate="60")]
public class HolaMundo extends BasicView
{
private var cubo:Cube;
public function HolaMundo()
{
var materiales:MaterialsList = new MaterialsList();
materiales.addMaterial(new WireframeMaterial(), "all");
cubo = new Cube(materiales);
scene.addChild(cubo);
camera.y = 500;
camera.lookAt(cubo);
startRendering();
}
override protected function onRenderTick(event:Event = null):void
{
cubo.yaw(1);
renderer.renderScene(scene, camera, viewport);
}
}
}Vamos a ver parte por parte este código:
public class HolaMundo extends BasicView
En este caso nuestro document class esta extendiendo a BasicView. Por que? Bueno, cuando creamos algo en PV3d debemos encargarnos de crear y manejar diferentes objetos necesarios para redenderear el mundo 3d, ellos son: la escena, el viewport y la camara. Bueno, la gracia es que toda eso ya esta hecho dentro del BasicView, por lo cual al principio no debemos preocuparnos por esto. En este blog se puede leer un poco mas sobre el BasicView.
Luego, dentro de nuestro constructor tenemos:
var materiales:MaterialsList = new MaterialsList(); materiales.addMaterial(new WireframeMaterial(), "all"); cubo = new Cube(materiales); scene.addChild(cubo);
Aqui estamos creando un cubo con determinado material (el wireframe es tan solo uno de los diferentes materiales que le podemos asignar a los objetos en pv3d, recomiendo mirar la documentacion para conocer mas sobre el tema materiales). Luego de creado el cubo lo debemos agregar como child de la escena que vamos a renderear. Si quieres que se muestren los objetos en pv3d, debes agregarlos a la escena. Tal cual lo haces usualmente con los sprites.
camera.y = 500; camera.lookAt(cubo); startRendering();
Bueno, el cubo ya esta en la escena. Lo que hacemos ahora es subir la camara al y=500, y luego la hacemos mirar al cubo que creamos anteriormente. Con esto logramos un angulo para apreciar mejor el efecto 3D. Ya tenemos todo listo, ahora empezamos a renderear. El startRendering agrega un eventListener al enter frame y llama a onRenderStick.
override protected function onRenderTick(event:Event = null):void
{
cubo.yaw(1);
renderer.renderScene(scene, camera, viewport);
}Para lograr la rotacion del cubo, lo que hacemos es girarlo 1 grado en cada frame con el yaw(1). Y luego rendereamos la escena usando la camara y el vierport del BasicView. En lugar de este ultima linea tambien podriamos usar super.onRenderStick(event).
Bueno, con esto tendriamos nuestro primer ejemplo de papervision funcionando. Para ver mas tutoriales de papervision recomiendo pegarse una vuelta por pv3d.org.
Muchas gracias
