AS3: Papervision3D FreeCamera Movement
View Example
Get Papervision3D [Tutorial]
Get TweenMax
Download Source
One of the things that I was curious about when using Papervision3D was how the camera moves around and tracks other objects. Originally I set up a Camera3D object and moved it around to look at other objects but that wasn't playing well with the way I was tweening the camera around to look at certain objects. I switched over to the FreeCamera3D and this was the result.
Basically, I'm making 10 cubes on the stage and randomly positioning them along the x, y, and z axis. I then take a camera and zoom in to each cube sequentially so that the camera is facing it straight on by tweening the camera to the same position as the current cube minus 200 on the z axis so that we can look at the cube straight on (rather than being inside of it). Here is the code:
Actionscript:
-
/**
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
package com.reintroducing
-
{
-
import flash.display.Sprite;
-
import flash.events.Event;
-
-
import org.papervision3d.cameras.FreeCamera3D;
-
import org.papervision3d.core.math.Number3D;
-
import org.papervision3d.core.proto.SceneObject3D;
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.materials.utils.MaterialsList;
-
import org.papervision3d.objects.primitives.Cube;
-
import org.papervision3d.render.BasicRenderEngine;
-
import org.papervision3d.scenes.Scene3D;
-
import org.papervision3d.view.Viewport3D;
-
-
import gs.TweenMax;
-
-
public class CameraMovement extends Sprite
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
private var _viewport:Viewport3D;
-
private var _scene:Scene3D;
-
private var _camera:FreeCamera3D;
-
private var _renderer:BasicRenderEngine;
-
private var _cubePoints:Array;
-
private var _currentCube:Cube;
-
-
private var _startPosition:int = 0;
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
public function CameraMovement():void
-
{
-
this.init();
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
/**
-
*
-
*/
-
private function init():void
-
{
-
this.initPapervision();
-
this.initObjects();
-
this.initListeners();
-
}
-
-
/**
-
*
-
*/
-
private function initPapervision():void
-
{
-
this._viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
-
this._scene = new Scene3D();
-
this._camera = new FreeCamera3D(11);
-
this._renderer = new BasicRenderEngine();
-
-
this.addChild(this._viewport);
-
}
-
-
/**
-
*
-
*/
-
private function initObjects():void
-
{
-
this._cubePoints = new Array();
-
-
var cube:Cube;
-
var pt:Number3D;
-
var x:Number;
-
var y:Number;
-
var z:Number;
-
-
for (var i:int = 0; i <10; i++)
-
{
-
x = CameraMovement.getRandomBetween(-400, 400);
-
y = CameraMovement.getRandomBetween(-200, 200);
-
z = CameraMovement.getRandomBetween(-200, 1000);
-
-
pt = new Number3D(x, y, z);
-
-
this._cubePoints.push(pt);
-
-
cube = this.makeColoredCube(i, x, y, z);
-
}
-
-
this.moveCamera();
-
}
-
-
/**
-
*
-
*/
-
private function initListeners():void
-
{
-
this.addEventListener(Event.ENTER_FRAME, render);
-
}
-
-
/**
-
*
-
*/
-
private static function getRandomBetween($low:Number, $high:Number):Number
-
{
-
return Math.floor(Math.random() * ($high - $low + 1)) + $low;
-
}
-
-
/**
-
*
-
*/
-
private function makeColoredCube($id:int, $x:Number, $y:Number, $z:Number):Cube
-
{
-
var colors:Array = new Array();
-
-
for (var i:int = 0; i <6; i++)
-
{
-
colors.push(new ColorMaterial(Math.random() * 0xFFFFFF));
-
}
-
-
var matList:MaterialsList = new MaterialsList({front: colors[0], back: colors[1], left: colors[2], right: colors[3], top: colors[4], bottom: colors[5]});
-
var cube:Cube = new Cube(matList, 25, 25, 25);
-
cube.x = $x;
-
cube.y = $y;
-
cube.z = $z;
-
cube.name = String("cube" + $id);
-
-
this._scene.addChild(cube);
-
-
return cube;
-
}
-
-
/**
-
*
-
*/
-
private function moveCamera():void
-
{
-
this._currentCube = Cube(this._scene.getChildByName("cube" + this._startPosition));
-
//TODO: highlight the current cube somehow
-
-
var points:Number3D = new Number3D(this._cubePoints[this._startPosition].x, this._cubePoints[this._startPosition].y, (this._cubePoints[this._startPosition].z - 200));
-
-
TweenMax.to(this._camera, 1, {x: points.x, y: points.y, z: points.z});
-
TweenMax.delayedCall(3, moveCamera, [], this);
-
-
this._startPosition++;
-
this._startPosition %= 10;
-
}
-
-
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
-
-
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
/**
-
*
-
*/
-
private function render($evt:Event):void
-
{
-
this._renderer.renderScene(this._scene, this._camera, this._viewport);
-
}
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
override public function toString():String
-
{
-
return "com.reintroducing.CameraMovement";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
-
}
As you can see by the TODO on line 147 I was meaning to add a bit more to this but just got sidetracked by client work and wanted to release this.
(2 votes, average: 5 out of 5)
Loading ...
thats pretty cool, I have something a little like yours here
That's pretty sweet, Dominic. I like the computeSpectrum addition to it! I've added your blog to my RSS reader, look forward to future posts.
thx alot, i'm trying to add you to my blogroll, whenever i work out how jemingway works...
[...] 19, 2008 in AS 3, Flash, TutorialesTags: cámara, pv3d Muy padre tutorial con código y ligas a los recursos necesarios para manejar una cámara en nuestro espacio [...]
Thanks so much for your tut! It really helps noobs like me! Keeo up the great work and I can't wait to see the next one.
Since the original time of this post PaperVision has updated a couple files and TweenMax has changed a little bit too. (I just updated both today.)
I had to make the following changes to get the above example to work.
1) Change all references of FreeCamera3D to Camera3D. The latest PaperVision (GreatWhite branch) has merged the Camera files and added a CameraType.as.
2) I changed line #153 from - TweenMax.delayedCall(3, moveCamera, [], this); - to - TweenMax.delayedCall(3, moveCamera);
And pow, it works perfect!
Thanks again!
Hey Trygve,
Thanks for the update! Yeah the source is probably a bit outdated by now. As for the TweenMax change, i'm not sure that you'd have to edit that because all that is is a passing of blank parameters and the scope of the method to run. But as long as it works for you thats good to know.
Hi Matt,
I was surprised to see your quick response. Most people post and then never return to the thread again!
I was receiving a TweenMax error stating that "no more than 3 parameters were expected". Since your third parm was an empty array I removed it too, but I agree that parameter was fine to leave.
To find the fix, I checked the TweenMax documention:
TweenMax.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array);
I've subscribed to your feed and look forward to seeing more of your work. Thanks.
Trygve,
You're absolutely right, I totally forgot we are talking about AS3 here and not AS2 where you need to define the scope of the function. My apologies