Flash Papervision3D tutorial

Draft

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

This is part of the Flash tutorials

Introduction

Learning goals

• Create a simple 3D scene with Papervison3D (PV3D)
• The objective is to show the logic of such a library. Once you are done with this you will have to spend of few weeks going through real tutorials and the documentation...

Flash and Papervision3D level

• Flash 9 / CS3
• Papervision 2.0

Prerequisites

• Some ActionScript knowledge, e.g.

Moving on

Level and target population

• Absolute beginners

Quality

Download and install

Download

In nov 2008, Papervision 3D can be downloaded from the SVN repository (read the Revision control system tutorial)

The subversion URL can change, e.g.

http://papervision3d.googlecode.com/svn/trunk/as3/trunk/ (nov 2008)

http://papervision3d.googlecode.com/svn/trunk/ (before)

So create a new directory somewhere. On windows you can use a GUI client like like, under Linux go to the new directory and type:

subversion checkout http://papervision3d.googlecode.com/svn/trunk/as3/trunk/

You then should have a directory "trunk" with a sub-directory structure like this:

bin
build
docs
examples
src
.svn

CS3 setup

• CS3 must be able to find this library in a classpath. Read Flash using ActionScript libraries tutorial if you want to learn more about this. Otherwise, just follow precisely these instructions.
• Open the File->Publish Settings - Flash tab
• Then click on the Settings ... button next to the ActionScript version.
• Click on the "target"/"Browse to Path" icon and select the "src" directory of the Papervison library in your computer.

E.g. I keep the subversion tree on my Linux machine, but I copied the trunk directory to my laptop and renamed it. I added this classpath:

c:\lib\pv3d\src

On your PC you may have something like that:

s:\flash\pv3d\trunk\src

The only thing that really matters is that Flash can find the contents of the "src" directory

An introductory example

Some more explanation should be added sometimes. For now all the help is in the code :)

A simple CS3 timeline script

If you look at pv3d examples on the web they all assume that you program with a class structure and external ActionScript files. Here we first show how to use pv3d in a simple timeline script. Of course, it doesn't do anything of interest. Look at this rotating cube

To make this example work you need a correctly configured classpath (as above). The just copy paste this code into a frame of your time line (e.g. frame 1 of layer 1). In the example we also added a layer with a background and a layer with a credits button. You won't need these.

An object's position in Papervision is defined by x, y, and z and pitch, yaw, roll. In addition it can be scaled or otherwise transformed.

Coordinates in 3D systems are defined as follows:

Coordinates in 3D vector graphics

Papervision positions in space are defined with these x-y-z coordinates:

• x axis = Width, i.e. left(-) to right(+)
• y axis = Height, i.e. down(-) to up(+)
• z axis = Depth, i.e. close/forward (-) to far/backward (+)
• z axis = Depth, i.e. close/forward (+) to far/backward (-) (z-axis comes out of the screen)

In most other systems, e.g. X3D, the z-axis is inverted:

• z axis = Depth, i.e. close/forward (-) to far/backward (+) (z-axis goes into the screen)

You can picture the "normal" 3D coordinate system with the right hand rule: "x" is your thumb, "y" the index finger, and "z" the middle finger.

The right hand rule in X3D vector graphics, you have to rotate your hand forward for Papervision or think of a left hand system ;)

Orientation of an object is defined by "yaw", "pitch" and "roll". Imagine what a ship can do:

• Yaw is left-right orientation. Imagine turning your head or your body around to look at something. "The ship can't hold its track."
• Pitch is backwards-forwards up/down orientation. "The ship goes straight into big waves."
• Roll is left-right up/down orientation. "The ship is hit on the side by big waves."

Therefore, in 3-D graphics there are six degrees of freedom: 3 positions (x,y,z) plus yaw (around the y axis ), pitch (around the x axis) and roll (around the z axis)

For objects to be seen, they need to have a visible material, be placed in the scene and rendered from a camera that looks at them.

Source

• simple-noclass-pv3d.fla
• Directory: http://tecfa.unige.ch/guides/flash/ex/pv3d/

Links

General

• PaperVision3D (PV3D) home page
• Papervision 3D blog. Includes all the information (downloads, tutorials, links, etc.)
• PV3World. Testing ground, tutorial and other resources.
• Papervision 3D downloads (at google code). There is also a CS3 component for version 1.5 made in 2007, Current (nov 2008) version is 3.0.
• Papervision3D documentation (Packages and classes)

Examples

• Examples (Papervision3D Wiki)
• 'Papervision' Category, Meandering thoughts

Tutorials

• pv3d.org
• Papervision 3D Tutorials and Papervision3D Tutorials in Flex3
• Papervision 2
• Papervision tutorials at Bright Hub.