Login | Register
Away3D 4 Basics - The View and the Scene

Away3D 4 Basics - 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 does however not mean that it acts as a DisplayObject. Since Away3D from version 4 and up are using Stage3D, all DisplayObjects in Flash will layer on top of it. In other words - you cannot place any graphics behind your 3D scene. This is usually not a problem though and if it's critical, you can just add that object to the 3D scene and stack it there.

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. You can adjust the size of the view by setting the x, y, width and height properties like this:

var view:View3D = new View3D();
view.x = 100;
view.y = 100;
view.width = 200;
view.height = 200;
view.backgroundColor = 0x336600;

You can also set the background color (as seen above) as well as a background image (view.background) and the alpha (view.backgroundAlpha).

Caution: setting the z position or rotation or scale along X/Y/Z has no effect even though modern tools like Flash Builder, FlashDevelop and IntelliJ will tell you that these exist. The same goes for many other methods inherited from the Sprite object such as addChild (that will actually crash your movie is you use it), so stick to the properties mentioned above.

By using the position and size properties on multiple Views, we can view the same scene from multiple angles. In the example below, we have four View3D's looking at the same Scene:

This content requires Flash Player 11 (or a more recent version). You need to upgrade your Flash Player

movie: MultipleViews_v4.as MultipleViewsView_v4.as

Every view comes with a default Scene and Camera. You can change / remove the defaults by setting the view.camera or view.scene properties, just as we do in the example above.

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

view.render();

You will 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.  With the transition to Stage3D, there is less of a limit on how often you can call the render-command, especially for simple things like these tutorials. However, if you are building complex scenes with many thousand polygons, you should look carefully at how many frames per second your movie is able to achieve - especially on older machines.

To save some typing and follow general Object Oriented practice, we've created the View as a separate class in the example above. 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  MultipleViewsView_v4.as instance.

Antialiasing

A brand new setting in version 4 is antiAliasing:

view.antiAlias = 4;

If you don't specify an antiAlias setting, the default setting of Zero will be used. You have probably already seen examples of Stage3D that looked "blocky", so do remember to set this. Values of 0, 2, 4 and 16 are valid settings. You can see the difference between 0 and 4 in the picture below (2x zoom on a rotated cube).

In general, a higher setting will require more from the graphics card but from what we've tested, it's little to none difference for normal scenes when using a setting of 4. For Stage3D on mobile, antaliasing is always off no matter what you set the property to.

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();

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();
view.scene =  myScene;

This is what we did in the example above showing multiple views of the same Scene3D, 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 group several objects together so you can move them together as well as separately.

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

var mySphere:SphereGeometry = new SphereGeometry( 100 );

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 );

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);

While the Scene3D object has the addChild and removeChild methods, it's not a DisplayObject. This means that you cannot move, rotate or scale it as you could in Away3D 3. You can also listen for changes to the scene and mouse clicks using EventListeners. 

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.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by lucidbard on 03/13 at 04:01 AM

Thanks for the update to this gerat tutorial!

Do you have any advice on rendering two (or more) views on iOs with AIR 3.2? It apparently throws an error saying only one Stage3D instance is allowed. Is there a trick?


Posted by Jens C Brynildsen on 03/17 at 01:23 AM

@lucidbard As far as I know, this is a limitation imposed by the platform, so I don’t think it’s doable. I’m sure they would allow it if it was feasible.

J

Submit a comment

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