Papervision GreatWhite: crear un plano con dos caras

Etiquetas: Plane DisplayObject3D Viewport3D BasicRenderEngine

Existen dos maneras de crear una plano con dos caras en Papervision3D:

-Crear un cubo con una profundidad de 1pixel, y utilizar las caras delantera y trasera como caras del plano.

-Crear un contenedor DisplayObject3D, y meter dentro dos planos. El plano "b" debe tener una profundidad de 1 y una rotatión de -180º.

El segundo método es el que me parece más cómodo, ya que gestionar los materiales con un cubo es más engorroso que con un plano. Un ejemplo de plano con dos caras podrías ser:

 
contenedor = new DisplayObject3D();
var planoA = new Plane(new MovieAssetMaterial("CaraA"), 400, 400, 4, 4);
var planoB = new Plane(new MovieAssetMaterial("CaraB"), 400, 400, 4, 4);
planoB.z = 1;
planoB.rotationY = -180;
contenedor.addChild(planoA);
contenedor.addChild(planoB);
escena.addChild(contenedor);
 

AS3Dmod: utilización básica con Papervision

Etiquetas: Bend ModifierStack Phase LibraryPv3d viewport3D BasicRenderEngine Plane

AS3Dmod es una libreria de modificadores para objetos 3D. Actualmente AS3Dmod dispone de 7 modificadores (doblar, deformar...) que funcionan con Papervision3D, Away3D, Sandy3D y Alternativa3D. Aunque hay muy poca documentación (sobre todo en castellano), es bastante fácil de utilizar. Los pasos para poder utilizarla son los siguientes:

-Descargar AS3Dmod:

-Saber utilizar alguno de los 4 motores 3D compatibles. Puedes ver tutoriales de Papervision3D y Away3D en esta misma página.

-Una vez tenemos nuestra escena 3D en alguno de los motores, creamos una instancia de ModifierStack. El "modifier stack" es un link entre el objeto que queremos modificar y los modificadores:

mstack = new ModifierStack(new LibraryPv3d(), plano);

Podemos ver como se pasan como parámetro un objeto indicando la librería que vamos a utilizar (en este caso Papervision), y el objeto que vamos a modificar (un plano).

-Ahora necesitamos crear un modificador, y añadirlo a mstack. Para el ejemplo he utilizado "Bend", que recibe como parámetros la fuerza y el lugar donde se aplica:

 
bend = new Bend(0, 1);

mstack.addModifier(bend); 

-Por último, cada vez que se haga un cambio en el modificardor, debemos aplicarlo (algo asi como ordenar que se renderice):

mstack.apply();

Para este ejemplo he utilizado una clase de AS3Dmod que se llama Phase. Esta clase sirve para crear una animación tipo seno. Es decir, nosotros incrementamos su valor, y ella controla de que siempre esté entre -1 y 1. Es decir, si incrementamos su valor en 0.5 en cada fotograma, cuando llegue a 1 volverá sobre sus pasos hasta valer -1, y viceversa.

Este es el código completo comentado:

Hola mundo en Away3d 2.2

Etiquetas: View3D Sphere render WireColorMaterial

Esta mañana me he bajado la librería Away3D, un motor de 3D para Actionscript 3.0. Por lo que he visto, la sintaxis es muy parecida a Papervision, y parece incluso más sencillo de utilizar.

Además, por las pruebas que he hecho con el suavizado, parece que el rendimiento es bastante superior (en PPV suavizar un material "mediano", provoca unos bajones de rendimiento enormes).

Para crear una escena de Away3D, tenemos que seguir los siguientes pasos:

-Crear una instancia de View3D y añadirla al escenario:

 
visor = new View3D({x:200,y:200})
addChild(visor);
 

-Crear los objetos que necesitemos, y añadirlos a la escena de la instancia View3D que hemos creado:

 
esfera = new Sphere({material:new WireColorMaterial(0x00cc00)})
visor.scene.addChild(esfera);
 

Materiales interactivos en Papervision GreatWhite, parte II

Etiquetas: Viewport3D BasicRenderEngine interactive animated MovieAssetMaterial

En Papervision greatWhite podemos añadir eventos a los elementos 3D .

Otra opción es crear los elementos 3D a partir de MovieClips interactivos que tienen asociados eventos. Por ejemplo, tenemos un MovieClip con tres botones dentro, y creamos una esfera con ese MovieClip como material. Para que se respeten los eventos de ese clip al convertirlo en material3D, debemos configurar los siguientes parámetros:

-al crear la instancia de Viewport3D debemos especificar que es interactivo:

 
//los parametros son: (ancho,alto,autoEscalar,interactivo) 
viewport = new Viewport3D(400,400,false,true);
 

-al crear el material debemos especificar que es interactivo y animado:

//los parametros son: (ID de linkage,transparente,animado)
var material:MovieAssetMaterial = new MovieAssetMaterial("MenuPPV",true,true);
material.interactive = true;

Tras el salto, el código completo y la demo.

Crear modelos 3D Collada para Papervision en Google Sketchup

Etiquetas: DAE load Viewport3D BasicRenderEngine Camera3D

Google Sketchup es uno de los programas mas sencillos de modelado 3D. Además la versión gratuita es bastante completa, y más que suficiente para hacer modelos sencillos.

