Guide to Getting Started in Papervision 3D
Building your First Papervision Application
What goes into a Papervision Scene?
At first it can be a little bit overwhelming when looking at the sheer number of classes that come with Papervision. But fear not, these are of no concern to you (yet).
Think of a Papervision world as a movie set, there are actors, props, cameras, costumes, and a ton of other things. You as a director just have to look/ask around to see who and what you need for this particular scene. There are always the basic necessities though: a camera and a stage.
Fortunately, the developers of Papervision thought of that for you and set up some basic classes that you can use to get started with all the necessities in them already; the most common of them being the BasicView.
Setting up the Basics
Let’s start off by taking advantage of the BasicView class by extending it, because BasicView extends Sprite we can make it our document class in Flash.
We will create a main class for our application and call it HelloPapervision.as and enter the following:
-
import org.papervision3d.view.BasicView;
-
public class HelloPapervision extends BasicView {
-
public function HelloPapervision() {
-
trace("hello papervision");
-
}
-
}
-
}
That is all well and good, but it didn’t do anything other than set up a scene and trace a couple things to the output window. So now we will work on adding some content to the scene.
Working with Primitives
The first thing that we need to do is figure out what we want to add, here I will show you how to add some basic shapes (primitives). You can take a look at the documentation for the included primitives here: http://www.papervision3d.org/docs/as3/org/papervision3d/objects/package-detail.html
Adding primitives is simple, it is just like creating an instance of anything else on the stage. You simply import the correct class, create an instance and add it to the scene.
-
import org.papervision3d.objects.primitives.PaperPlane;
-
import org.papervision3d.objects.primitives.Sphere;
-
import org.papervision3d.view.BasicView;
-
-
public class HelloPrimitives extends BasicView {
-
-
// create a sphere and a paper airplane
-
// create these at class level in case they are to be used in other functions later
-
var myFirstSphere:Sphere;
-
var myFirstPlane:PaperPlane;
-
-
public function HelloPrimitives() {
-
-
myFirstSphere = new Sphere();
-
myFirstPlane = new PaperPlane(null, 3);
-
// move the plane in 3d space
-
myFirstPlane.x = 150;
-
myFirstPlane.y = 150;
-
myFirstPlane.z = -50;
-
// add the objects to the Papervision scene
-
scene.addChild(myFirstSphere);
-
scene.addChild(myFirstPlane);
-
// this is an inherited method (onRenderTick) that starts an
-
// enterframe event to render the scene
-
startRendering();
-
}
-
}
-
}
Hopefully this little addition didn’t scare you off. All that I have done is created a Sphere and a Paper Plane, moved the plane and added the items to the scene. Simple, right? But what are shapes without materials? Boring !
Working with Materials
It is possible to get away without using materials on most objects, but it because a very confusing scene if everything is sitting there without proper textures. Papervision allows for numerous types of materials that you can apply to different parts (or all) of your objects. You can take a look at the documentation for the materials here: http://www.papervision3d.org/docs/as3/org/papervision3d/materials/package-detail.html
Creating a material is much like creating a primitive, just instead of adding the material to the scene, you apply it to the object.
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.materials.MovieAssetMaterial;
-
import org.papervision3d.objects.primitives.PaperPlane;
-
import org.papervision3d.objects.primitives.Sphere;
-
import org.papervision3d.view.BasicView;
-
-
public class HelloMaterials extends BasicView {
-
// create a sphere and a paper airplane
-
var myFirstSphere:Sphere;
-
var myFirstPlane:PaperPlane;
-
-
public function HelloMaterials() {
-
// create a movie material for the sphere from the library
-
var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
-
// create a color material for the plane
-
var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
-
// set the properties of the sphere instance
-
// set material, radius and segements
-
myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
-
// set the properties of the paper plane instance
-
// set the material and the scale
-
myFirstPlane = new PaperPlane(planeMaterial, 3);
-
// move the plane in 3d space
-
myFirstPlane.x = 150;
-
myFirstPlane.y = 150;
-
myFirstPlane.z = -50;
-
// add the objects to the Papervision scene
-
scene.addChild(myFirstSphere);
-
scene.addChild(myFirstPlane);
-
// this is an inherited method (onRenderTick) that starts an
-
// enterframe event to render the scene
-
startRendering();
-
}
-
}
-
}
All that we did here was we took what we did in the HelloPrimitives class and brought in a couple of materials. One thing to note is the use of the MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again. You can even compound materials if you want to, but that is beyond the scope of this tutorial.
Playing in 3D Space
So now you know how to create objects and make them look half-way decent. But what about animation? I am sure that you don’t want to stop with static objects on your stage, what a boring movie that would be.
Well, little do you know, you have already started the animation when you wrote startRendering. That told Papervision to call its renderer and renders the scene every frame that passes.
-
import flash.events.Event;
-
import org.papervision3d.materials.ColorMaterial;
-
import org.papervision3d.materials.MovieAssetMaterial;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.objects.primitives.PaperPlane;
-
import org.papervision3d.objects.primitives.Sphere;
-
import org.papervision3d.view.BasicView;
-
-
public class HelloAnimation extends BasicView {
-
-
// move the definitions out here so the whole class can get them
-
private var myFirstSphere:Sphere;
-
private var myFirstPlane:PaperPlane;
-
private var pivotContainer:DisplayObject3D;
-
-
public function HelloAnimation() {
-
// create a movie material for the sphere from the library
-
var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
-
// create a color material for the plane
-
var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
-
planeMaterial.doubleSided = true;
-
// create a sphere and a paper airplane, increase the triangles on the sphere
-
myFirstSphere = new Sphere(sphereMaterial, 100, 12, 12);
-
myFirstPlane = new PaperPlane(planeMaterial, 3);
-
// move the plane in 3d space
-
myFirstPlane.x = 150;
-
myFirstPlane.y = 150;
-
myFirstPlane.z = -50;
-
// set an initial rotation for the plane
-
myFirstPlane.rotationY = -135;
-
// add the sphere to the scene
-
scene.addChild(myFirstSphere);
-
// add a container to use for pivoting the plane rotation
-
pivotContainer = new DisplayObject3D();
-
// add the plane to the container
-
pivotContainer.addChild(myFirstPlane);
-
// add the container to the scene
-
scene.addChild(pivotContainer);
-
// this is an inherited method (onRenderTick) that starts an
-
// enterframe event to render the scene
-
startRendering();
-
}
-
-
override protected function onRenderTick(event:Event = null):void {
-
// rotate the pivot container (will offset the plane rotation)
-
pivotContainer.rotationY += 1;
-
// rotate the sphere
-
myFirstSphere.rotationY -= 1;
-
// make sure that it is calling the renderer
-
super.onRenderTick();
-
}
-
}
-
}
Now things are getting interesting ! Lets break down what happened here. In an attempt to make the paperplane orbit around the sphere, we had to create a container for it to act as a pivot point. To do this, we created a DisplayObject3D (do3d) object in the scene which is basically like a blank MovieClip. The reason we use the do3d is because it is empty but it can have children and maintains properties that we can then animate (just like in this example).
This is our first time using the onRenderTick method. Since the method is protected, we had to override it and we eventually call the super at the end. This method is what that startRendering call starts. It is just an onEnterFrame that tells the renderer to render the scene, overriding and using this method is helpful for many types of animation and interactivity in the Papervision world. We have added two lines of code here that simply rotate our object. Notice that the Plane isn’t listed, but it is animating. That is because it is a child of the pivotContainer and the pivotContainer is set to rotate.











