First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: Colin Maxwell | Website: http://www.maximized.co.uk

A brief note on 3D space.

Before you start creating 3D objects, you should have a basic understanding of 3D space and terminology. In particular you should understand 3D coordinates. The following is a brief explanation, but you may want to investigate this further until you have a better understanding.

A 2 dimensional space is defined by two axes, x and y. Objects are placed at positions on each of these axes (think of placing a ship in a game of Battleships, or coordinates on a map). The point 0,0 is called the origin. An object placed at position 2,3 will be located 2 units to the right of the origin and 3 units up from the origin. Similarly, an object placed at position -4,-2 will be located 4 units to the left of the origin and two units down from the origin. So, coordinates can have both positive and negative values.

3 dimensional space also includes depth, or the z axis. The origin is located at position 0,0,0. An object placed at position 2,3,1 will be located 2 units to the right of the origin, and 3 units up from the origin, and two units back from the origin.

Further explanation of 3D coordinates can be found here http://en.wikipedia.org/wiki/3d_coordinates

Creating your first 3D Model with Flash and Papervision 3D.

This section will go through the process of creating a 3 dimensional object in Flash, using the Papervision 3D classes. The simplest 3D object is a plane - not an aeroplane, but a flat surface. First we'll make a basic plane, then make it rotate in 3D space, then add a material to the plane.

Open Flash and create a new Actionscript 3.0 file.

Select frame 1 in the timeline and open the Actions Panel (F9).

In the Actions Panel, add the following lines of code:

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

These first few lines will be used almost every time you use the Papervision 3D classes. They import the basic classes that make up a 3D scene.

The first line imports the classes for a camera which is used to view the 3D Scene. The camera can be moved and by default is located at a position looking at the origin.

The 2nd line imports the class for a render engine, which is the class that actually draws the 3D objects. We are using the Basic Render Engine here, but there are others which are beyond the scope of this tutorial.

The 3rd line imports the classes for a 3D Scene, which contains all the data within your scene.

the 4th line imports the classes for a 3D Viewport, which is an area in which to draw the 3D scene.

Next we need to import the classes required to draw the objects in our 3D scene. Basic 3D shapes are called primitives - shapes like a plane, cube, sphere, cylinder, etc. In this case we will only import the classes for a plane.

import org.papervision3d.objects.primitives.Plane;

Now that we have imported all the necessary classes, we need to create instances of each of these so that we can use them in our Flash file. Add the following code at the end of the previous code.

var camera:Camera3D = new Camera3D();
var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var viewport:Viewport3D = new Viewport3D(stage.stageWidth,stage.stageHeight);
var plane:Plane = new Plane(null,0,0);

The 1st line creates a 3D camera object called camera.
The 2nd line creates a renderer object called renderer.
The 3rd line creates a 3D scene object called scene..
The 4th line creates a 3D viewport object called viewport. The information between the brackets sets the viewport width and height to match the stage in Flash.
The 5th line creates a plane object called plane. The information in the brackets sets its material to null (no material covering the plane) and the default width and height.

Finally we must make Flash display all of the objects, which is achieved with the following code which must be added at the end of the previous code.

addChild(viewport);
scene.addChild(plane);
renderer.renderScene(scene, camera, viewport);

The previous code adds the viewport to the stage. The plane is then added to the scene and the renderer draws the scene, the camera and the viewport objects.

Test the Flash movie at this point (Ctrl-Enter) or Control - Test Movie and you the result will be a static plane as shown in the screenshot below.

Here is a complete code listing at this stage:

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.primitives.Plane;
var viewport:Viewport3D = new Viewport3D(stage.stageWidth,stage.stageHeight);
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
var renderer:BasicRenderEngine = new BasicRenderEngine();
var plane:Plane = new Plane(null,0,0);
addChild(viewport);
scene.addChild(plane);
renderer.renderScene(scene, camera, viewport);

So far, this isn't very exciting, so we'll add some movement to make it look more 3D.

» Level Intermediate

Added: 2009-07-29
Rating: 9.6 Votes: 5
(10 being the highest)
» Author
Lecturer in Graphic Design at Carnegie College, Scotland. Specializes in interactive media.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.