Away3D Basics 2 - The View and the Scene

When you look out through a window in your house, you only see what is visible from your point of view, not what is occluded by the walls. The viewable area is decided by the size and shape of the window, so you'll see a "cropped" view of what's outside. This is exactly how the View works in Away3D as well. It is the "window" that we view our 3D world through.

No matter what you want to do in Away3D, there's some things that you'll always need to set up. The "Basic" tutorials will explain the Scene, View, Camera, Primitives, Textures and explore some of the possibilities. Each example in the series will be organized as Actionscript Classes so they can be used in both Flash and Flex.

If you are new to 3D on computers, you might want to read our introduction that explains the core 3D concepts. This tutorial also contains the source for 6 other Away3D projects that may be worth checking out. To run the example files, you will first need to set up Away3D on your computer. When you have the Away3D source files and your software is set up, you can open, explore and export the examples in this tutorial by just placing them in your project directory.

To see your 3D content, we need two things. A Viewport (View) and a Scene. This tutorial explains how to use these.

The View

The name of the View class in Away3D is View3D. To create a new View, we use this code:

var view:View3D = new View3D();
addChild(view)

Note that the view is added to the stage like any other display object in Flash. This means that you can stack things both behind and above the view using the methods you are already used to in Actionscript.

By default, the View is not cropped in any way. It fills the entire Flash movie, so the size of your Flash movie is effectively the size of the View. Classic television has an aspect ratio of 4:3 (width:height). New High Definition TVs use the 16:9 aspect ratio. By changing the width and height of your movie, you also decide the size and aspect of the output image as well.

You should be aware that even if the View3D class extends the Sprite class, it does not implement methods for setting width and height properties. The Flex contextual help will tell you that these properties exist, but since they're not (currently) implemented, they have no effect. You can set these as much as you want, but the View will always fill the width of your SWF. You can easily get around this by setting the "clipping" property (explained later).

You can also set the x and y position of your view, but this is a major point of confusion to those new to Away3D. Setting the x/y of the view not only moves the View on the stage, but it also changes the coordinate system inside your View. To avoid any problems, you should always set the x and y properties to the half of your View's width/height. Our example movies here on Flashmagazine are 465 by 400 pixels. To make sure the View is always centered, we use the following parameters when creating our View3D:

var view:View3D = new View3D({x:232, y:200});

You can also set these properties after creating the View:

var view:View3D = new View3D();
view.x = 232;
view.y = 200;

As mentioned initially, every view comes with a default Scene and Camera. You can change these in the same way, either passing them in the constructor or setting them later.

Nothing will be displayed in the View until you tell it to update using the render() method:

view.render();

You typically call this command from within an EnterFrame or Timer handler. Be careful though. If you set your movie to update too often (too short Timer interval or too high Framerate) the result will actually be reduced performance/speed. There's no precise way to do this so it may require a little testing to get it optimal on all machines. As a general rule, keep things at "normal" speeds such as 25 or 30 fps. This is enough for most purposes.

Setting "view.clipping" is effectively the same as setting the width and height of the view would have done (if implemented). By using this property on multiple Views, we can view the same scene from multiple angles:

movie: ExMultipleViews.as ExMultipleViews_view.as

To save some typing and follow general Object Oriented practice, we've created the View as a separate class. The Scene is created in the main class so we can pass it as a parameter to the four View's. This way, they can all show the same scene, but from different angles just as a 3D modeling software would. To get more View's, we just create a new Basic02_view instance.

This movie employs a trick to work around the x/y problem of the View3D class. Each of the views are placed inside a Sprite. We use the Sprite for the positioning so that we can keep the correct x/y properties for the View3D (half of viewport width/height). Note how this affects the clipping rectangle as well (see Basic02_view.as). Another trick that can be useful is to split complex scenes into several views, one for the background, one for the main models and maybe more. That way, you more or less have Layers just as in Flash.

The Scene

The Scene works just like the Stage in Flash. Anything on the Scene can be displayed to the user and manipulated. Before you can use the scene, you must create it. You can do this two ways. The simplest is just to use the Default scene that comes with every view.

var view:View3D = new View3D({x:232, y:200});

This will create a new View with a Scene. You can access the scene using "view.scene". You can also create a scene and then pass that Scene to the view.

var myScene:Scene3D = new Scene3D;
var view:View3D = new View3D({x:232, y:200, scene:myScene});

This is what we did in the example above showing multiple views of the same Scene, allowing multiple views to use the same Scene. This also makes for little less typing since you can reference the scene using the "myScene" variable directly rather than "view.scene".

Once you have your Scene in place, you'll want to add content to it. 3D objects in Away3D are either attached to the Scene or an ObjectContainer3D that is already/later put on the Scene. ObjectContainer3D allows you to attach several objects together so you can move them together as a group as well as separately.

To place an object on the Scene, we must create it first. Let's create a Sphere with a radius of 50:

var mySphere:Sphere = new Sphere({radius:50});

Just as with DisplayObject's in Flash, 3D objects can be created without being added to the DisplayList. To make our Sphere visible, we have to add it to the stage using the addChild method. If we used the Default view, we'll do it this way:

view.scene.addChild(mySphere);

If we want to add this to the custom scene we created earlier, we do it this way:

myScene.addChild(mySphere);

The Scene works just as all other 3D Objects in Away3D, meaning that you can move it around, rotate and scale it. If you want to remove an Object from the Scene, you use the removeChild method as you would for MovieClips or other DisplayObjects in Flash:

myScene.removeChild(mySphere);

You can also listen for changes to the scene and mouse clicks using EventListeners. You apply and remove these just as you would do to any other DisplayObject in Flash:

myScene.addEventListener(Object3DEvent.SCENECHANGED,someFunction);
myScene.removeEventListener(Object3DEvent.SCENECHANGED,someFunction);

This is just about all you need to know about the Scene since it's so simple in use. Just treat the Scene as you would with the Stage in Flash and you are ready to go. Next up - Cameras in Away3D.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

 

Comments

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

Submit a comment

Only registered members can comment. Click here to login or here to register