Papervision: Elementos y materiales interactivos

Papervision: Elementos y materiales interactivos

Etiquetas: InteractiveScene3D FreeCamera3D VERBOSE InteractiveColorMaterial InteractiveScene3DEvent renderCamera

Imagen en reemplazo de flash
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í

  1. //Importo las clases necesarias
  2. //Clases de Flash
  3. import flash.display.*;
  4. import flash.events.*;
  5.  
  6. //Clases de Papervision
  7. import org.papervision3d.cameras.*;
  8. import org.papervision3d.objects.*;
  9. import org.papervision3d.scenes.*;
  10. import org.papervision3d.materials.*;
  11. import org.papervision3d.utils.*;
  12. import org.papervision3d.events.*;
  13. import org.papervision3d.core.*;    
  14. import org.papervision3d.Papervision3D; 
  15.  
  16. //Declaro variables
  17. var contenedor :Sprite;
  18. var scene :InteractiveScene3D;
  19. var camera :FreeCamera3D;
  20. var AnchoEscenario = 700;
  21. var AltoEscenario = 400;
  22. var XCamara = 0;
  23. var YCamara = 0;
  24. var ZCamara = -2500;
  25.  
  26. function Empezar(){
  27. 	CrearEscenario();
  28. 	ConstruirMenu();
  29. 	PonerDobleClick();
  30. }
  31.  
  32. //Crea el contenedor para los elementos 3D
  33. function CrearEscenario(){
  34. 	//Quito los traces que hace PPV al crear cada elemento
  35. 	Papervision3D.VERBOSE = false;
  36. 	//Creo y centro el contenedor
  37. 	contenedor = new Sprite();
  38. 	contenedor.x = AnchoEscenario/2;
  39. 	contenedor.y = AltoEscenario/2;
  40. 	contenedor.name = "contenedor";
  41. 	addChild( contenedor );
  42. 	//Creo la escena
  43. 	scene = new InteractiveScene3D(contenedor);
  44.  
  45. 	//Creo la camara y añado un listener a la escena para que "refresque" la cámara. 
  46. 	camera = new FreeCamera3D();
  47. 	camera.z = ZCamara;
  48. 	camera.x = XCamara;
  49. 	camera.y = YCamara;
  50. 	camera.zoom = 10;
  51. 	addEventListener(Event.ENTER_FRAME,Renderizar);
  52. }
  53.  
  54. //Añade la el evento doble click al escenario, y cuando el usuario lo reproduci llama a la función
  55. //cerrar, que aleja la cámara de las fichas
  56. function PonerDobleClick():void{
  57. 	stage.doubleClickEnabled = true;
  58. 	stage.addEventListener(MouseEvent.DOUBLE_CLICK,Cerrar);
  59. }
  60.  
  61. //Crea 100 planos interactivos de colores y los sitúa aleatoriamente en el escenario
  62. function ConstruirMenu():void{
  63. 	for(var i = 0; i < 100; i++){
  64. 		//El material tiene que ser de tipo interactivo. También hay InteractiveMovieMaterial, etc
  65. 		var material:InteractiveColorMaterial = new InteractiveColorMaterial(Math.random() * 0xffffff);
  66. 		var plane:DisplayObject3D = new Plane( material, 50, 50, 1, 1);
  67. 		plane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, MoverCamara);
  68. 		plane.x = Math.random() * 400 - 200;;
  69. 		plane.y = Math.random() * 400 - 200;
  70. 		plane.z = -1500 + Math.random() * 400;
  71. 		scene.addChild( plane );
  72. 		i++;
  73. 	}
  74. }
  75.  
  76. //Cambia el destino de la cámara para mostrar el objeto clicado
  77. function MoverCamara(event:InteractiveScene3DEvent):void{
  78. 	ZCamara = event.target.z-200;
  79. 	YCamara = event.target.y;
  80. 	XCamara = event.target.x;
  81. }
  82.  
  83. //Al llamar a la funcrion cerrar la camara vuelve al sitio inicial
  84. function Cerrar(event:MouseEvent):void{
  85. 	XCamara = 0;
  86. 	YCamara = 0;
  87. 	ZCamara = -2500;
  88. }
  89.  
  90. //Refresca la escena 3D y mueve la cámara a su posición final
  91. function Renderizar(event:Event):void{
  92. 	camera.x += (XCamara - camera.x)/10;
  93. 	camera.y += (YCamara - camera.y)/10;
  94. 	camera.z +=(ZCamara - camera.z)/10;
  95. 	scene.renderCamera(camera);
  96. }
  97.  
  98. //Empezamos
  99. Empezar();
  100. stop();

Descargar archivos

Comentarios
    • Autor
    • edwin
    que porqueria es esto?
    • Autor
    • veronica
    ¿Porquería dices? SDR pone esto a tu disposicion y lo llamas porquería.... si no te es útil, cierra la ventana de tu explorador y ya está, pero a mi por ejemplo me gusta ver toda clase de ejemplos y mas de papervision, cosa que no se encuentra así como así en la red.... Así que SDR, gracias por tu maravillosa porquería ;)
    • Autor
    • esedeerre

    @Edwin: Es un ejemplo de Papervision.

    @Verónica: Gracias a ti Verónica.

    • Autor
    • Javier
    Hola, me gustaría incorporar a un proyecto web Papervision ya que me gustó mucho el diseño interactivo que tiene. Estoy perdido, y me gustaría saber cómo lo puedo hacer, ya que no tengo mucho conocimiento de Flash, si alguien me puede ayudar.. Gracias.
Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: