Away3D Basics 5 - Primitives (Part 2)
In this tutorial, we keep exploring the simple but very useful primitives available in Away3D. As in the former tutorial, we also have some code that shows you how to use them beyond the basics. Now you'll learn how to build simple panorama viewers by combining the Sphere and Skybox primitives with a hovering camera and we'll also take a look at a cross platform software that can help you create the panoramas.
In this tutorial we'll start off with two very basic primitives and then look at some more complex ones that you can use to create panorama viewers.
Prerequisites
This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. All of these examples require the file Cover.as. This file is used with the tutorials to prevent your machine from locking up as it tries to display many Flash files at once. If you are uncertain about how to use the sample Class files provided, check out this tutorial.
Some of the examples in this tutorial use textures. We'll look closer at Textures and materials in a separate tutorial, but if you want to make the source files work with Flash CS3/CS3, read this tutorial first.
The Trident
Need to make it clear how things are displayed in 3D space? Add a Trident. The trident is a very simple primitive that will show the x,y and z axes in your scene. It's very lightweight and great for debugging a complex scene setup. If you wonder how a loaded model is rotated, adding a trident to it will make it much easier to see how thing relate to each other. Click and drag on the example below to see how the Trident makes it easier to see woh the three spheres are placed in 3D space.
movie: Triaxe.as
Here's how you create a Trident with the default parameters:
var axis:Trident = new Trident();
view.scene.addChild(axis);
The Trident constructor will take two optional parameters, length of each axis and if the letter (x,y,z) for each axis shall be shown.
var axis:Trident = new Trident(200,true);
The code above will make a new Trident where the lines for each axis is 200 units long and with letters for each axis showing. Note that the Trident does not allow you to adjust length/letters after it's been created. This deviates from other Away3D primitives.
In the example above, we got four views displaying the same scene. The scene in this example is simple, but the Trident makes it easy to see how the camera is set for each of the four views.
The RegularPolygon
The RegularPolygon could also be called Disc since this is what it effectively is. Just as the Plane, it has no depth so when you set it's resolution, you just specify the number of sides and the radius of the disc.
polygon = new RegularPolygon({radius:200,sides:3});
view.scene.addChild(polygon);
The number of sides can be set to any number higher than 2. Use the movie below to experiment with the settings.
If the texture you use on the polygon is distorted, you can also increase the subdivision of it:
polygon.subdivision = 3;
This will subdivide each of the triangles into 3. Download the source file above and add the subdivision parameter to see how it works.
The Sphere
A Cube requires only 12 triangles to be displayed. The Sphere is a much more complex object. To create a Sphere you'll need many more. How many triangles you use will decide the visual fidelity of the sphere. By default, Away3D will use a low number. To make the Sphere appear round, you'll need to set the parameters segmentsW and segmentsH.
movie: SphereTri.as
Click the plus and minus buttons to increase/decrease the number of triangles the sphere is built of.
Every sphere also has a radius, so to create a Sphere, we will usually need these parameters:
var sphere:Sphere = new Sphere({radius:50,segmentsW:10,segmentsH:10});
We can also set these directly on the object, just as with with other primitives:
var sphere:Sphere = new Sphere();
sphere.radius = 50;
sphere.segmentsW = 10;
sphere.segmentsH = 10;
You can also use the yUp-property to change the orientation of the sphere.
sphere.yUp = false;
This will make the Sphere orient so that you see the top of the sphere facing you. Now you can make a Sphere, but what if you go inside it? By positioning a HoverCamera3D inside a Sphere and looking at the sphere from the inside, you have effectively created a Spherical Panorama viewer. To view an Object from the inside you'll need to use another function that is available to all the primitives that is called invertFaces.
sphere.invertFaces();
This will flip the texture so that it's only visible from the inside of an object. Here's how this will work.
Saint Germain en Laye church. The panorama image used here was created by Seb Przd and is distributed under the CC ByNcSa 2.0 license. Seb's done some really cool panoramas, so check out his Flickr account.
Play with the zoom and look up/down in this example for some interesting effects. Remember that if you need an object to be visible from both the inside and outside, you must set the bothSides property.
sphere.bothsides = true;
Now you've seen how to use a Sphere to create a Spherical panorama viewer. Another popular Panorama format are Cubic panoramas and Away3D has two primitives for this exact purpose.
The Skybox and Skybox6
The Skybox and Skybox6 are really just huge Cube's that have been "rigged" to be used for panoramas. The difference between the two is that Skybox will let you specify 6 separate images, whereas Skybox6 takes a single image in a predefined format of 3 by 2 squares. To create a Skybox, you provide it with a material like this:
var mat:BitmapMaterial = new BitmapMaterial( (new texture() as Bitmap).bitmapData );
largeCube = new Skybox6(mat);
If you were using the ordinary SkyBox primitive, you'd create six separate materials and use this syntax:
largeCube = new Skybox(frontMaterial,leftMaterial,backMaterial,rightMaterial,upMaterial,downMaterial);
Below you can see a panorama based on SkyBox6.
When you look at the source code, note this line:
largeCube.quarterFaces();
This will subdivide the faces of our Skybox so it consists of more triangles. Unless we did this, you would see artifacts in the texture as you rotated. This method is available for all the primitives as well as loaded models. The advantage of using Skybox'es rather than a Sphere for Panoramas is that the Skybox is made of less triangles. this makes them a little more effective, but it also introduces a little distortion. Most people won't notice this, but for high fidelity panoramas, you'll want to use a Sphere along with a bag of tricks to make it almost as efficient as the cube.
So it's easy then? You just make six images and you're ready to go? Not really. The images will need a very special distortion applied to them for this to become seamless. The Skybox6 texture should look something like this. If the image looks different, your Skybox6 won't look as intended.
So how do you go about making 3x2 images? There are lots of software that makes Spherical panorama images, but this 3x2 format is a little more exotic. While researching this article, I came across a nice priced software called Pano2vr that is cross platform (Win / Mac / Linux) that does a great job at converting panoramas from one panoramic format to another based on 16 different formats. It exports to QuickTime, bitmaps or event Flash. The Flash export option is complete with SWF, images and HTML and you can set hotspots in the panoramas as well. A single user license is 59 Euro (appr $107) so it's not exactly expensive for what it provides and the quality of the conversions are really good. The panorama image above was created using the trial version, so it has some watermarks in it. The full version creates non-watermarked images.