Matthew
If your looking for some tutorials on Papervision you can check out http://hubpages.com/hub/Papervision-3D-programming-tutorial-Depth-of-Field and http://hubpages.com/hub/Papvervision-3D-programming-tutorial-Casting-Shadows
chris
nice article. it has been a huge help in getting me going. thanks for taking the time to write it.
KS
The latest SVN branch is http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/
kkx
Thank you very much!
XIII
after setting up the primitives, i dont see any objects when i test the movie, just background without anything objects.
i script and import onto the main FLA, what did i missed? O_o
raj
Hi,
I am a beginner who just started learning papervision3D. I am using Flex builder for it.
So far I found your article very nice until I encountered the statement, “One thing to note is the use of the MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again”.
Could you please tell me or point me to a tutorial which describes how to create a MovieClip in the Flash Library and export it for actionscript (linkage).
Marc Pellland
In flex i believe that you can just use the [Embed] metatag and point it to a swf. Give it an id and then use that as a movieassetmaterial, take a look here: http://www.bit-101.com/blog/?p=853.
tim
Super helpful tutorial. Thanks Matthew.
When I try to compile HelloMaterials.as in Flex Builder 3 using [Embed(source="spheremat1.swf", symbol='spheremat')] to give sphereMaterial a texture i keep getting this in the Problems panel:
“An Embed variable must not have an existing value.”
Lauri
Just a little thing I noticed:
I checked out revision 876 today and tryed these tutorials with flash cs4 and I had to add opacity to this line to make it work:
var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11, 100);
pickvance
Yes! in this line:
var planeMaterial:ColorMaterial = new ColorMaterial(0×55FF11);
I have the same error… why??
1084: Error de sintaxis: se esperaba rightparen antes de 55.
Marc Pelland
very odd errors with the materials because the constructor doesn’t even require a color. it is provided with a default:
public function ColorMaterial( color:Number=0xFF00FF, alpha:Number = 1, interactive:Boolean = false )
unfortunately I don’t have a copy of CS4 but i might be able to play around tonight to see if i can reproduce the issue
tim
Marc,
Is there a way to make it work with CS3 using an external swf for assets, like so:
[Embed(source="assets.swf", symbol="sphereMaterial")]
var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial(“sphereMaterial”);
Marc Pellland
using an external file is done with the BitmapFileMaterial for images or the asset material with a swf. but you have to properly load it in. the embed tag that you are showing there is a flex meta tag that isn’t valid in CS3. you could just use a loader in cs3 and reference that movie once it has finished loading.
yukimi
Hi Marc, I’m using papervision3d and flash cs3. How do I add a swf as an object/movieclip (just like any other primitives – sphere, cube, etc)? And I want this swf object appear at a highest index (so that it appears at the front)? Please advise. Thanks.
Paul
Thank you for your website and the tutorials Marc
, now all I have to do is learn Flash, Actionscript3 and Papervision3D
Porly G
Danny
Marc,
I am going to keep working on this my self, but in case you have any insight, I get the following error when publishing HelloMaterials:
INFO: Papervision3D 2.0.0 (March 12th, 2009)
INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode.
ReferenceError: Error #1065: Variable sphereMaterial is not defined.
at global/flash.utils::getDefinitionByName()
at org.papervision3d.materials::MovieAssetMaterial/createMovie()
at org.papervision3d.materials::MovieAssetMaterial/set texture()
at org.papervision3d.materials::MovieAssetMaterial()
at HelloAnimation()
I’ve never seen a MovieClip referred to as a Class before. Is there a Script that goes with the MovieAssetMaterial MovieClip?
Danny
Figured this part out:
The Linkage to the empty MovieClip should be sphereMaterial… NOT MovieAssetMaterial
Marc Pellland
Hey Danny,
you have lost me. sphereMaterial is the linkage name of the movieclip in the library. I am applying it as a MovieAssetMaterial
Joe
Hello Marc !
Thank you a lot for this tutorial.
After lots of research on the web, I can’t fix my problem :
I Create a FLA files with HelloPapervision.as as Document CLASS, and I have my HelloPapervision.as with the first simple code.
When I extends BasiView, the flash compiler say :
TriangleMaterial.as, line 24 :
1020: Method marked override must override another method.
Is it the good way to lunch the application ?
Thank you for you help …
I still continue to search my nut
Joe
Ok it’s work … it was the mess in my org folder… sorry !!
Let’s go
Roberto
Hi! A very nice job!!
But if you cancel the rotationY of sphere and container in the overrided function in the “Controlling Objects with the Mouse” section, it will be better…
Bye!
Jay
Very nice tutorials. Please, keep’em coming!! =)
Armel
You’re so GOOD.
It works properly! Thanx
hackdan
Cool anybody knows how import or parse collada with animation and run it in PV3d ?
Krodil
Hey.. nice work..
I get the cam feed and such, but when I run I get error
1017: the definition of base class ObjectContainer3D was not found..
Any help…
AlexG
I tried this code with Papervision 2 and it gives me a huge error in Papervision 2 code.
The Papervision version is Papervision3D_2.1.920
there about 20 compiler errors for package org.papervision3d.objects.parsers.Max3DS
like this one:
” 1178: Attempted access of inaccessible property _textureExtensionReplacements through a reference with static type org.papervision3d.objects.parsers:Max3DS. ”
also compiler errors for few more classes.
I took a look at the code, and I saw that some variables are declared later than they are used, for example in the class
org.papervision3d.objects.parsers.Max3DS ,
the variable
private var _textureExtensionReplacements:Object;
is declared in line 636, but the compiler error is in the line 41 – “1178: Attempted access of inaccessible property _textureExtensionReplacements through a reference with static type org.papervision3d.objects.parsers:Max3DS.”
I had this mistake in my work but PV3D2 developers knows better. Maybe I should contact them? Does anyone use PV3D 2 ? WHat results do you get?
ClubPenguin
MovieAssetMaterial, for this I had to create a MovieClip in the Flash library and export it for actionscript (Linkage). Once defined, the materials can be used on any object, over and over again”.
authentic nikes
Thanks for the introduction! I am always reading your blog and only today I have spotted the post with introduction! I am one hundred percent sure that Jodi is cool as other members are.
stretch marks
Such an interesting post never had any of this informative blog till now. I might suggest my friends to visit here too.
skin moles
This a nice tutorial and very detailed with matching table of contents. I like the way you elaborated each step since it is easy to follow. Even if those people who don’t have enough knowledge about programing would have an ease to follow each step.
Monster Energy hats
Thanks for sharing!
Air Max 90 pas cher
Many thanks to the person who made this post, this was very informative for me. Please continue this awesome work. Sincerely…
The article is very well!
Nike Shox
Very good post. Made me realize I was totally wrong about this issue. I figure that one learns something new everyday. Mrs Right learned her lesson! Nice, informative website by the way.
cute love quotes
i dont see any objects when i test the movie, just background without anything objects.
ipad cover
Nice topic and post, as we were just talking about what things can happen in the medicine industry.
copy games
This design is incredible! You definitely know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really loved what you had to say, and more than that, how you presented it. Too cool!
NFL Hats
I took a look at the code, and I saw that some variables are declared later than they are used, for example in the class
news articles
Thank you for this article. That’s all I can say. You most definitely have made this blog into something special. You clearly know what you are doing, you’ve covered so many bases.Thanks!
nameman
Very good an article details write very in place thanks for sharing
funny quotes
Really valuable written content. the information that you shown is amazing and many prominently i liked the way you provided things here.
pirates of Caribbean 4
you have lost me. sphereMaterial is the linkage name of the movieclip in the library. I am applying it as a MovieAssetMaterial
ebook library
A great post, thanks for taking the time to share, continued success to your site in the future! GOOD Work!!
Careprost
Hi there,
Really nice job,There are many people searching about that now they will find enough sources by your tips.
Also looking forward for more tips about that
2010 Jordan Shoes
thank you very Retrojordansbuy.com.
2010 Jordan Shoes
A great post, thanks for taking the time to share, continued success to your site in the future! GOOD Work!!
MUHAMMAD Junaid
Hi, I want to develop web based 3d Virtual book Shop/store(website)
as my BS-Software Engineering final year project
Basic scenario that the shop must be capable of is as follow
The Shop is as it is physically , the online customer will go to the shop website when the user entered the URL of website the website opens and ask for MALE OR FEMALE—when the customer select one it will enter in the shop(A BOOK STORE IN MY MIND) with the selected MALE OR FEMALE character/AVATAR—now he is allowed freely to move in the shop and interact freely with different products (preview the books ,Cdz and other media available) and add to cart and at the end SHOP I/ Pay for it
I want another functionality i.e online users that currently on that webpage are also visible to the other user on that website
THE ADMIN PANEL WILL ALLOW ME TO Customize the web content if it is going to deploy for another shop some how like this
What SHOULD I NEED/USE
Flash, Google O3d , WebGL , Java3d ,X3D ,VRML , Unity3D , Infinity or etc…etc
HTML 5 …??? Support or Help me ??? paper Vision ???
I need Help about Technologies/platforms/languages should and shouldn’t
I NEED A GUIDANCE for it
I need help regarding it . .ALSO IF YOU KNOW any 1 having experience or knowledge about it that will help me please sent his/her EMAIL ID so that I contact him or Forward my Email or Refer me
I’ll Be very thankful to you
BEST REGARDS
MUHAMMAD Junaid
ゼチーア
Great tips, I would like to join your blog anyway
MarcPelland
Hi Junaid,
That sounds like a plausible site, with the exception of being able to see everyone else that is in the store as well.. I would limit that to a couple people, just to keep the complexity down.
If you were to consider it in Flash (3d), I would recommend building with the latest (Molehill) version of a 3d engine. The engine that you use is up to you, I have been playing around mostly with Alternativa and Away 3D but have seen good things with Flash and Yogurt. I don’t really know enough about the rest of the 3d technologies to give much advice with them, but if you are focusing on a website and don’t want to restrict people who are coming to your site, then i would suggest Flash.