Guide to Getting Started in Papervision 3D
Add Interactivity
Controlling Objects with the Mouse
Mouse interactivity is a must when it comes to web pages, so I had to include a little bit about that functionality in a basic tutorial.
By default, mouse interactivity isn’t enabled in any aspect of Papervision. This is because it takes up processor time which doesn’t need to be taken up.
There are several different types of interactivity and we will start with having the scene detect the mouse position and have that control the camera.
-
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 HelloInteractivity 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 HelloInteractivity() {
-
// 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;
-
// get the rotation values for the camera based on where the mouse is in the scene
-
var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
-
var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
-
// set the camera's position
-
camera.x -= (rotX + camera.x) / 10;
-
camera.y -= (rotY + camera.y) / 10;
-
// make sure that it is calling the renderer
-
super.onRenderTick();
-
}
-
}
-
}
If you compare this script with the animation script you will notice that the constructor has not changed at all yet it is able to interact with the mouse now. What we added was in the enterframe (onRenderTick) function. All that it does is get the position of the mouse on the stage and move the camera based on that position. The equation looks more complicated than that, but that is basically what it does.
There are a ton of ways that you can use this in your applications, maybe adding a keyboard listener to let the user control the camera and have the mouse control the camera’s rotation. If you have ever seen a first person shooter, that is basically how it functions.
Making Objects Interactive
Another type of interactivity is when you want to actually interact with an object itself. Once again, this functionality is not enabled by default but can easily be enabled and used in Papervision.
-
import flash.events.Event;
-
import org.papervision3d.events.InteractiveScene3DEvent;
-
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 HelloClickability 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 HelloClickability() {
-
// call the super to turn on interactivity
-
super(0, 0, true, true);
-
// create a movie material for the sphere from the library
-
var sphereMaterial:MovieAssetMaterial = new MovieAssetMaterial("sphereMaterial");
-
sphereMaterial.interactive = true;
-
sphereMaterial.smooth = true;
-
// create a color material for the plane
-
var planeMaterial:ColorMaterial = new ColorMaterial(0x55FF11);
-
planeMaterial.doubleSided = true;
-
planeMaterial.interactive = 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);
-
// add the event listener to the object using the InteractiveScene3DEvent
-
myFirstSphere.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
-
myFirstPlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
-
// 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();
-
}
-
-
private function onObjectClick(ARG_evt:InteractiveScene3DEvent):void {
-
// here is your event listener to control the object you clicked.
-
trace(ARG_evt.currentTarget);
-
}
-
-
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;
-
// get the rotation values for the camera based on where the mouse is in the scene
-
var rotY: Number = (mouseY – (stage.stageHeight / 2)) / (stage.height / 2) * 400;
-
var rotX: Number = (mouseX – (stage.stageWidth / 2)) / (stage.width / 2) * -400;
-
// set the camera's position
-
camera.x -= (rotX + camera.x) / 10;
-
camera.y -= (rotY + camera.y) / 10;
-
// make sure that it is calling the renderer
-
super.onRenderTick();
-
}
-
}
-
}
What we added to this version is an event listener. There were a couple requirements in order to have the event listener actually do anything, but that is basically all that we did. To start, we called the super and enabled interactivity (that is the fourth parameter). Next, we made the sphereMaterial and planeMaterial interactive by setting the interactive property to true. Finally, we added the InteractiveScene3DEvent listener. This fires custom events that Papervision objects handle. The only result in what we did was a trace of the object that was clicked, I will let you use your imagination for enhancing this.











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.