Una vez hemos descargado Google Sketchup y hecho el primer modelo, tenemos que seguir los siguientes pasos:

-Exportar el modelo como Google Earth 4. Esto creará un archivo .kmz

-Renombrar el archivo .kmz a .zip.

-Descomprimir el archivo y buscar dentro el .dae y las texturas (si las hay).

Tras el salto, el 3D en movimiento y el código para cargar el modelo.

Utilizar materiales interactivos en Papervision GreatWhite

Etiquetas: InteractiveScene3DEvent BasicRenderEngine Viewport3D displayObject3D

Para utilizar eventos de ratón sobre objetos en Papervision GreatWhite, tenemos que hacer tres cosas:

-Crear un objeto Viewport3D con el atributo interactive = true

-Crear un objeto y poner el atributo interactive de su material = true

-Añadir los eventos al objeto

El código comentado, tras el salto.

Prueba de Line3d en Papervision GreatWhite

Etiquetas: Lines3D addNewLine Line3D BasicRenderEngine Viewport3D

Hace tiempo que le tenia echado el ojo, asi que hace un rato me he puesto y me ha sorprendido lo fácil que es utilizar esta clase. Veo mucho potencial, a ver si me instalo la CS4 y hago un ejemplo de CS4 + la nueva función extract de FP10. Aquí dejo el fuente por si le ayuda a alguien:

Papervision: Almacenar variables en elementos 3D

Etiquetas: InteractiveScene3DEvent InteractiveColorMaterial extra interactiveSceneManager renderCamera

Los elementos que heredan de displayObject3D, tiene una propiedad llamada extra en la que podemos almacenar variables por medio de un objeto. Por ejemplo si tenemos varios planos en 3D y queremos saber sobre cuál estamos haciendo click, creamos un objeto para cada uno, lo almacenamos en su propiedad "extra", y después en la función que recoge el evento click, accedemos a la variable que hemos guardado. Aquí vá un ejemplo de como hacerlo:

3 maneras de representar la información en Papervision

Etiquetas: Camera3D renderCamera ColorMaterial Tweener lookAt

Más allá de las modas, el futuro de la web debería estar en sitios como este, que aprovechan los motores 3D para mostrar información de manera clara en pantalla.

Aquí va una pequeña demo en PPV, que muestra 3 formas de representar información en 3D:

Ver demo Papervision

Materiales animados en Papervision 1.7

Etiquetas: Scene3D FreeCamera3D MovieAssetMaterial animated oneSide renderCamera

Para hacer materiales animados en Papervison 1.7, usamos el atributo animated de los materiales. Este código muestra como hacer un plano animado a partir de una animación de la biblioteca, vinculada con el nombre "Animacion".

Papervision 2.0a Greatwhite: Sombras

Etiquetas: Viewport3D BasicRenderEngine PointLight3D ViewPort3D GouraudMaterial

Una de las novedades de la versión alpha de Papervision son las sombras. Para poder crear efectos de luz, debemos crear un objeto de tipo PointLight3D, y utilizar materiales especiales en los objetos (en este caso u material de tipo GouraudMaterial). El resto es igual que en una plantilla normal de PPV3D.

Puedes verlo a pantalla completa aquí

Papervision 2.0: GreatWhite.Plantilla básica

Etiquetas: Viewport3D BasicRenderEngine Scene3D Camera3D MovieMaterial MaterialList DisplayObject Viewport3D Vertex3D

Hace tiempo que está disponible la versión 2.0a de Papervision, bajo el nombre de Greatwhite. Hay algunos cambios respecto a la versión anterior, y ya han empezado a surgir tutoriales donde se explica como utilizar las nuevas clases y como se recomienda dividir los bloques de código. Esta es una plantilla básica de Papervision 2.0. En este caso creo un cubo y creo sobre él un efecto de "fluidez". Para que funcione hay que tener descargadas las clases de Papervision 2.0a, y haber indicado a Flash donde están guardadas.

Puedes verlo a pantalla completa aquí

Papervision: Elementos y materiales interactivos

Etiquetas: InteractiveScene3D FreeCamera3D VERBOSE InteractiveColorMaterial InteractiveScene3DEvent renderCamera

Papervision permite hacer elementos en 3D con materiales interactivos de forma realmente sencilla, pero es algo díficil encontrar documentación en la web. Este ejemplo muestra como hacer paneles de colores interactivos. Al hacer click en uno de estos paneles, la cámara se acerca hasta él, y al hacer doble click fuera de los paneles, la cámara vuelve a su punto inicial. En el ejemplo se utiliza InteractiveMovieMaterial, pero hay un material interactivo para cada tipo de material.

Puedes verlo a pantalla completa aquí

Tipos de materiales en Papervision 1.5

Etiquetas: MovieScene3D Cube MaterialsList WireframeMaterial MovieMaterial MovieAssetMaterial BitmapAssetMaterial ColorMaterial BitmapFileMaterial renderCamera

Este ejemplo muestra como crear un cubo con 6 tipos diferentes de materiales en Papervision (AS3). He utilizado los más básicos, en la wiki de Papervision se puede encontrar un listado completo con los materiales disponibles.