Cuando tenemos un elemento clicable en Papervision3d, al hacer roll over y roll out sobre el elemento, no sale el handCursor (la "manita") por defecto. Para activarlo, tenemos que activar/desactivar la propiedad buttonMode del viewPort cuando hagamos over y out sobre el elemento. En resumen, al hacer over sobre un elemento, hacemos:

y al hacer out en un elemento:

Además de acceder a los vértices de un objeto en 3D, podemos acceder a los triángulos (caras) formados por estos vértices.

La matriz que contiene todos los triángulos de una figura se encuentra dentro de la propiedad geometry.faces del objeto.

Por ejemplo para recorrer todas las caras de un plano y poner a cada una un color aleatorio, podemos hacer:

Obteniendo algo parecido a esto:

Un par de detalles útiles a la hora de trabajar con las caras en Papervision son:

-cada cara tiene un id (propiedad id)numérico único. Este id nos puede valer por ejemplo para asociar en una matriz cada cara a un material.

-Si añadimos un evento de ratón a un objeto, el evento InteractiveScene3DEvent que se propaga tiene una propiedad face3d, que hace referencia a la cara que ha recibido el evento (por ejemplo un click)

Siguiendo con el tema de los Vertex en Papervision GreatWhite, dejo este ejemplo de como nos pueden valer para cambiar la visualización de manera sencilla.

Con un switch de este tipo:

podemos cambiar la reacción de los vértices a los movimientos del ratón.

Los elementos 3D (planos, esferas, modelos 3d, etc) están compuestos de triángulos.

Por ejemplo, si creamos un plano en Papervision3D con un WireframeMaterial con la siguiente sintaxis:

obtenemos un resultado parecido a este:

Los vértices de un objeto están almacenados en un Array (vertex) dentro de la propiedad geometry del objeto. Por ejemplo, en el caso de nuestro plano podemos recorrer los vértices con este bucle:

Los números que he colocado sobre la imagen anterior, indican el orden en el que aparecen los vértices en esta matriz. Podemos observar que un plano por n x m segmentos, tiene (n+1) x (m+1) vértices.

En nuestro caso, el plano de 4x3 segmentos, tiene 5x4 vértices, ordenados de abajo arriba y de izquierda a derecha.

Estos vértices tienen unas coordenadas, que dan a la malla la apariencia de plano, y se pueden modificar. Por ejemplo imaginemos que queremos hacer un carrusel circular compuesto por 8 planos.

Podemos crear los 8 planos, y distribuirlos en el círculo mirando al centro, con lo que obtendríamos algo asi (click en la imagen para ver):

El efecto es resulton, pero si nos fijamos, los planos aparecen rígidos y no se adaptan a la forma del círculo. Para solucionarlo, podemos posicionar los vértices de los planos en el círculo, en lugar de los propios planos, con lo que obtendríamos algo asi (click en la imagen para ver):

Aunque en principio puede parecer muy complejo "posicionar vértices", en realidad haciendo un par de ejemplos se entiende perfectamente, y en algunos proyectos puede mejorar mucho los resultados. Dejo los fuentes comentados, para poder probar las dos opciones y ver las diferencias.

Esta semana me he vuelto a topar con este bug de la clase MovieMaterial en Papervision 2.0 GreatWhite.

Si utilizamos un MovieClip como material, utilizando MovieMaterial, y este vá a cambiar en algún momento, pero no queremos utilizar el atribute animated para conservar recursos, podemos llamar a la funcion updateBitmap() para actualizar el material solo cuando sea necesario. El problema es que en esta versión de Papervision, la función updateBitmap() definida en MaterialObject3D, está vacía (literalmente).

Para solucionar este inconveniente, podemos llamar a la función drawBitmap de la clase MovieMaterial. Por ejemplo:

La editorial Packt acaba de publicar el primer libro de Papervision3D.

Está escrito por Jeff Winder y Paul Tondeur, y según palabras textuales de Carlos Ulloa, está "de puta madre".

Los contenidos son:

Preface Chapter 1: Setting Up
Chapter 2: Building Your First Application
Chapter 3: Primitives
Chapter 4: Materials
Chapter 5: Cameras
Chapter 6: Moving Things Around
Chapter 7: Shading
Chapter 8: External Models
Chapter 9: Z-Sorting
Chapter 10: Particles
Chapter 11: Filters and Effects
Chapter 12: 3D Vector Drawing and Text
Chapter 13: Optimizing Performance
Index

Se puede comprar aquí.

Como a veces es un poco difícil imaginar como van a afectar a su aspecto las transformaciones en las propiedades de los elementos en 3d, me he hecho esta mini-aplicación con Sliders para ver como se muestra un plano al rotarlo sobre sus tres ejes.

Espero que a alguien más le sea útil, dejo los fuentes (está hecho con Papervision GreatWhite) por si queréis modificar otras propiedades.

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:

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:

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

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

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.

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.

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:

Una de las novedades de Papervision GreatWhite son los ShadedMaterial.

Para utilizarlos basta con seguir los siguientes pasos:

He "mejorado" la galeria de imágenes en 3D, añadiendo un menú lateral con todos los albums de usuario (en este caso Lola) y permitiendo la carga de las imágenes originales haciendo click en cada cubo.

Esta es una demo de navegación en 3D, y utiliza Papervision GreatWhite y la API de Flickr.

La demo, que carga las fotos de Lola, se puede ver aquí.

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í

Una de las novedades de Actionscript 3.0 es la clase SoundMixer, que permite de manera fácil obtener un ByteArray que contenga una instantánea del sonido reproducido. Hay un montón de demos de SoundMixer, muchas de ellas con Papervision. Esta es una más.

La canción es "Atlas", del grupo Battles (para mí uno de los mejores de 2007).

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í