Tutorial de 3D interactivo en Flash con Papervision 3D

En uno de los proyectos que empezamos a realizar, tuvimos la necesidad de usar un 3D con interacción en flash, así que me puse a investigar un poco sobre Papervision (ese ejemplo es lo máximo), que es un motor de gráficos 3D para flash, este esun tutorial básico sobre el uso.

Para mas información tienen un blog.

Lo primero que necesitamos es una imagen como esta:

Luego la importamos a Flash CS3 y le ponemos como linkage clab, así:

Asi mismo necesitamos las clases necesarias para usar papervision (Descargar aquí con los archivos del tutorial) y un modelo en 3D (no esa clase de modelo). Un objeto modelado en 3D (en este caso una esfera) y exportado en .ASE (Incluido en los archivos del tutorial)

Lo haremos de dos formas, en la línea de tiempo principal y después lo pasamos a clases, ahora a programar:

Lo primero q necesitamos es importar las clases que usaremos:

import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;         
import org.papervision3d.objects.*; 
import org.papervision3d.materials.*;

Luego necesitamos crear unas variables donde guardaremos la información necesaria para hacer funcionar nuestra animación:

var contenedor:Sprite;
var escena:Scene3D;
var camara:Camera3D;
var esfera:Ase;

Con eso estamos listos:

//crea un objecto contenedor en mi variable 
contenedor= new Sprite();
//agrego el contenedor al escenario 
this.addChild(contenedor);
//doy una ubicación
contenedor.x = 200;
contenedor.y = 200;

//inicializo mi escena que genera las imagenes
//y las coloca en el contenedor
escena = new Scene3D( contenedor );
//inicializo mi camara que se encarga de las vistas
camara = new Camera3D();

Ahora debemos crear un par de funciones:

function agregoEsfera():void {
    //llamo al material que usará mi 3D 
    var miMaterial :BitmapAssetMaterial = new BitmapAssetMaterial( "clab" );
    //ahora agrego a la esfera: el material, el modelo 3D y la escala 
    esfera = new Ase( miMaterial, "world.ase", .5 );
    //le doy un angulo 
    esfera.rotationX = 30;
    //digo donde empieza a mostrar la imagen 
    esfera.yaw( -100 );
    //agrego la esfera a la escena 
    escena.addChild( esfera );
}

function loop3D(event:Event):void {
    //velocidad de rotación 
    esfera.yaw( 5 );
    //agrego la camra a la escena 
    escena.renderCamera( camara );
}

Con eso estamos listos para ver nuestro pequeño mundo

//llamo a mi función 
agregoEsfera();
//agrego un listener para q se anime la esfera 
this.addEventListener( Event.ENTER_FRAME, loop3D );

Eso es todo, solo probamos nuestra pelicula.

Ahora haremos una 2da versión en clases

Para eso abrimos nuestro Flash CS3 y añadimos nuestra clase al FLA

Ahora, el mismo código que usamos lo pasamos a la clase así:

package {

    import flash.display.*;
    import flash.events.*;

    //papervision class
    import org.papervision3d.scenes.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.objects.*;
    import org.papervision3d.materials.*;

    public class classHolaMundo extends Sprite {

        //nuestras variables 
        private var contenedor : Sprite;
        private var escena : Scene3D;
        private var camara : Camera3D;
        private var esfera : Ase;

        public function classHolaMundo() {
            init3D();
            this.addEventListener( Event.ENTER_FRAME, loop3D );
        }

        //agrego el contenedor al escenario
        private function init3D():void {
            contenedor = new Sprite();
            addChild( contenedor);
            contenedor.x = 200;
            contenedor.y = 200;
            escena = new Scene3D( contenedor );
            camara = new Camera3D();
            agregoEsfera();
        }

        //Agrego la esfera al escenario 
        private function agregoEsfera():void {
            var miMaterial :BitmapAssetMaterial = new BitmapAssetMaterial( "clab" );
            esfera = new Ase( miMaterial, "world.ase", .5 );
            esfera.rotationX = 30;
            esfera.yaw( -100 );
            escena.addChild( esfera );
        }

        //evento que anima mi esfera 
        private function loop3D(event:Event):void {
            esfera.yaw( 5 );
            escena.renderCamera( camara );
        }
        //fin class
    }
    //fin package 
}

El resultado final es:

Ahora, si modificamos la función que anima así:

function loop3D(event:Event):void {
    //esfera.yaw( 5 );
    escena.renderCamera( camara );
    esfera.rotationX = -contenedor.mouseY/4;
    esfera.rotationY = -contenedor.mouseX/4;
}

La esfera se moverá de acuerdo al movimiento del mouse. ¡Pruebalo en tu ejemplo!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo