Cómo empezar con Papervision

Hola de nuevo:

Se me olvidaba, no sé si has visto que al lado del botón Source tienes otro llamado Design, lo pulsas y Flex se convierte en un entorno visual. En el centro de la pantalla te aparece un lienzo (canvas) en blanco (o gris Flex, más concretamente XD), y en la parte inferior izquierda tienes todos los componentes necesarios para hacerte tu primera aplicación: botones, ventanas, listas desplegables, campos de texto, etc. Y layouts para distribuir de forma ordenada los componentes dentro de la aplicación.

Un saludo

muy buenas

lamento que no participes pero bueno, te dare mucha guerra entonces para aprender jejeje

ahora mismo me pongo a probar lo que me has explicado a ver que tal me sale.

Una pregunta que te querria hacer sobre la estructura de papervision:

- me he fijado que todos los archivos de clases de papervision (en las aplicaciones creadas, como la de los cubos por ejemplo):

a) import... con esto importamos las clases de papervision, flash...

b) public o private class ... hacemos mencion a la clase creada, a partir de aqui se forma el contenido de la aplicacion creada.

c) var ... definicion de las variables que forman la aplicacion

d) luego vamos agregando los elementos: escenario, geometrias, efectos de cámara...

esto creo que lo tengo claro (corrigeme si me equivoco :P).

Ahora bien. Un ejemplo simple: un cubo en entorno 3d.

a) Como se yo los elementos que tengo que importar de papervision? Hay alguna aplicacion que, segun lo que quieras hacer te los coloque o eres tu el que va diciendo: import org.papervision3d.cameras.*, import org.papervision3d.materials.* ...
b)que diferencia hay entre public y private?? es que veo diferentes aplicaciones que usan uno u otro, y otras que ni lo usan.
c)que es un sprite?
d)los efectos que se pueden hacer (cámara que al pulsar sobre un objeto haga un zoom, mover la cámara con el teclado, difuminar objetos al estar lejanos...) se pueden ver en algun listado o hay que ver los codigos de papervision e ir investigando como se usa?
supongo que es la segunda opcion, sino seria mas facil de aprender jejeej

Todo esto lo pregunto para probar de hacer una aplicacion mediante flex con papervision y empezar a escribir el código.

muchas gracias!!!

pd. he probado el ejemplo del puzzle pero tengo la duda de como girar las fichas, porque aparecen en un sentido y en la imagen es en el contrario.

Hola:

Eso es lo bueno de utilizar otros editores que no sean el de la IDE de Flash: te olvidas de los imports. Tú empieza a escribir código y Eclipse se encarga de ir añadiendo los imports que vas a utilizar. Ejemplo, escribes:

var miPlano:Plane = new Plane(...

y verás cómo arriba habrá aparecido el import para el plano

Además cuando pulsas los ":" te saldrá una lista con las clases que puedes escribir, y rápidamente puedes elegirlo.

Es algo difícil de explicar pero fácil de entender, como dijo la folckórica ;-). Prueba a empezar a escribir código y verás qué fácil te resulta.

También tienes asistentes para crearte una nueva clase: Te sale una ventana donde especificas el paquete donde quieres colocarla, por ejemplo, en fracto.com.pv3d, le dices de cuál extiende ( o sea, si se va a tratar de un sprite, un movieClip, un sound, etc).

Lo que te digo, esto es empezar a escribir y verás que no te hace falta ni conocer a priori los métodos/propiedades de las clases que estás utilizando.

Un saludo.

hola de nuevo!

lo primero, decir que escribir con eclipse es realmente sencillo! Es cuestion de ir paso a paso. De esta manera se entiende mucho mejor para que funciona cada linea de código. Está muy bien escribir una variable (por ejemplo, un plano) y salir directamente en linea las variables que son necesarias para definir el plano (material, tamaño...). Realmente muy cómodo.

Estoy empezando por crear una aplicacion donde salga un plano y una esfera, para ir jugando con tamaños, materiales, efectos de giro, juego con las cámaras... supongo que empezar asi es bueno para no liarme con cosas mas complicadas.

