Guide to Getting Started in Papervision 3D

Add Interactivity

Controlling Objects with the Mouse

Mouse interactivity is a must when it comes to web pages, so I had to include a little bit about that functionality in a basic tutorial.

By default, mouse interactivity isn’t enabled in any aspect of Papervision. This is because it takes up processor time which doesn’t need to be taken up.

There are several different types of interactivity and we will start with having the scene detect the mouse position and have that control the camera.

package {
	import flash.events.Event;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.PaperPlane;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;

	public class HelloInteractivity extends BasicView {

		// move the definitions out here so the whole class can get them
		private var myFirstSphere:Sphere;
		private var myFirstPlane:PaperPlane;
		private var pivotContainer:DisplayObject3D;

		public function HelloInteractivity() {
			// create a movie material for the sphere from the library
			var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
			// create a color material for the plane
			var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
			planeMaterial.doubleSided = true;
			// create a sphere and a paper airplane, increase the triangles on the sphere
			myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
			myFirstPlane = new PaperPlane(planeMaterial, 3);
			// move the plane in 3d space
			myFirstPlane.x = 150;
			myFirstPlane.y = 150;
			myFirstPlane.z = -50;
			// set an initial rotation for the plane
			myFirstPlane.rotationY = -135;
			// add the sphere to the scene
			scene.addChild(myFirstSphere);
			// add a container to use for pivoting the plane rotation
			pivotContainer = new DisplayObject3D();
			// add the plane to the container
			pivotContainer.addChild(myFirstPlane);
			// add the container to the scene
			scene.addChild(pivotContainer);
			// this is an inherited method (onRenderTick) that starts an
			// enterframe event to render the scene
			startRendering();
		}

		override protected function onRenderTick(event:Event = null):void {
			// rotate the pivot container (will offset the plane rotation)
			pivotContainer.rotationY += 1;
			// rotate the sphere
			myFirstSphere.rotationY -= 1;
			// get the rotation values for the camera based on where the mouse is in the scene
			var rotY: Number = (mouseY - (stage.stageHeight / 2)) / (stage.height / 2) * 400;
			var rotX: Number = (mouseX - (stage.stageWidth / 2)) / (stage.width / 2) * -400;
			// set the camera's position
			camera.x -= (rotX + camera.x) / 10;
			camera.y -= (rotY + camera.y) / 10;
			// make sure that it is calling the renderer
			super.onRenderTick();
		}
	}
}

If you compare this script with the animation script you will notice that the constructor has not changed at all yet it is able to interact with the mouse now. What we added was in the enterframe (onRenderTick) function. All that it does is get the position of the mouse on the stage and move the camera based on that position. The equation looks more complicated than that, but that is basically what it does.

There are a ton of ways that you can use this in your applications, maybe adding a keyboard listener to let the user control the camera and have the mouse control the camera’s rotation. If you have ever seen a first person shooter, that is basically how it functions.

Making Objects Interactive

Another type of interactivity is when you want to actually interact with an object itself. Once again, this functionality is not enabled by default but can easily be enabled and used in Papervision.

package {
	import flash.events.Event;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.PaperPlane;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;

	public class HelloClickability extends BasicView {

		// move the definitions out here so the whole class can get them
		private var myFirstSphere:Sphere;
		private var myFirstPlane:PaperPlane;
		private var pivotContainer:DisplayObject3D;

		public function HelloClickability() {
			// call the super to turn on interactivity
			super(0, 0, true, true);
			// create a movie material for the sphere from the library
			var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
			sphereMaterial.interactive = true;
			sphereMaterial.smooth = true;
			// create a color material for the plane
			var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
			planeMaterial.doubleSided = true;
			planeMaterial.interactive = true;
			// create a sphere and a paper airplane, increase the triangles on the sphere
			myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
			myFirstPlane = new PaperPlane(planeMaterial, 3);
			// add the event listener to the object using the InteractiveScene3DEvent
			myFirstSphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
			myFirstPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
			// move the plane in 3d space
			myFirstPlane.x = 150;
			myFirstPlane.y = 150;
			myFirstPlane.z = -50;
			// set an initial rotation for the plane
			myFirstPlane.rotationY = -135;
			// add the sphere to the scene
			scene.addChild(myFirstSphere);
			// add a container to use for pivoting the plane rotation
			pivotContainer = new DisplayObject3D();
			// add the plane to the container
			pivotContainer.addChild(myFirstPlane);
			// add the container to the scene
			scene.addChild(pivotContainer);
			// this is an inherited method (onRenderTick) that starts an
			// enterframe event to render the scene
			startRendering();
		}

		private function onObjectClick(ARG_evt:InteractiveScene3DEvent):void {
			// here is your event listener to control the object you clicked.
			trace(ARG_evt.currentTarget);
		}

		override protected function onRenderTick(event:Event = null):void {
			// rotate the pivot container (will offset the plane rotation)
			pivotContainer.rotationY += 1;
			// rotate the sphere
			myFirstSphere.rotationY -= 1;
			// get the rotation values for the camera based on where the mouse is in the scene
			var rotY: Number = (mouseY - (stage.stageHeight / 2)) / (stage.height / 2) * 400;
			var rotX: Number = (mouseX - (stage.stageWidth / 2)) / (stage.width / 2) * -400;
			// set the camera's position
			camera.x -= (rotX + camera.x) / 10;
			camera.y -= (rotY + camera.y) / 10;
			// make sure that it is calling the renderer
			super.onRenderTick();
		}
	}
}

What we added to this version is an event listener. There were a couple requirements in order to have the event listener actually do anything, but that is basically all that we did. To start, we called the super and enabled interactivity (that is the fourth parameter). Next, we made the sphereMaterial and planeMaterial interactive by setting the interactive property to true. Finally, we added the InteractiveScene3DEvent listener. This fires custom events that Papervision objects handle. The only result in what we did was a trace of the object that was clicked, I will let you use your imagination for enhancing this.

Leave a Reply

Your email address will not be published. Required fields are marked *