Cómo empezar con Papervision
hola a tod@s,
soy nuevo aqui asi que perdonad si pregunto cosas que son fáciles de entender y no se aun jejeje
os cuento,
hace poco empecé en el mundo de crear páginas web. Realicé una muy sencilla para el despacho donde trabajo, a nivel muy sencillo. Luego ya he optado por crear una web para mi propio. soy arquitecto y me gustaria hacer una web impactante y interactiva donde mostrar mis trabajos.
Empecé mi web realizándola ya en flash, para poder conseguir esos efectos. Lo malo es que una vez ya tengo la estructura, me parece un poco pobre.
Asi que buscando por aqui y por alli descubrí papervision3d. Es increible lo que se puede hacer con este programa. he mirado vuestros mensajes con las realizaciones que creais y son muy muy buenas.
El problema que tengo es que no se por donde empezar. Tengo la idea clara de los efectos y la estructura que quiero crear pero me faltan los medios para realizarla.
Tengo un poco de lio en la cabeza porque veo programa por todos lados. Tengo el 3dstudio max 6.0, el photoshop 8.0, y me he descargado el swift3d, swift3d.max, flash cs...
Por eso me gustaria preguntar que programas o conocimientos necesito tener para empezar a aprender a utilizar este programa.
Muchas gracias a tod@s!!!
juandelgado
Pues te lo cuento sin haber usado PPV especificamente, pero yo diria que:
- Soft de edicion 3d: Maya, 3dStudio, Blender. Con estos generas normalmente las escenas y las exportas en formato Collada
- ActionScript 3 > Con el SDK de Flex 2 (gratuito) puedes hacer todo el código. Importando las librerias de PPV, claro.
Si tienes el IDE de Flash, hay unos componentes que supongo facilitaran las cosas.
Salud y suerte!
FR_xx
para hacer 3d ya tengo el 3dstudio, por ahi bien. El formato collada es donde dudo. Creo que con el 3d studio 6 que tengo no funciona collada. habria que confirmarlo.
El flex nunca lo habia escuchado, tendre que empezar a informare.
En que te refieres al IDE de flash?? Soy muy muy novato jejejej
gracias!
FR_xx
Puede que si os digo lo que quiero hacer facilite toda la explicacion que se pueda derivar del tema jejeje
a ver, me gustaria que el menu de la web fuera esto:
se basa en unos cubos, puestos unos encima de otros (ya tengo hecho en 3d studio los mismos, colocadoas de manera semejante).
Quiero que actuen como elementos independientes (botones en flash) para que al ser pulsados vaya a cada apartado de la web.
de momento, creo que con esto ya tendre para unos dias. a ver que me aconsejais.
gracias!
ozke
Lo nada que se de papervision lo se por http://wiki.papervision3d.org/index.php?title=Examples q va de perlas.
Por si sirve y tal. Ah y este foro! (ahora mismo preguntare una cosa sobre PV3D xDD)
tpmmds
Papervision3D
tpmmds
No sé lo que pasa pero en el método onEnterFrame se alteran varias líneas al publicarlo. En la vista preliminar se ve correctamente, pero al enviarlo me "fusiona" líneas. Voy a copiar sólo esa parte de nuevo a ver si hay más suerte :-(:
<code>
if (posX<0>width) {
posX=width;
}
}
if (posY<0>height) {
posY=height;
}
}
</code>
tpmmds
Nada, sigue haciéndolo igual :-(. Creo que no entiende el signo "menor" de mi teclado.
tpmmds
Hola:
En el siguiente enlace te puedes descargar un ejemplo similar al anterior
Menú cubos
Es ActionScript 3.
Un saludo.
FR_xx
hola tpmmds,
primero de todo agradecerte mucho tu ayuda. Veo que has estado trabajando en el tema (y mucho!!).
Ahora bien. Mi nivel de programacion, sinceramente, es nulo. Me he descargado el archivo que me enlazas. Al ejecutar el fla me sale una lista de errores, supongo que es porque la ruta, tal como me dices, hace referencia a tu ordenador.
En un primer mensaje me escribias un código pero no se donde debo escribirlo.
Supongo que tengo muuuucho que aprender. Me habia iniciado en crear paginas web en html y bueno, eso ya lo tenia superado pero veo que este tipo de código requiere mucho mas tiempo.
Espero que seas paciente conmigo jejeje estoy muy verde aun.
Tambien me indicas que debo descargarme nuevas versiones. Si no es mucha molestia, me podrias decir que archivos deberia descargarme y como tengo que preparar los directorios para ir incorporando estos archivos.
muchas gracias de nuevo por tu ayuda.
tpmmds
Hola:
Es que, no sé si sabes, acaba de salir PV3D 2, y cogí tu ejemplo para "desfogarme" ;-)
Y volviendo al tema, tienes que pasarte por la página de Papervision y bajarte el paquete con todas las clases del repositorio:
http://wiki.papervision3d.org/index.php?title=Download_from_SVN
Si tienes problemas, esta noche te subo en un rar todas las clases y pongo aquí el enlace.
Una vez que tengas las clases en tu disco duro abres Flash y en la lengueta Propiedades verás que hay otro botón de Configuración de publicación, lo pulsas y eliges la lengueta Flash. Verás otro botón junto a la lista de Versión de actionscript, que también se llama Configuración, lo pulsas y llegas, por fin, a Configuración de ActionScript 3. Verás que en la lista de abajo (Ruta de clases) de la ventana aparecerá una ruta que apuntará al directorio que YO dí en su momento. Seleccionalo y pulsa sobre el icono con forma de mira telescópica y elige la carpeta donde has descomprimido las clases, y más concretemente, elige la carpeta:
GreatWhite
Le das a aceptar, y ya está :-).
Un saludo.
P.D.: Por cierto, al código que escribí más arriba, ni caso; hice copy&paste del archivo donde tenía la clase y no sé porqué este editor no lee bien algunos caracteres, y ha "fusionado" unas cuantas líneas.
tpmmds
Hola de nuevo:
Por cierto, si nunca te has bajado archivos de un repositorio, verás que al final del enlace de mi anterior post hay un enlace, valga la redundancia, a TortoiseVSN, donde puedes conseguir un programita muy fácil de utilizar para hacer esto:
http://tortoisesvn.tigris.org/
Creo recordar que trae un pequeño tutorial de cómo bajarte un repositorio a tu disco duro y tenerlo actualizado; pero básicamente consiste en crearte una carpeta , elegirla con el botonDerecho y decirle dónde (en internet) están los archivos que te quieres descargar.
Un saludo.
FR_xx
vale esto si lo habia hecho. Me baje el programa y se instalaron los archivos relacionados con papervision. Ya no me acordaba jejeje.
La pregunta es, por ejemplo, donde tengo que colocar los archivos que me has dejado para poder descargar. En la carpeta dentro de donde estan los archivos de papervision o hay que configurar algo del flash CS??
Es porque cuando ejecuto el archivo fla con el flash CS me sale un listado de error y parece que sea a que haga referencia a órdenes desconocidas.
gracias!
juandelgado
Tendras que anyadir al classpath del IDE la ruta a las clases de PV. Vete a Edit > Preferences > ActionScript > AS3 y ahí lo pones.
Salud!
FR_xx
vale, parece que ha ido bien.
ahora solo me aparecen 2 errores, en las órdenes tales como:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: FileLoadEvent.
1046: No se encontró el tipo o no es una constante en tiempo de compilación: InteractiveScene3DEvent.
sabes a que se pueden deber?
FR_xx
otro tema, los archivos de collada donde los tengo que instalar? hay que enlazar tambien estos con el flash o con 3dstudio??
ozke
Creo q los puedes cargar por codigo al igual que cargas una imagen externa.
No deberia ser muy dificil encontrar eso en Google.
tpmmds
Hola:
Eso es que no le has dado la ruta exacta del branch GreatWhite. Por si te has bajado alguna otra versioón de las clases aquí te pongo exactamente las que he utilizado:
http://blog.coconnut.com/source/jel/GreatWhite.rar
Descomprime el archivo en tu disco duro, y en Flash configura la ruta de clases (de la forma que vimos antes; si tienes algún problema la ayuda de Flash también explica dónde está este botón de configuración) "exactamente" para la carpeta GreatWhite que se te habrá creado al descomprimir el rar.
El mensaje que te da es porque no localiza las clases del paquete de Papervision
Un saludo.
tpmmds
Hola de nuevo:
Lo de cargar los archivos de Collada es tan fácil ahora que seguro que no te has dado ni cuenta cuándo lo hace el código ;-)
Un simple
geometria = new Collada("miArchivoCollada.DAE");
escena3D.addChild(geometria);
y ya tienes tu archivo max, exportado en formato dae, en el escenario.
Esta nueva versión de Papervision se ha simplificado de tal forma que impresiona. Ahora, el que no quiera utilizarla, que lo diga claro: es porque no quiere ;-)
Un saludo.
P.D.: En el anterior enlace a la wikipedia, donde estaba el enlace al repositorio también hay otro a los plugins de Collada, por si tienes dificultad en localizarlos. De todas formas, no sé si sabes que Papervision admite tambien escenarios, y animaciones, de... emoción... Quake 2!!! Lo digo por si tienes algún escenario por ahí que quieras ver dentro de Flash. Lo que no entiendo es por qué Adobe no se pone las pilas e incorpora de forma nativa esta tecnología (implementada directamente en Flash Player con un motor de render específico, y no a través de actionscript). El paso hacia delante que podría dar Flash (el IDE) sería incluso mayor que cuando incorporó la tecnología Flv para el streaming de vídeo. Pero bueno, ahí estamos.
FR_xx
bueno, ya te dije que soy muy principiante jejeje.
voy a descargarme el archivo y probar lo que me comentas. Cuando haya podido visualizar el efecto del flash que has creado vuelvo por aqui, a seguir con los siguientes pasos.
muchas gracias de nuevo por tu ayuda!
FR_xx
bueno, lo he descargado, descomprimido y enlazado desde el flash.
Perfecto!!!!
Me salen las cajas, con su textura y puedo clicar sobre ellas (aunque de momento no hace nada, dejando que se escriba el enlace a los apartados de la web).
El problema es que cuando agregaba las rutas en configuracion, habia que hacer desde el MenuCubo general, y habia entrado en una de las carpetas (jel.com).
Voy a estudiarme el código a ver si aprendo cada órden a que se refiere. Puede que la orden que me deja poder mover la cámara la desactive y se vea fijo en pantalla.
He visto en alguna web que por aqui en el foro se comenta (no me digas cual era porque no la recuerdo) en la que se veia un menu principal, y detras, como en la lejania, los apartados en gris. Cuando clicabas en una opcion del menu, se acercaba la parte correspondiente del fondo hasta el frente. Luego con un boton de volver se vuelve a alejar y a aparecer el menu. No se si me he explicado bien. Buscare cual de las webs era.
Otra cosa que queria preguntarte era sobre las texturas de los cubos. He visto que hay 6 imágenes que corresponden a cada uno. Se basan en la imágen desplegada de cada cubo, con todos sus lados en formato plano. Como lo has creado, desde el 3d studio? o has hecho tu el bitmap y lo has enlazado?
muchas gracias!
FR_xx
bueno, he encontrado esto.
http://www.meet-your-city.com/
no era exactamente lo que buscaba, pero creo que se entiende mejor.
por ejemplo, en primer término aparece el menu de los cubos. Cuano se pulsa sobre uno de ellos, se hace un zoom a una de las imágenes de atras (el apartado seleccionado). A ver que te parece!
FR_xx
una cosilla del tema inicial.
Estoy probando de hacer un cubo sobre un plano. He seguido un tutorial en el cual puedo solucionar el tema que habia preguntado antes sobre el archivo de imagen con los lados del cubo desplegado. Eso ya lo he conseguido.
Ahora el tema está en saber que pasos he de seguir para crear el archivo necesario para grabarlo a flash (.swf creo que es), asi lo puedo aplicar a futuras pruebas con este sistema.
El archivo .html tambien se crea desde 3d studio?
Mas dudas jejeeje!!!
Editar: Creo que el archivo que necesito es dae... no se, tengo un lio en este tema. A ver si me lo puedes aclarar.
Muchas gracias!!
pd: he encontrado una web en la que tambien se ve algo parecido al efecto que quiero realizar.
http://www.starwars.com/
Aparece un planeta en primer plano (que podria ser mi menu de cubos) y en el fondo 3 planetas mas. cuando se pulsa sobre un planeta, se hace un zoom y se acerca a el. A mi me gustaria que esto pasara cuando se pulse sobre uno de los cubos del menu.
tpmmds
Lo mejor, vamos a hacer un resumen del proceso a seguir, para fijar conceptos, que diría un antiguo profesor mío ;-):
1. En 3D Studio, Maya o cualquier otro programa de modelado/animación que exporte en formato Collada (extensión *.dae) modelas la geometría que quieres mostrar más tarde en Flash.
2. Iluminas la escena hasta conseguir el aspecto deseado y haces un "tostado de texturas" ("Render to texture" en 3DStudio Max). Esto lo que hace es aplicar un material a cada objeto de la escena con unas texturas "tostadas", o sea, que llevan la sombra incorporada. Esta técnica proviene del mundo del videojuego: los juegos de PS2 no suelen calcular las sombras de los escenarios; es la textura la que lleva ya "dibujada" dicha sombra.
3. Despues de renderizar a textura tienes que ver en el visor de Max con las luces desactivadas, la escena como si siguieran estando activas. Si no consigues esto, algo va mal.
4. Exportas a formato collada (*.dae) la escena. Puedes utilizar el plugin gratuito que aparece en un enlace que ya te posteé.
5. Te creas un proyecto en Flash y a través de actionscript y el paquete de clases Papervision3D, obtienes un archivo swf embebido en una página html, que es lo que puedes colgar en Internet ;-). Esta parte es la que hacen las clases que te posteé en rar.
6. Y finalmente, no sé si conoces la clase ExternalInterface (actionscript), que te permite ejecutar funciones javascritp que estén en el código html de la página web. A través de ella le deberías pasar a una función javascript el elemento que ha pulsado el usuario, para que esta función hiciera lo que deseas: Mostrar una página web en una capa, mandar un e-mail, lo que se te ocurra.
Por cierto, me has puesto unos enlaces que parece que tienen un enfoque distinto. Ejemplos de menús 3D basados en imágenes, con su codigo, puedes encontrar en nuestro blog. Entra al ejemplo carrusel3D y hay de un tipo (de los que hacen zoom al objeto seleccionado). En el ejemplo del puzzle y del juego simón, el menú de selección también está hecho en Papervision (es el típico menú rotativo). Y todo esto no utiliza geometria modelada en Max y exportada en formato Collada, si esto supone un problema.
Un saludo, y ánimo, que Papervision3D lo han hecho muy asequible. Deberíamos de hacerles una estatua :-)
FR_xx
bueno, tengo que reconocer que me lo acabas de explicar fenomenalmente jejjee me he enterado de todo (y eso que cuesta porque me suena todo muy nuevo!!).
He comprendido los pasos que me indicas. Me los guardare muy bien para tenerlos siempre en mente!
ahora bien, unas dudillas menores:
- en un ejemplo he visto como funciona eso de tostar las superficies. Ahora bien, como le has puesto tu la textura que tienen (color amarillo y letras en cada cara)?
- el último paso 5 hay que hacerlo una vez se tengan los archivos ya listos verdad? No se nada de códigos actionscript, asi que voy deduciendo lo que quiere hacer cada orden.
- no conozco la clase que me indicas ExternalInterface, pero he visto que en vuestro blog hay un ejemplo sobre este tipo. voy a mirarmelo.
-he mirado el efecto de carrusel de fotos que me dices y realmente no es lo que yo habia visto. En el ejemplo que te comentaba las opciones estaban dispersas en la pantalla, y al clicar sobre ellas, habia un zoom de la cámara y se posicionaba sobre la opcion. Luego con un boton"volver" se volvia al menu inicial.
Seguro que vuelvo a preguntarte!!
Muchas gracias!
FR_xx
vale ya he encontrado el ejemplo que te decia.
http://www.grimshaw-architects.com/grimshaw/launcher.html?in_projectid=
entrando en esta web aparece un elemento principal y tras el unos elementos secundarios que, al clicar, la cámara se va hacia ellos y se abre el menu secundario.
Yo quiero hacer esto mismo de la manera siguiente:
Aparece el menu principal de cubos. Yo creo que deberia ser un elemento fijo, no como ahora que puedo hacer girarlo. Cada cubo sera, por ejemplo, un apartado como "Home" "Proyectos" "Curriculum"... y clicando en el, la cámara se va hacia el elemento de atrás correspondiente, donde ira el contenido de la web.
Supongo que lo que pido es un poco complicado pero estoy dispuesto a aprender, aunque sea muy poco a poco jejeje
a ver que te parece.
de nuevo muchas gracias!
FR_xx
buenas,
asi probando para empezar a entender este funcionamiento he hecho unos planetas en un espacio realizado con 3dstudio.
He intentado seguir todos los pasos, cambiando lo que creo que hace falta para adaptar el sistema de los cubos a este nuevo, pero me da un listado de error.
He comprimido los archivos pero no se como colgarlos aqui para que los puedas revisar. De momento te escribo el listado de errores para ver si puedes intuir lo que es:
DisplayObject3D: null
DisplayObject3D: null
Papervision3D Public Alpha 2.0 - Great White (3.12.07)
PV3D 2.0a WARNING : DO NOT USE WITH BETA 9 PLAYERS. ONLY WITH OFFICIAL TO TEST.
CHECK YOUR VERSION!
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: Camera01_Target
DisplayObject3D: Direct01_Target
DisplayObject3D: Direct01
DisplayObject3D: Sky01
DisplayObject3D: Esfera7
Collada material _1_-_Default not found.
DisplayObject3D: Esfera6
DisplayObject3D: Geoesfera07
Collada material ColorMaterial not found.
DisplayObject3D: Camera01
DisplayObject3D: Esfera1
DisplayObject3D: Esfera2
DisplayObject3D: Esfera3
DisplayObject3D: Esfera4
DisplayObject3D: Esfera5
TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.
at jel.com.pv3d2::MenuPlanetas/::onLoadComplete()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at org.papervision3d.objects.parsers::Collada/::buildCollada()
at org.papervision3d.objects.parsers::Collada/::onComplete()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader::onComplete()
muchas gracias!
tpmmds
Hola:
Creo que el problema es que no has asignado texturas a los materiales. Cuando papervision procesa un archivo collada siempre busca una textura en el material. Asignale a los materiales una textura en difuse, en Max, y exportalo de nuevo.
Tambien es MUY IMPORTANTE que al exportar actives la casilla de rutas relativas para que no guarde las rutas absulutas. Me explico, si lo tienes desactivado, el archivo dae (collada) va a escribir las rutas a las texturas en la forma:
C:\modelos3d\misTexturas\textura.jpg
y cuando lo cuelgues en una página web no la va a encontrar. Si activas esta casilla de rutas relativas, el archivo dae guardará algo como:
./misTexturas/textura.jpg
y este archivo sí lo puedes colgar en cualquier sitio
Un saludo.
P.D.: Los archivos dae son realmente xml, puedes editarlos en cualquier momento y modificarlos. Si hay un material que se te ha olvidado darle textura, puedes abrir el dae con dreamweaver, por ejemplo, e indicarle la textura. O si se te ha olvidado activar la casilla de rutas relativas, editarlo y ponerlas como te he comentado más arriba.
tpmmds
Hola:
El ejemplo que me has pasado es muy similar al que te comenté que hay en mi blog, llamado carrusel3d.
Sólo sería remodelar el código para que la cámara en vez de mirar desde arriba, lo haga más frontal, y que las imágenes se distribuyan en un plano vertical en vez del horizontal.
Tienes todos los permisos del mundo para reutilizar ese código ;-)
Me ha pasado ya más de una vez, la gente no asocia en ese ejemplo el icono de la casa a Home (volver a plano general), tendré que cambiarlo por otro más evidente, o poner sencillamente la palabra Home.
Un saludo
FR_xx
hola de nuevo,
he vuelto a modificar el archivo 3d studio poniendole un material como me indicas, activando la casilla pero me vuelve a aparecer el mismo listado de error que anteriormente. No se si es algo que no modifico en el código y si deberia hacerlo. Si quieres te paso por mail los archivos que he creado para mirarlos.
En lo que hace referencia al otro tema (carrusel3d) voy a ponerme a ver si entiendo el funcionamiento. Lo de modificar el punto de vista de la cámara si se hacerlo porque he ido trasteando la prueba de los cubos que hiciste jejeje. El otro tema ya de momento no se como hacerlo, voy a trastear tambien, con tu permiso.
editar: he estado mirando el ejemplo carrusel pero veo que está preparado para flex y yo solo tengo el flash cs. Me tengo que bajar este programa? A parte, creo que es un poco complicado para mi jejeje no acabo de seguirlo porque se me escapan muchas órdenes.
gracias de nuevo!
FR_xx
he podido abrir el archivo con el dreamweaver (como me decias en el ejemplo que estaba realizando). Ahora sigo mirando a ver!