A la vez, me da la sensacion que, a parte, me esta resultando mucho mas fácil de esta manera que creando las geometrias en 3d studio... aunque en un futuro me gustaria acabar de aprenderlo bien (te dare de nuevo la lata) porque si la web que creo es de arquitectura, me gustaria poder visitar las maquetas 3d de mis proyectos (como en un ejemplo de la web de mr doob).

He empezado por escribir las variables y, en efecto, se van importando las clases necesarias mientras se escribe el código (realmente bueno!).

Siguiendo con mi ejemplo, ya he creado las variables. El siguiente apartado que he visto en algunos ejemplos es crear la funcion (function) de la clase creada, donde se define la orden init3d() (supongo que se define para al final iniciar la aplicacion 3d creada) y en la siguiente linea:

this.addEventListener( Event.ENTER_FRAME, loop3D );

esta linea me crea dudas. Al escribir this, en la lista de posibilidades que se permiten, la funcion addevenlistener no me aparecia. Para que sirve esta funcion? El event he visto que es la definicion que se le da al evento de giro (loop3d), pero el ENTER_FRAME tampoco lo entiendo.

Estas lineas las he extraido de un ejemplo de una web que se llama HolaMundo (esfera rotando con imagen como textura).

Tampoco entiendo que quiere decir la orden addChild.

Hasta que me contestes, ire rellenando el resto de la aplicacion.

gracias!!

Ya he copiado todo el código (de la clase ejercicio1).

Le he dado a ejecutar y me ha salido una pantalla. Solo he puesto el nombre del proyecto, a aplicar cambios y a ejecutar. Me ha aparecido una pantalla abierta en explorer, con un fondo gris degradado pero no se ve nada.

Supongo que tengo que modificar ahora otro archivo que haga referencia a este archivo de clases verdad? Es quizà el archivo que tengo mxml?? O debo realizar mas pasos??

gracias!

pd. te escribo el codigo aqui abajo para que lo compruebes:

package jel.com.pv3d2
{
import flash.display.Sprite;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.materials.BitmapColorMaterial;
import flash.events.Event;

public class Espacio3D_class extends Sprite
{
var container: Sprite;
var escena: Scene3D;
var camara: Camera3D;
var plano: Plane;
var esfera: Sphere;

private function Espacio3D_class()
{
inicio3D();
this.addEventListener(evento.ENTER_FRAME, giro3D);
}

private function inicio3D():void
{
container = new Sprite();
addChild(container);
container.x = 800;
container.y = 600;

escena = new Scene3D(container);

camara = new Camera3D();

addPlano();

addEsfera();
}

private function addPlano():void
{
var plano:Plane = new Plane (new BitmapColorMaterial(0xFF00FF, 1), 500, 300, 8, 8);
escena.addChild(plano);
}

private function addEsfera():void
{
var esfera:Sphere = new Sphere (new BitmapColorMaterial(0x0000FF), 100, 8, 6);
esfera.x=100;
esfera.y=200;

escena.addChild(esfera);
}

private function giro3D(evento:Event):void
{
esfera.yaw(5);
escena.renderCamera(camara);
}
}
}

Hola:

He subido al blog un ejemplo básico de cómo crear una esfera en papervision, hecho en Flex. He ido comentando cada paso para aclarar el proceso y en el zip está todo el proyecto Flex. Descomprimelo en tu carpeta workspace de Eclipse y crea un proyecto Flex con EL MISMO NOMBRE que esta carpeta, y a funcionar.

He utilizado PV3D 1.7 (no la versión 2.0 GreatWhite) porque parece que es la de ese ejemplo que has posteado.

Creo que no tendrás excesivo problema en ir creando planos y demás objetos con el ejemplo que he subido.

También te aclaro una cosa: Puedes trabajar de dos formas:

1. Un proyecto Flex donde el "elemento visual básico", por así decirlo es el canvas (el lienzo) que es equivalente al movieClip de Flash.

2. Un proyecto ActionScript, que funciona como la IDE de Flash, donde el "elemento visual básico" es el sprite, o el movieClip si va a estar animado.

