Papervision3D Gallery

From Frontal Wiki

Jump to: navigation, search

An example of an image gallery utilizing Papervision 3D. In this demo, a variable is declared which sets the depth, width, height and image of each plane and then displays them in a scene. A minimal amount of mouse interaction has been added in order to navigate through each photo. Both Papervision and Green Sock's TweenMax libraries are added to the Frontal swf via the <include> tag. See Frontal's reference section for details on this.

Graphic styling has been kept to a minimum for ease of customization.

<style><![CDATA[
 
	document
	{
		background-color: #E1E1E1;
	}
 
	#paperScene
	{
 
		@onFirstDocumentPreRender
		{
			var scene;
			var reflectScene;
			var camera;		
			var renderer;
			var renderTimer;
			var camModX;
			var camModY;
			var planeCount=1;
			var planeX=0;
			var planeY=0;
			var planeZ=0;
			var planeWidth;
			var planeHeight;
			var camZMax=-300;
			var camZMin=-900;
			var camXMax=0;
			var currentPlane = "primitive1";
			var photoOn=false;
			var lastPlane;
			var nextX;
			var caption;
 
			// The following variblabes are used to determine the properties 
			// of the papervision scene being built:
			// samplePlaneVars = (Z-Depth, Width, Height, Image Path);
			// totalPlanes = the number of planes/photos
 
			var samplePlaneVars = new Array(0, 200, 100, "assets/images/");			
			var totalPlanes = 20;
 
			// Definitions of mandatory papervision elements
			// Viewport, Scene, Camera, Renderer
 
			var viewport   = new org.papervision3d.view.Viewport3D(1, 1, true, true);
                        viewport.buttonMode = true;
			movie.addChild(viewport);
			scene = new org.papervision3d.scenes.Scene3D();
			camera = new org.papervision3d.cameras.Camera3D();
			camera.z = -300;
			renderer = new org.papervision3d.render.BasicRenderEngine();
 
			// Below is a Timer & Event, used to render the Papervision Scene
			// as often as the processor will allow
 
			renderTimer = new flash.utils.Timer(5);
			renderTimer.addEventListener(flash.events.TimerEvent.TIMER, onTimerEvent);
 
			function onTimerEvent(e)
			{
				// Below are a set of camera movements based on mouse position
 
				var nextCamLoc = camera.z + (movie.mouseY - containerHeight/2) * .1; 
 
				if(nextCamLoc <= camZMin)
				{
					nextCamLoc = camZMin;
				}
				if(nextCamLoc >= camZMax)
				{
					nextCamLoc = camZMax;
				}
 
				var nextCamX = camera.x + (movie.mouseX - containerWidth/2) * .1; 
 
				if(nextCamX <= 0)
				{
					nextCamX = 0;
				}
				if(nextCamX >= camXMax)
				{
					nextCamX = camXMax;
				}
 
				if(!photoOn)
				{
					camera.x = nextCamX;
					camera.z = nextCamLoc;
				}
 
				renderer.renderScene(scene, camera, viewport);
			}
 
			// The function below takes the samplePlaneVars,
			// builds and manipulates a plane, adds mouse events
			// and adds it to the scene.
 
			function addPlane(planeVars)
			{
				var materialPath = [ [planeVars[3]] + "image_" + planeCount + ".jpg"];
 
				//dynamic["material" + planeCount]  = new org.papervision3d.materials.MovieMaterial(mc_material, true, true);
 
				dynamic["material" + planeCount]  = new org.papervision3d.materials.BitmapFileMaterial(materialPath);
				dynamic["material" + planeCount].smooth = true;
				dynamic["material" + planeCount].interactive = true;
				dynamic["material" + planeCount].doubleSided = true;
 
				dynamic["primitive" + planeCount] = new org.papervision3d.objects.primitives.Plane(dynamic["material" + planeCount], planeVars[1], planeVars[2], 6, 6);
				dynamic["primitive" + planeCount].x = planeX;
 
				if(planeCount != 0)
				{
					dynamic["primitive" + planeCount].rotationY = 45;
					dynamic["primitive" + planeCount].z = 50;
					camXMax += 125;
					//TweenMax.to(camera, .3, {x:camXMax, ease:Quad.easeOut});
				}
 
				dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
				dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_OVER, onPlaneOver);
				dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_OUT, onPlaneOut);
 
				scene.addChild(dynamic["primitive" + planeCount]);
 
				planeX += 125;
				planeCount += 1;
			}
 
			// The functions below are for the mouse events 
			// on each plane (Over, Out & Click).
 
			function onPlaneOut(e)
			{
				if(!photoOn)
				{
					gs.TweenMax.to(e.target, .5, {z:50, ease:gs.easing.Quad.easeOut});
				}
			}
 
			function onPlaneOver(e)
			{
				if(!photoOn)
				{
					gs.TweenMax.to(e.target, .5, {z:-50, ease:gs.easing.Quad.easeOut});
				}
			}
 
			function onPlaneClick(e)
			{
				if(photoOn)
				{
					if(e.target == lastPlane)
					{
						nextX = e.target.x;
 
						gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50});
						gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:45, z:50, x:nextX});
 
						photoOn = false;
					}
					if(e.target != lastPlane)
					{
						nextX = lastPlane.x;
 
						gs.TweenMax.to(lastPlane, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50});
						gs.TweenMax.to(lastPlane, .3, {delay: 0.4, rotationY:45, z:50, x:nextX});
 
						nextX = e.target.x;
 
						gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50});
						gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:0, z:-100, x:nextX});
 
						gs.TweenMax.to(camera, .7, {x:nextX, z:-300, ease:gs.easing.Quad.easeOut});
 
						lastPlane = e.target;
 
						photoOn = true;
					}
				}
 
				else if(!photoOn)
				{
					nextX = e.target.x;
 
					gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50});
					gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:0, z:-100, x:nextX});
 
					gs.TweenMax.to(camera, .7, {x:nextX, z:-300, ease:gs.easing.Quad.easeOut});
 
					lastPlane = e.target;
 
					photoOn = true;
				}
			}
 
	// Below is a loop that uses the totalPlanes variable
	// and runs a function to create the planes for the scene.
 
	for(var i=1; i<=totalPlanes; i++)
	{
		addPlane(samplePlaneVars);
	}
 
	renderTimer.start();
		}
	}
 
	*:link:hover, *:visited:hover { underline: false; color: #ff5523; }
 
]]></style>
 
<include blocking="true" rel="assets" type="application/x-shockwave-flash" src="assets/swfs/paper_assets.swf" id="movie" />
 
<div id="paperScene" style="width: 100%; height: 100%;" />
 
<!--
frontal credit  	
-->					
<div id="linker" style="left: 30px; top: 90%; padding-bottom: 5px;">
<text class="frLink" href="http://frontalcode.com" target="_blank"><![CDATA[<font size="12">Created w/ Frontal</font>]]></text>
</div>
Personal tools
Get Adobe Flash player