Following from my previous post, I’d like to make the scene a bit more interesting by adding some animation. As you’ll see, not many modifications to the code are necessary. As with Part 1, I’m basing this example on a previous Papervision3D example that you can find in First steps in Papervision3D : Part 3.
Previous articles summary :
- First steps in Away3D : Part 1 - Getting started
Creation of a new Away3D project within eclipse or Flex Builder 3 and a simple example of a 3D scene illustrating some basic Away3D classes.
Using the same objects as before (a Sphere and LineSegments displaying the x, y and z axes), my objective is to rotate all of them about the origin and individually rotate the sphere. Rotation in Away3D is very easy to achieve. These objects inherit from a base class called Object3D as do all 3D object displayed in a Scene in Away3D. This class provides a number of useful functions to rotate, translate and scale an object. The simplest way to rotate an object is to use the pitch, yaw and roll functions which rotate an object about its local x, y and z axes respectively.
So, lets dive right in and take a look at the code. As I mentioned before, this is based on the previous example and very little modifications have been made. As before I’m using eclipse with the Flex Builder 3 plugin to compile the examples: take a look at my previous post if you’re new to eclipse and want to see how to set up the projects. Otherwise, create a new ActionScript class, call it Example002 and cut and paste the following code.
package { import away3d.cameras.Camera3D; import away3d.containers.ObjectContainer3D; import away3d.containers.Scene3D; import away3d.containers.View3D; import away3d.core.base.Vertex; import away3d.core.math.Number3D; import away3d.materials.WireColorMaterial; import away3d.materials.WireframeMaterial; import away3d.primitives.LineSegment; import away3d.primitives.Sphere; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; [SWF(backgroundColor="#000000")] public class Example002 extends Sprite { private var scene:Scene3D; private var camera:Camera3D; private var view:View3D; private var group:ObjectContainer3D; private var sphere:Sphere; public function Example002() { // set up the stage stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; // Add resize event listener stage.addEventListener(Event.RESIZE, onResize); // Initialise Papervision3D init3D(); // Create the 3D objects createScene(); // Initialise frame-enter loop this.addEventListener(Event.ENTER_FRAME, loop); } private function init3D():void { // Create a new scene where all the 3D object will be rendered scene = new Scene3D(); // Create a new camera, passing some initialisation parameters camera = new Camera3D({zoom:15, focus:30, x:100, y:300, z:-200}); camera.lookAt(new Number3D(0, 0, 0)); // Create a new view that encapsulates the scene and the camera view = new View3D({scene:scene, camera:camera}); // center the viewport to the middle of the stage view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; addChild(view); } private function createScene():void { // Create an object container to group the objects on the scene group = new ObjectContainer3D(); scene.addChild(group); // Create a new sphere object using a wirecolor material var sphereMaterial:WireColorMaterial = new WireColorMaterial(0x5500FF, {wirecolor:0xFF9900}); sphere = new Sphere({material:sphereMaterial, radius:50, segmentsW:10, segmentsH:10}); // Position the sphere and add it to the group sphere.x = -100; group.addChild(sphere); // Create a origin vertex var origin:Vertex = new Vertex(0, 0, 0); // Create the red-coloured x-axis with a width of 2 and add it to the group var xAxis:LineSegment = new LineSegment({material:new WireframeMaterial(0xFF0000, {width:2})}); xAxis.start = origin; xAxis.end = new Vertex(100, 0, 0); group.addChild(xAxis); // Create the green-coloured y-axis with a width of 2 and add it to the group var yAxis:LineSegment = new LineSegment({material:new WireframeMaterial(0x00FF00, {width:2})}); yAxis.start = origin; yAxis.end = new Vertex(0, 100, 0); group.addChild(yAxis); // Create the blue-coloured z-axis with a width of 2 and add it to the group var zAxis:LineSegment = new LineSegment({material:new WireframeMaterial(0x0000FF, {width:2})}); zAxis.start = origin; zAxis.end = new Vertex(0, 0, 100); group.addChild(zAxis); } private function loop(event:Event):void { // rotate the group of objects group.yaw(5); // rotate the sphere sphere.yaw(-10); // Render the 3D scene view.render(); } private function onResize(event:Event):void { view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; } } }
This should produce a scene that is rotated about the y-axis with a sphere that rotates in the opposite direction, also about its y-axis. Click on the image below to see the final result.
As always, lets take a look at the code in more detail. Since there are so many similarities with the previous example I won’t go into detail for everything, just what is new.
Starting with the constructor, you’ll notice that I’ve added a resize listener that calls the method onResize.
private function onResize(event:Event):void { view.x = stage.stageWidth / 2; view.y = stage.stageHeight / 2; } } }
This is used to ensure that if a user resizes the browser or flash player that the View is automatically resized to take up the full stage area. Its not really much of a 3D element of the scene but its important not to forget it!
The rest of the code takes the same form as before: initialise the 3D elements, create the scene and re-render the scene at every new frame. As you’ll see in init3D I’ve modified the camera slightly.
// Create a new camera, passing some initialisation parameters camera = new Camera3D({zoom:15, focus:30, x:100, y:300, z:-200}); camera.lookAt(new Number3D(0, 0, 0));
The camera is now in a different position, but more importantly I’ve added a call to camera.lookAt. Previously the camera was looking directly along the z-axis: now I’ve told it to look at the origin. You can similarly call the functions tilt and pan which (as it says in the code comments for the Camera3D class) is like someone nodding and shaking their head.
Moving on to the scene creation in createScene, I’ve introduced a new element used to group the objects: an ObjectContainer3D.
// Create an object container to group the objects on the scene group = new ObjectContainer3D(); scene.addChild(group);
This object is not itself visible on the scene but allows us to add children to it and translate, rotate and scale these children all together. So, rather than adding each individual object to the scene, they are now added to the group as is, for example, the sphere.
// Create a new sphere object using a wirecolor material var sphereMaterial:WireColorMaterial = new WireColorMaterial(0x5500FF, {wirecolor:0xFF9900}); sphere = new Sphere({material:sphereMaterial, radius:50, segmentsW:10, segmentsH:10}); // Position the sphere and add it to the group sphere.x = -100; group.addChild(sphere);
The lines are similarly added to the group. So that’s the only difference to the scene creation itself (other than the sphere now being a different colour). Now we come to adding the animation.
To add animation we simply need to modify object parameters at each frame and then re-render the scene. As I mentioned before I simple rotate the ObjectContainer3D and the Sphere itself and this is done in the loop function that is called at the start of every new frame.
private function loop(event:Event):void { // rotate the group of objects group.yaw(5); // rotate the sphere sphere.yaw(-10); // Render the 3D scene view.render(); }
As you can see there’s really not much to it: simple rotate the group about its y axis, and the same for the sphere itself. The call the view.render then updates what we see on the screen.
And that’s it! To get a feel for the animation, try changing the yaw method to roll or pitch, or try adding some translation. I’d recommend having a look at the Away3D code to see what else is available - you’ll find that there are a lot of possibilities! Anyway, I hope this has been a useful step in making more interesting 3D scenes in Away3D!
Next article:
- First steps in Away3D : Part 3 - Texture mapping
Create materials using bitmap data with the aim of having more detailed or realistic objects.
Leave a Reply