Esta diferencia es fundamental, porque no son exactamente lo mismo. Si optas por el primero, generalmente tus clases deberán extender (heredar, o dicho más llanamente SER) de la clase canvas; en el segundo caso las clases deben extender de sprite/movieClip.

No te asustes, esto quiere decir que si las clases "visuales", o sea, las que van a mostrar cosas en pantalla, en el caso de Flex serán del tipo:

public class miClase extends canvas {
...
}

y en el segundo caso:

public class EjemploA extends sprite {
...
}

Un saludo.
P.D.: Me acabo de pasar por el blog y veo que no has tenido muchos problemas para utilizarla ;-):

primero de todo feliz año nuevo!!

perdona por el alejamiento temporal pero ya se sabe, los compromisos familiares nos roban el poco tiempo que tenemos libre jejeje.

ahora ya poniendonos en el tema. He visitado el ejemplo de la tierra y la luna girando alrededor. He estado mirando el código del archivo ejemploA.as para ver las órdenes que has utilizado. Ahora bien, me he quedado un poco parado al ver la luna girando alrededor de la tierra, y en cambio el componente luna o el material de la luna no estan inscritos en el código.

luego al final del todo, veo que en la órden para la rotacion de la tierra aparece de esta manera:

tierra.rotationY -= 2;
escenario3D.renderCamera(camara);

el negativo antes del signo igual es asi o va despues?? no se si funciona de esta manera o es un error tipográfico jejeje

un saludo

Hola, feliz año nuevo :-):

Sí, acabo de mirarlo y, efectivamente, la mitad de las cosas del post de la Tierra/Luna no se han actualizado a la nueva versión que me comentabas. Ya me había pasado alguna vez: utilizo Filezilla para subir las cosas y me han explicado que tiene una especie de caché que "recuerda" las cosas cuando las borras.

Esta noche borraré todos los archivos y lo subiré de nuevo.

Un saludo.

P.D.: Si sabes algún truco rápido para que cuando FileZilla sobreescriba archivos "realmente" los sobreescriba, que no sea borrar la carpeta, te lo agradecería ;-)

muy buenas,

lo primero decirte que este tema de filezilla no lo controlo para nada. Lo siento!

lo segundo seria tratar del tema del globo terraqueo y la luna que tienes en tu blog. Me gustaria, si puede ser, que me ayudaras a poder construir una especie de "galaxia". Esferas que vayan girando alrededor de un sol, que se vea desde lejos y cuando pulsemos en uno de los planetas, se haga un efecto zoom al mismo.

Con tus conocimientos seguro que voy mas rápido jejeje Es que no acabo de entender como colocar los elementos en el espacio y el tema del zoom, como hiciste tambien en el menu cubos se me resiste.

tengo iniciado un sol, con un planeta y su luna. Supongo que el tema esta en el dummy, ir relacionando luna con planeta y luego con sol, y así ir creando elementos. Como puedo hacer para que le des un ojo?? Te cuelgo aqui el código para que lo mires.

