8. Keyboard Interaction (To move the camera)
In this tutorial I'm going to cover keyboard interaction.
(use W,A,S and D)
The very first thing we need to do before we start is to go right back and edit the base class. We're going to make it accept more than one camera, then we can dynamically select the camera, scene and viewport to use.
Open up PaperBase.as (Double click on it in the project tree, under PaperBase). Insert the following lines just below the line "public var default_camera:Camera3D;":
-
public var current_scene:Scene3D;
-
public var current_camera:CameraObject3D;
-
public var current_viewport:Viewport3D;
These three variables will store the camera, scene and viewport to use in the render. We need to make the default camera, scene and viewport be stored in these variables when we initiate our project, so in the initPapervision function, right at the end, add the following lines:
-
current_camera = default_camera;
-
current_scene = default_scene;
-
current_viewport = viewport;
The final little edit that we need to make is to render from the current objects.
Change the line "renderer.renderScene(default_scene, default_camera, viewport);" to:
-
renderer.renderScene(current_scene, current_camera, current_viewport);
Done. You can download the NEW version of the base class by clicking here!
Now that we've got the base class edited, we can start editing Main.as.
Copy and paste this code into Main.as, make sure you have the papervision library, and the PaperBase class imported in your project's classpaths.
-
package {
-
-
import PaperBase;
-
import flash.events.KeyboardEvent;
-
import org.papervision3d.cameras.FreeCamera3D;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
-
public class Main extends PaperBase {
-
-
public var wdown:Boolean = false;
-
public var adown:Boolean = false;
-
public var sdown:Boolean = false;
-
public var ddown:Boolean = false;
-
public var camera:FreeCamera3D;
-
-
public function Main() {
-
init();
-
}
-
-
override protected function init3d():void {
-
// Initiate 3d
-
}
-
override protected function processFrame():void {
-
// Process Frame Here
-
}
-
}
-
}
I've put in all the imports that you'll need for the project. Let's set up the event listeners which will listen for when we press or release a key. Change the code in the Main() function so it looks like this:
-
public function Main() {
-
init();
-
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
-
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
-
}
This sets up the two event listeners. Now the functions "onKeyDown" then "onKeyUp" will be triggered when you press a key down, then release it.
If you look at the code, you'll notice that I've declared four boolean values, Wdown, Adown, Sdown and Ddown.
-
public var Wdown:Boolean = false;
-
public var Adown:Boolean = false;
-
public var Sdown:Boolean = false;
-
public var Ddown:Boolean = false;
I like to use the W A S and D keys for movement, so each of these boolean values will hold whether W,A,S or D is down.
We'll now set up our onKey functions, which will set the above variables to the correct value. Add this code to your project:
-
public function onKeyDown( event:KeyboardEvent ):void {
-
// The keycodes for the W,A,S & D keys are:
-
// W: 87
-
// A: 65
-
// S: 83
-
// D: 68
-
// -------
-
switch(event.keyCode) {
-
case 87:
-
wdown = true;
-
break;
-
case 65:
-
adown = true;
-
break;
-
case 83:
-
sdown = true;
-
break;
-
case 68:
-
ddown = true;
-
break;
-
}
-
}
-
-
public function onKeyUp( event:KeyboardEvent ):void {
-
switch(event.keyCode) {
-
case 87:
-
wdown = false;
-
break;
-
case 65:
-
adown = false;
-
break;
-
case 83:
-
sdown = false;
-
break;
-
case 68:
-
ddown = false;
-
break;
-
}
-
}
Pretty simple stuff - Just sets the needed variable to true.
Now we've set that all up, we need to set up our scene. Add the following function to your code:
-
override protected function init3d():void {
-
camera = new FreeCamera3D(1, 500);
-
camera.moveUp(400);
-
current_camera = camera;
-
for (var x:Number = 0; x <4; x++) {
-
for (var y:Number = 0; y <4; y++) {
-
var p:Plane = new Plane(new BitmapFileMaterial("http://papervision2.com/wp-content/downloads/concretetex.jpg"), 1000, 1000, 8, 8);
-
p.pitch(90);
-
p.x = (x * 1000)-2000;
-
p.z = (y * 1000)-2000;
-
default_scene.addChild(p);
-
}
-
}
-
}
Notice that we initiate our "camera" variable here. We then set the current_camera to the camera that we just made. After the line "current_camera = camera", the baseclass will render the scene looking through "camera" instead of "default_camera". The rest of the code in this function just adds a big flat area to the scene which will be our "floor"
Now we can use the boolean variables to move our camera in the processframe function. Add this code to your project:
-
override protected function processFrame():void {
-
if (wdown) {
-
camera.moveForward(60);
-
}
-
if (sdown) {
-
camera.moveBackward(60);
-
}
-
if (adown) {
-
camera.yaw( -8);
-
}
-
if (ddown) {
-
camera.yaw( 8);
-
}
-
}
This just moves the camera forward or back, or rotates it left/right, depending on which key has been pressed.
Your project is now ready to be run. Here is my final code:
-
package {
-
-
import PaperBase;
-
import flash.events.KeyboardEvent;
-
import org.papervision3d.cameras.FreeCamera3D;
-
import org.papervision3d.objects.primitives.Plane;
-
import org.papervision3d.materials.BitmapFileMaterial;
-
-
public class Main extends PaperBase {
-
-
public var wdown:Boolean = false;
-
public var adown:Boolean = false;
-
public var sdown:Boolean = false;
-
public var ddown:Boolean = false;
-
public var camera:FreeCamera3D;
-
-
public function Main() {
-
init();
-
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
-
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
-
}
-
-
public function onKeyDown( event:KeyboardEvent ):void {
-
// The keycodes for the W,A,S & D keys are:
-
// W: 87
-
// A: 65
-
// S: 83
-
// D: 68
-
// -------
-
switch(event.keyCode) {
-
case 87:
-
wdown = true;
-
break;
-
case 65:
-
adown = true;
-
break;
-
case 83:
-
sdown = true;
-
break;
-
case 68:
-
ddown = true;
-
break;
-
}
-
}
-
-
public function onKeyUp( event:KeyboardEvent ):void {
-
switch(event.keyCode) {
-
case 87:
-
wdown = false;
-
break;
-
case 65:
-
adown = false;
-
break;
-
case 83:
-
sdown = false;
-
break;
-
case 68:
-
ddown = false;
-
break;
-
}
-
}
-
-
override protected function init3d():void {
-
camera = new FreeCamera3D(1, 500);
-
camera.moveUp(400);
-
current_camera = camera;
-
for (var x:Number = 0; x <4; x++) {
-
for (var y:Number = 0; y <4; y++) {
-
var p:Plane = new Plane(new BitmapFileMaterial("http://papervision2.com/wp-content/downloads/concretetex.jpg"), 1000, 1000, 8, 8);
-
p.pitch(90);
-
p.x = (x * 1000)-2000;
-
p.z = (y * 1000)-2000;
-
default_scene.addChild(p);
-
}
-
}
-
}
-
override protected function processFrame():void {
-
if (wdown) {
-
camera.moveForward(60);
-
}
-
if (sdown) {
-
camera.moveBackward(60);
-
}
-
if (adown) {
-
camera.yaw( -8);
-
}
-
if (ddown) {
-
camera.yaw( 8);
-
}
-
}
-
}
-
}



