Three-dimensional Flash engine - Papervision3D. How and with what it is eaten

Papervision3D is a class library for ActionScript 3.0 that allows you to create full-fledged 3D flash movies.
Thus, the user is not required to download any alternative plug-ins (as was the case with VRML , for example), except for the Flash Player itself.

So, what makes Papervision3D:
')
- Add embedded primitives to the flash movie: Plane, Sphere, Cylinder, Cone, Cube, Paperplane, Arrow
- Import models created in 3D-editors, along with animation.
- Apply uniform colors, bitmaps, movie clips and even streaming video to objects as materials
- Use light sources
- Impose built-in flash filters (Blur, Glow, etc.) on 3D objects
- Manage individual vertices and faces of objects. Example
- Assign event handlers to 3D objects and materials (click, mouse hover, etc.)

Do not forget that Papervision3D is demanding of user resources, so you should not download a movie with a large number of models and stick to the maximum number of facets 3000

In this review article I want to tell a little about the engine itself and show its use, using the example of creating a rotating sphere. It is assumed that the reader is familiar with the basics of programming in ActionScript 3.0

Install Papervision3D

So, download and install the latest version of the library from here.
The article used the Papervision3D version 2.1.932 and the engine is periodically updated, some things are added and changed, then for full compatibility you can download this version here

I use one global folder to store all classes, so the installation is to copy the contents of the archive into this folder:



Then in the flash settings I added the path to this global folder with classes:



Thus, I do not have to copy additional classes to the folder with each new project (of course, unless I need to send the source code to someone)

Theory

Before proceeding directly to the code, let's look at the theory to understand how Papervision3D works.

As you know, the flash uses a two-dimensional space and a left-handed Cartesian coordinate system (“Left-handed cartesian coordinate system”) - this is when the origin of coordinates starts in the upper left corner of the screen, i.e. the higher the “Y” value, the lower the object is located on the stage, and the higher the “X” coordinate, the more to the right:



In Papervision3D, the space is three-dimensional, which means a new coordinate is added - “Z”. And the entire report starts from the middle of the screen, though unlike, for example, from 3dsmax, the “Y” coordinate is responsible for the “height”, and “Z”, for the “depth”:



So, each of our new project in Papervision3D consists of the following parts:
1. Scene - a container in which all our objects are located.
2. Camera - “eyes” with which we look at the scene (by default, it is located at the coordinates x: 0, y: 0, z: -1000)
3. Viewport - a projection window through which our scene is visible. You can draw an analogy with 3dsmax, in which there are 4 projection windows: "Top", "Left", "Front" and "Perspective"
4. Objects - actually what we see on the stage - 3D objects - primitives (Plane, Sphere, Cube, etc.) or downloadable models created in 3D packages (in Papervision3D known as ASCollada Object)
5. Materials - textures that are superimposed on our 3D objects (WireframeMaterial, ColorMaterial, MovieMaterial, etc.)
6. Render Engine - the engine that draws our objects on the scene.

Incidentally, the rendering process consists of three stages: initialization (definition of the scene, cameras, objects, etc.), projection (the location of the vertices of the objects so that we see them three-dimensional on a two-dimensional plane) and the actual drawing itself (connecting the vertices between themselves and “stretching” the materials on the object). All this fascinating process is called “Rendering pipeline”

I think the theory is enough for this. So let's move on to practice :)

Practice

To get started, we need to initialize the engine: add a scene, a viewport, a camera, a rendering engine.
But every time to create the same standard objects for too long, so the developers have provided the BasicView class, in which the objects we need are created. To use it, it is enough to create our new class through the extension of the class BasicView. In general, it looks like this:

package {
import flash.events.Event;

import org.papervision3d.view.BasicView;

public class PV3DClass extends BasicView {

public function PV3DClass() {

stage.frameRate = 40;
init();
startRendering();

}

private function init(): void {
// 3D
}

override protected function onRenderTick(e:Event= null ): void {
// ENTER_FRAME
super.onRenderTick();
}

}
}

* This source code was highlighted with Source Code Highlighter .

I saved this class as a snippet and when I create a new file I simply copy it, replacing the class and constructor names. The snippet box can be downloaded from here for Flash CS4 theflashblog.com/?p=771 , for Flash CS3: theflashblog.com/?p=346

Now we have everything to add our first 3D object. In this article, we simply create a sphere and make it rotate around the X and Y axes.

The constructor for creating a sphere looks like this:
Sphere (material: MaterialObject3D = null, radius: Number = 100, segmentsW: int = 8, segmentsH: int = 6)
material - the material with which our sphere will be covered. If you leave null, which we will do in our example, the standard material WireframeMaterial will be used
radius - the radius of our sphere
segmentsW - the number of horizontal segments
segmentsH - the number of segments vertically

So, our updated class looks like this (new lines in bold):

package {
import flash.events.Event;

import org.papervision3d.view.BasicView;
// , :
import org.papervision3d.objects.primitives.Sphere;

public class FirstPV3D extends BasicView {
// :
private var sphere:Sphere;

public function FirstPV3D() {

stage.frameRate=40;
init();
startRendering();

}

private function init(): void {
// 300px:
sphere = new Sphere( null , 300);
// :
scene.addChild(sphere);
}

override protected function onRenderTick(e:Event= null ): void {
// X, Y:
sphere.localRotationY++;
sphere.localRotationX++;

super.onRenderTick();
}
}
}

* This source code was highlighted with Source Code Highlighter .

We test the video and get our sphere:

Conclusion

Well, it seems to be all about the basics. I myself am in the process of studying this engine and experimenting with it, and I hope that with this article I will encourage you to study this topic, because it opens up great opportunities for us on the web.

Sources of this flash drive here ( mirror )

And lastly links:

Papervision3D page on Google Code
Documentation ( mirror )
Official blog engine
John Lindquist Blog on Papervision3D

Flash Gallery using Papervision3D:
www.papervisionshowcase.com
dailypv3d.wordpress.com

Read about Papervision3D:
Book " Papervision3D Essentials " by Paul Tondeur and Jeff Winder
Articles on InsideRIA

Follow me on twitter