package jel.com.pv3d
{
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.GlowFilter;
import flash.geom.Matrix;

import jel.com.main.CanvasFlash;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Sphere;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.materials.BitmapColorMaterial;

public class EjemploA extends CanvasFlash
{
private var escenario3D:MovieScene3D;
private var camara:Camera3D;
private var tierra:Sphere;
private var esfera:Sphere;
private var atmosfera:Sphere;
private var neptuno:Sphere;
//private var dummy:DisplayObject3D;

public function EjemploA(_width:Number, _height:Number) {
this.width = _width;
this.height = _height;

//Creamos un fondo de estrellas, 400 para ser más exactos.
creaFondoEstrellas(400);

//creamos un sprite y se lo asignamos al escenario3D
//hay que centrarlo en pantalla, dando la mitad del ancho y el alto de la misma.
//de no hacer esto, los objetos aparecerían en la esquina superior izquierda de la pantalla

var contenedor_spt:Sprite = new Sprite();
contenedor_spt.x = 0.5*_width;
contenedor_spt.y = 0.5*_height;
this.addChild(contenedor_spt);
escenario3D = new MovieScene3D(contenedor_spt);

//creamos la cámara y definimos su zoom y la distancia a la que está el objetivo
camara = new Camera3D(DisplayObject3D.ZERO);
camara.zoom = 3;
camara.focus = 80;

//movemos la cámara hacia atrás y arriba para mirar al mundo desde un ángulo ligeramente picado
camara.moveBackward(1000);
camara.moveUp(900);

//creacion de la variable para el giro de los dos planetas conjuntamente
//var dummy:DisplayObject3D = new DisplayObject3D();
//escenario3D.addChild(dummy);

//creamos un material con la textura de la superficie de la Tierra, que cargamos de la carpeta imagenes
var materialSol:BitmapFileMaterial = new BitmapFileMaterial("imagenes/sol.jpg");

//creamos una esfera para simular el globo terráqueo
tierra = new Sphere(materialSol, 350, 20, 16);
escenario3D.addChild(tierra);

//creamos una esfera de un radio mayor para simular la atmósfera
atmosfera = new Sphere(new ColorMaterial(0xeeeeff, 0.1), 360, 20, 16);
escenario3D.addChild(atmosfera);

//creamos una esfera mas pequeña en el espacio y su textura
var materialLuna:BitmapFileMaterial = new BitmapFileMaterial("imagenes/luna.jpg");

esfera = new Sphere(materialLuna, 80, 20, 16);
esfera.x = 1000;
esfera.y = -300;
escenario3D.addChild(esfera);

//creo un nuevo planeta mas lejano que el resto
var materialTierra:BitmapFileMaterial = new BitmapFileMaterial("imagenes/mundo.jpg");

neptuno = new Sphere(materialTierra,250,20,16);
neptuno.x = 1500;
neptuno.y = -500;
escenario3D.addChild(neptuno);

//metemos en el escenario el dummy
//dummy.addChild(esfera);
//dummy.addChild(neptuno);

//aplicamos un filtro glow a las esferas para simular el aspecto gaseoso de la atmósfera
tierra.container.filters = [new GlowFilter(0xeeeeff, 0.50, 50, 50, 2.0, 1.0, false)];
atmosfera.container.filters = [new GlowFilter(0xeeeeff, 0.50, 50, 50, 1.5, 1.0, false)];

//declaramos esta clase como oyente del evento ENTER_FRAME
//esto hace que el método onEnterFrame sea llamado 25 veces por segundo (el frameRate de reproducción de la aplicación)
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

}

//método que dibuja estrellas aleatoriamente en el fondo
private function creaFondoEstrellas(num:uint):void {
var fondoEstrellas:Sprite = new Sprite();
fondoEstrellas.graphics.clear();
fondoEstrellas.graphics.beginFill(0x000000, 1.0);
fondoEstrellas.graphics.drawRect(0,0, this.width, this.height);
fondoEstrellas.graphics.endFill();
var radio:Number;
for (var i:uint=0; i<num;i++) {
radio = 1.5*Math.random();
fondoEstrellas.graphics.beginFill(0xffffff, 0.7);
fondoEstrellas.graphics.drawCircle(this.width*Math.random(), this.height*Math.random(), radio);
fondoEstrellas.graphics.endFill();
};
this.addChild(fondoEstrellas);
}

//este método es llamado cada 1/25 de segundo (cada vez que se produce un evento ENTER_FRAME)
private function onEnterFrame(evt:Event):void {
//rotamos las esferas y renderizamos el escenario para que se actualice la vista
//dummy.rotationY = 5;
tierra.rotationY -= 2;
esfera.rotationY -= 3;
neptuno.rotationY -= 4;

escenario3D.renderCamera(camara);
}
}
}

muchas gracias!

buenas!

me acabo de bajar filezilla. No se muy bien como funciona pero si descubro lo que me preguntabas te lo cuento.

supongo que andarás muy ocupado porque no te veo escribir. Cuando tengas un ratillo seguimos con el aprendizaje.

Nos vemos!

he mirado lo del filezilla y no se si es lo que te voy a decir:

en el menu editar -> opciones hay un apartado llamado "accion si el fichero existe". Ahi se puede poner que se sobreescriban los archivos al subirlos o descargarlos.

