10. Advanced Interactivity
Today we're going to learn how to handle more advanced interactivity. We'll be making something like this:
Click on a face of the cube to zoom into it. Click it again to make the cube spin again.
So, in this tutorial I'm going to show you exactly how to work out which material has been clicked on the cube and act accordingly.
If you haven't read it already, I strongly suggest that you read the Basic Interactivity tutorial first or you'll probably miss something.
Ok, so on to the code.
Firstly we'll want six materials to apply to each face of the cube. Here are mine, although you can create whatever materials you like:
-
private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
-
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
-
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
-
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
-
private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
So, in this code I'm just loading six images from my server to use as each face.
Also, add the following declaration beneath the texture declarations to hold our Cube object:
-
private var cube:Cube;
Now we need to set up the 3d initiation code. In this code we will firstly set all of our materials as interactive, and then give each of our materials a name. This is VERY important to be able to easily find out which material has been clicked. If we didn't give each material a name then we wouldn't be able to easily work out which face has been clicked.
So, add the following code to your init3d() function:
-
override protected function init3d():void {
-
// We need to be able to identify each side. We'll do this
-
// by asssigning names to each material. During this process
-
// we'll also make the materials interactive.
-
frontMaterial.interactive = true;
-
frontMaterial.name = "front";
-
backMaterial.interactive = true;
-
backMaterial.name = "back";
-
leftMaterial.interactive = true;
-
leftMaterial.name = "left";
-
rightMaterial.interactive = true;
-
rightMaterial.name = "right";
-
topMaterial.interactive = true;
-
topMaterial.name = "top";
-
bottomMaterial.interactive = true;
-
bottomMaterial.name = "bottom";
-
// ---------------------------------------------
-
-
cube = new Cube(new MaterialsList( {
-
front: frontMaterial,
-
back: backMaterial,
-
left: leftMaterial,
-
right: rightMaterial,
-
top: topMaterial,
-
bottom: bottomMaterial
-
} ), 500, 500, 500, 3, 3, 3);
-
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
-
default_scene.addChild(cube);
-
}
So, In this code, we've set each material as interactive, given each one a sensible name, and initialised our cube with the materials assigned to the correct faces.
We then add an event listener to trigger the "onPress" event when the cube is clicked, then finally we add the cube to the scene.
We've now got a cube with six materials on it listening for a click event.
Now, the code which will let us work out which face has been clicked:
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
switch(e.face3d.material.name) {
-
case "front":
-
// This code will be run when the front face is clicked
-
break;
-
case "back":
-
// This code will be run when the back face is clicked
-
break;
-
case "left":
-
// This code will be run when the left face is clicked
-
break;
-
case "right":
-
// This code will be run when the right face is clicked
-
break;
-
case "top":
-
// This code will be run when the top face is clicked
-
break;
-
case "bottom":
-
// This code will be run when the bottom face is clicked
-
break;
-
}
-
}
Pretty self explanitary. The "e" variable in this code holds lots of data about the click event, including which material has been clicked, so, because we know which material is on each face, we can tell by the materials name which face has been clicked!
With a little bit of code, you can make a nice spinning cube gallery like the example above:
Here is my final code, have fun!
-
package {
-
-
import flash.display.DisplayObject;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
import org.papervision3d.materials.utils.MaterialsList;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
import org.papervision3d.objects.primitives.Cube;
-
-
public class Main extends PaperBase {
-
-
private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
-
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
-
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
-
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
-
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
-
private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
-
-
private var targetrotationX:Number = 0;
-
private var targetrotationY:Number = 0;
-
private var targetrotationZ:Number = 0;
-
-
private var tweening:Boolean = false;
-
-
private var cube:Cube;
-
-
public function Main() {
-
init(400, 400);
-
}
-
-
override protected function init3d():void {
-
// We need to be able to identify each side. We'll do this
-
// by asssigning names to each material. During this process
-
// we'll also make the materials interactive.
-
frontMaterial.interactive = true;
-
frontMaterial.name = "front";
-
backMaterial.interactive = true;
-
backMaterial.name = "back";
-
leftMaterial.interactive = true;
-
leftMaterial.name = "left";
-
rightMaterial.interactive = true;
-
rightMaterial.name = "right";
-
topMaterial.interactive = true;
-
topMaterial.name = "top";
-
bottomMaterial.interactive = true;
-
bottomMaterial.name = "bottom";
-
// ---------------------------------------------
-
-
cube = new Cube(new MaterialsList( {
-
front: frontMaterial,
-
back: backMaterial,
-
left: leftMaterial,
-
right: rightMaterial,
-
top: topMaterial,
-
bottom: bottomMaterial
-
} ), 500, 500, 500, 3, 3, 3);
-
// Listen for the click:
-
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
-
// Add to scene:
-
default_scene.addChild(cube);
-
}
-
-
private function onPress( e:InteractiveScene3DEvent ):void {
-
// If the cube has been moved to the front:
-
if (tweening) {
-
// Let it rotate again
-
tweening = false;
-
}else {
-
// Find which rotation we need to be able to see
-
// the face image:
-
switch(e.face3d.material.name) {
-
case "front":
-
targetrotationX = 0;
-
targetrotationY = 180;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "back":
-
targetrotationX = 0;
-
targetrotationY = 0;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "left":
-
targetrotationX = 0;
-
targetrotationY = -90;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "right":
-
targetrotationX = 0;
-
targetrotationY = 90;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "top":
-
targetrotationX = 90;
-
targetrotationY = 0;
-
targetrotationZ = 0;
-
tweening = true;
-
break;
-
case "bottom":
-
targetrotationX = -90;
-
targetrotationY = 0;
-
targetrotationZ = 180;
-
tweening = true;
-
break;
-
}
-
}
-
}
-
-
override protected function processFrame():void {
-
if (tweening) {
-
// If a face has been clicked
-
if (default_camera.zoom <6.8) {
-
// If the camera isn't zoomed enough then zoom in a bit more:
-
default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
-
}
-
-
// Test each rotation and rotate it towards the target rotation:
-
// X axis:
-
if (cube.rotationX <targetrotationX) {
-
cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
-
cube.rotationX = Math.round(cube.rotationX);
-
}else if (cube.rotationX> targetrotationX) {
-
cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
-
cube.rotationX = Math.round(cube.rotationX);
-
}
-
// Y axis:
-
if (cube.rotationY <targetrotationY) {
-
cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
-
cube.rotationY = Math.round(cube.rotationY);
-
}else if (cube.rotationY> targetrotationY) {
-
cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
-
cube.rotationY = Math.round(cube.rotationY);
-
}
-
// Z axis:
-
if (cube.rotationZ <targetrotationZ) {
-
cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
-
cube.rotationZ = Math.round(cube.rotationZ);
-
}else if (cube.rotationZ> targetrotationZ) {
-
cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
-
cube.rotationZ = Math.round(cube.rotationZ);
-
}
-
}else {
-
// If the camera is zoomed in, it shouldn't be now
-
if (default_camera.zoom> 2) {
-
// So zoom out a bit.
-
default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
-
}
-
-
// Rotate the cube a bit:
-
cube.rotationX += 2;
-
cube.rotationY += 2;
-
-
// Make sure that we dont "wind up" the rotation
-
if (cube.rotationX>= 360) cube.rotationX = 0;
-
if (cube.rotationY>= 360) cube.rotationY = 0;
-
}
-
}
-
}
-
}



