Buenas a todos nuevamente, en este segundo post os quiero hacer llegar la actualidad del 3D en contenidos Web. Se trata de las clases Papervision y la posibilidad de dar un giro al estilo que ahora adoptan o dentro de muy poco adoptarán los entornos web. Hay que destacar, que aún no es posible sacar todo el jugo de posibilidades en cuanto a posicionar nuestra web se refiere, sin embargo si podemos utilizar este entorno como un añadido vistoso a nuestros contenidos, por ejemplos nuestro portfolio, galerías coverflow, etc.

En esta primera toma de contacto con las clases Papervision en Action Script 3, os ilustraré un ejemplo sobre una escena 3D básica. Dicho todo esto, aquí tenéis el código que posteriormente comentaremos paso a paso:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.BasicView;
 
	[SWF(frameRate="31", width="500", height="350", backgroundColor="0xffffff")]
 
	public class BasicViewSample extends Sprite
	{
        private var bView:BasicView;
 
		public function BasicViewSample()
		{
			Init3D();
		}
 
		private function Init3D():void
		{
			// Creamos el BasicView que contiene viewport, camera, renderer, etc
			bView = new BasicView(500, 350, false, false);
 
			// añadimos la vista al displayList
			addChild(bView);
 
			// Configuramos la cámara:
			bView.camera.focus = 25;
            bView.camera.zoom = 10;
            bView.camera.z = -500;
            bView.camera.y = 300;
            bView.camera.x = 0;
 
			CreateObjects();
			addEventListener(Event.ENTER_FRAME, Loop3D);
		}
 
		private function CreateObjects():void
		{
			var mat:WireframeMaterial = new WireframeMaterial;
			mat.doubleSided = true;
 
			var plane:Plane = new Plane(mat, 500, 500, 8, 8);
			plane.rotationX = -90;
 
			// lo añadimos a la escena del BasicView.
			bView.scene.addChild(plane);
 
			//camera.target = plane;
		}
 
		private function Loop3D(e:Event):void
		{
			var radio:uint = 500;
			var angulo:Number = mouseX + (stage.stageWidth / 2);
 
			Camera3D(bView.camera).x = radio * Math.cos(angulo / 100);
			Camera3D(bView.camera).z = radio * Math.sin(angulo / 100);
			Camera3D(bView.camera).y = - mouseY + (stage.stageHeight / 2) + 100;
 
			// llamamos al método de renderizado del BasicView:
			bView.singleRender();
		}
	}
}

Como detalle importante, hay que destacar que lo más importante a tener en cuenta es el añadir a la aplicación en sí la escena en la que se basa nuestro escenario 3D, en este caso será BasicView.

La clase BasicView nos proporciona esencialmente todos los objetos necesarios para sacar un render (escena 3D), ya sea, camara, scene entre otros.

Una vez añadido el objeto heredado de BasicView al stage, lo siguiente es configurar varias características de la camara 3D, tal y como muestra el ejemplo. A parte de dotar a la cámara de una posición en la escena o de adaptarle un zoom específico, también podemos dotarla de una rotación de sus ejes X, Y o Z, entre otros muchos métodos disponibles.

Centrándonos un poco en la implementación de objetos en la escena, en el ejemplo hemos utilizado un objeto que probablemente será uno de los más comunes, el Plano, mejor dicho clase Plane. Aparte de incluir el objeto, también hemos querido aplicarle un material muy simple, se trata del material WireframeMaterial, que simple mente nos muestra el objeto Plano y los polígonos que lo forman.

Por último dejad que os comente la función que hace posible este magnífico entorno 3D. Para el ejemplo hemos utilizado el método Enter_Frame de la clase Events. Lo único que hace realmente es llamar a la función Loop3D en cada momento, y ésta es la encargada de montar el escenario en cada momento, rotando los objetos añadidos a la escena a nuestro antojo. Por otro lado y como apoyo para los impetuosos, os recomiendo que echeis un vistazo al método onRenderTick de la clase BasicView, realiza el mismo efecto que Enter_Frame pero es propio de BasicView.

Dicho todo esto, solo me queda animaros a crear nuevos entornos web basados en este entorno y no menos desearos una feliz navidad y un prospero año nuevo.