Supongo que este paso ya lo habrás visto, pero por si acaso aqui dejo lo conseguido.

hasta luego!

Buenas de nuevo!!

Creo que es mejor escribirte por aqui ya que me sabe mal llenaros el blog de una multitud de preguntas jejeje

No se si te habrá llegado el mensaje nuevo del blog, pero lo recupero aqui.

- He abierto hoy el Eclipse y resulta que me ha aparecido un mensaje diciendo que el plugin flex builder se me ha caducado y que tengo que poner un serial. Pensaba que era freeware como el eclipse. Sabes como puedo solucionarlo? Si lo instalo de nuevo tendre otra vez mas dias?

- Referente a la adaptación del menu cubos a un proyecto flex, cuando tenga unos minutos y pueda usar de nuevo flex, pruebo las órdenes que me has indicado en vuestro blog.

- Ahora mismo en mi web no tengo nada introducido, solo un "en construcción" y visitar el blog. He pensado que hasta que no tenga listo todo el tema de los cubos y demás contenidos, poner un cubo rotando con el logotipo de la web en cada una de las caras.
Creo que esto tan sencillo lo podré conseguir (bueno, ya veremos jejeje). Pero he visto en un ejemplo en una web donde aparece una especie de reflejo en el suelo del elemento. Creo que también aparece en el ejemplo de vuestro blog del album de fotos con papervision. Como puedo hacer esto?

- El código mxml. Cuando creo el nuevo proyecto, he visto que puedo modificar el "lienzo" base del proyecto, pero me gustaria saber como puedo enlazar el archivo .as que he creado para que funcione como las aplicaciones que colgais en la web.

Buenoooo vaya listado. Ahora ya ves porque no quiero escribirte mucho en el blog jejjeje

espero tu respuesta! Gracias!

He trabajado en algo desde el mensaje anterior. Ahora estoy en este punto:

- El programa flex ya esta actualizado. Se ha solucionado el problema.

- Sigo pendiente de probar la adaptacion de flash a flex (creo que lo voy entendiendo poco a poco).

- El cubo rotando: He escrito este código. Lo pego aquí para que le des un vistazo. He rellenado el archivo mxml mirando un ejemplo de tu web.

main.mxml
<code>
&lt;xml&gt;
&lt;mx&gt;
&lt;mx&gt;
&lt;/mx&gt;
&lt;mx&gt;
&lt;CDATA&gt;
&lt;/mx&gt;
&lt;/mx&gt;
</code>

cuboinicial.as

package jel.com.pv3d2

import jel.com.main.CanvasFlash;
import flash.display.Sprite;
import mx.containers.Canvas;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.materials.BitmapColorMaterial;
import flash.events.Event;

public class cuboinicial extends CanvasFlash
{
private var escenario3D:MovieScene3D;
private var camara:Camera3D;
private var cubo:Cube;

public function cuboinicial(_width:Number, heihgt:Number)
{
this.width=_width;
this.height=_height;

var contenedor_spt:Sprite = new Sprite();
contenedor_spt.x = 0.5*_width;
contenedor_spt.y = 0.5*_height;
this.addChild(contenedor_spt);
escenario3D = new MovieScene3D(contenedor_spt);

camara = new Camera3D(DisplayObject3D.ZERO);
camara.zoom = 8;
camara.focus = 100;

camara.moveBackward(1650);
camara.moveUp(1000);

var materialCubo:BitmapColorMaterial = new BitmapColorMaterial(0xFF00FF,1);

cubo = new Cube (materialCubo,500,500,500,1,1,1,0,0);
escenario3D.addChild(cubo);

this.addEventListener(Event.ENTER_FRAME, onEnterFrame);

}
private function onEnterFrame (evt:Event):void
{
cubo.rotationX = 1;
cubo.rotationY = 1;
cubo.rotationZ = 1;
escenario3D.renderCamera(camara);
}
}

De momento dejo el cubo con un color base. Cuando me funcione la aplicación, incorporaré la textura de las caras mediante mi logo.

Bueno, ahi queda eso.

Gracias!<code></code><fieldset></fieldset>