In Tutorials Mar 4, 200853
Getting Started with 3D in Flash
As you probably know, Flash is a 2D program. However, there are a handful of open source 3D engines written in actionscript that allow real time 3D environments to be rendered within the flash player. Among these, is Papervision3D, which is probably the most powerful and widely adopted of the engines available.
In this tutorial, we will create a simple 3D gallery for a few photos. Before you get started, you will need to download Papervision3D, and make sure you have a class path within flash pointing to it’s location on your computer.
1. Import Papervision
The first step is to include all of the necessary Papervision3D classes in our file.
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
2. Create a container
In order to properly set up our scene, we need to first create a Sprite that will contain our 3D objects. And since we want our group of photos to be in the center of the stage, we set the x an y properties to half of the stage width and height.
var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild(container);
3. Set up the scene
Here we will use two of Papervisions’s classes, one to create the scene and the other to create a camera. The zoom property of the camera is self explanatory…the higher the number, the tighter the zoom.
var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D();
camera.zoom = 6;
4. Create the material
Import three photos into the Flash library and make sure to enable “Export for ActionScript” on each. Then assign each one to a material.
var mat1:BitmapAssetMaterial = new BitmapAssetMaterial("cake1");
mat1.smooth = true;
mat1.oneSide = false;
var mat2:BitmapAssetMaterial = new BitmapAssetMaterial("cake2");
mat2.smooth = true;
mat2.oneSide = false;
var mat3:BitmapAssetMaterial = new BitmapAssetMaterial("cake3");
mat3.smooth = true;
mat3.oneSide = false;
5. Make our photos
Papervision has several built in objects. For our photos we are going to use the plane. When creating a new instance of the Plane object, you need to pass in several parameters. The first is the material, which we created in the precious step. The second and third is the width and height. The final two parameters are the horizontal and vertical spans of the object. Use at least 3 for this. Anything less will cause your photo to slightly warp as it moves.
var photo1:Plane = new Plane(mat1, 246, 370,3,3);
scene.addChild(photo1);
photo1.x =-190;
photo1.y =-10;
photo1.z =-150;
var photo2:Plane = new Plane(mat2, 370, 253,3,3);
scene.addChild(photo2);
photo2.x =190;
photo2.y =-150;
var photo3:Plane = new Plane(mat3, 370, 253,3,3);
scene.addChild(photo3);
photo3.x = 190;
photo3.y = 150;
photo3.z =-90;
6. Render the scene
The final step is to render our scene. We could just call scene.renderCamera(camera); but that would only render the scene one time and nothing would be animated. So instead, we create an ENTER_FRAME event that changes the position of the camera based on the mouse position, and renders the scene.
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
{
camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;
scene.renderCamera(camera);
}
53 Comments
Mar 4, 2008
Wow, thanks for demystifying Papervision3D for me. This has given me the kick start I need. Keep it up!
Mar 17, 2008
Great tutorial dude!!
Mar 17, 2008
Imagine the interaction possiblities.. thanks for the article!
Mar 18, 2008
Cool, this is a great tutorial to get started on Papervision3D.
Mar 24, 2008
[...] Read Tutorial No Comments Leave a Commenttrackback addressThere was an error with your comment, please try again. name (required)email (will not be published) (required)url [...]
Mar 25, 2008
Great!
Is the first explanatory tutorial about paper Vision I’ve found.
Thank You very much.
Mar 26, 2008
[...] http://designreviver.com/tutorials/getting-started-with-3d-in-flash [...]
Apr 9, 2008
hey, i can’t seem to get this example to compile properly no matter what i try. Im using flash cs3. Here’s my code currently:
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild(container);
var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D();
camera.zoom = 6;
var mat1:BitmapAssetMaterial = new BitmapAssetMaterial(”pic1″);
mat1.smooth = true;
mat1.oneSide = false;
var mat2:BitmapAssetMaterial = new BitmapAssetMaterial(”pic2″);
mat2.smooth = true;
mat2.oneSide = false;
var mat3:BitmapAssetMaterial = new BitmapAssetMaterial(”pic3″);
mat3.smooth = true;
mat3.oneSide = false;
var photo1:Plane = new Plane(mat1, 450, 300,3,3);
scene.addChild(photo1);
photo1.x =-190;
photo1.y =-10;
photo1.z =-150;
var photo2:Plane = new Plane(mat2, 430, 538,3,3);
scene.addChild(photo2);
photo2.x =190;
photo2.y =-150;
var photo3:Plane = new Plane(mat3, 600, 333,3,3);
scene.addChild(photo3);
photo3.x = 190;
photo3.y = 150;
photo3.z =-90;
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
{
camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;
scene.renderCamera(camera);
}
Apr 10, 2008
Henry - thanks so much for this tutorial, it’s a great way into Papervision!
bombdigiti - here’s the code I used to get the tutorial up and running: http://pastebin.com/m14d95ceb
Apr 10, 2008
xerode - You’re welcome. I’m glad it helped.
bombdigiti - This tutorial was written for the 1.5 version of Papervision. So make sure that is the version you have installed.
Apr 16, 2008
ok, i am using the code xerode provided for me and im getting two errors… i have 1.5 of papervision also. Any ideas?
col: 37 Error: Incorrect number of arguments. Expected no more than 0.
col: 10 Error: Call to a possibly undefined method renderCamera through a reference with static type org.papervision3d.scenes:Scene3D.
Apr 17, 2008
Hi.
Thank you for your tutorial.
I’m newbie.
I can’t guess what you mean by : “and make sure you have a class path within flash pointing to it’s location on your computer”.
thank you.
======================
Advice : try to add an image verification before posting comments to avoid spammers.
Apr 17, 2008
10zyner,
Sorry for leaving that part out. You can learn about it here:
About Setting Up a Class Path
I don’t use image verification, because it is annoying for those making comments. I don’t think I have any spam in my comments.
May 6, 2008
Is there anyway to use a movieclip rather than an image?
May 6, 2008
Paul,
Instead of BitmapAssetMaterial, you can use MovieMaterial and pass in the instance name of a movieclip.
May 10, 2008
Really great tutorial, I spent some time figuring all the class stuff but now that I have it I want to use a movieclip as well, but when I follow the instructions I get this “1067: Implicit coercion of a value of type String to an unrelated type flash.display:DisplayObject”, do you know what’s the problem? Thanks!!
May 12, 2008
money,
If you are using MovieMaterial instead of BitmapAssetMaterial, try passing in the library id of your movieclip as a string.
May 14, 2008
Hello^^ Its a great tutorial!!! But i have one Problem. I used the code in the render function for my gallery. This works fine, but the ankerpoint of the camera is not in the middle of the container sprite whith the content inside, he is on the left side of the container sprite. Can you tell me please what i can do to change the ankerpoint to the middle ??? Thanks!!! And please excuse my bad english^^
Greetings from Germany!!!
May 14, 2008
Thorsten,
The focal point of the camera should be centered up by default. I’m not sure how you are placing images in your gallery, but remember that the center point of the images are in the middle. This may be causing them to offset to one side or the other, thus making it appear that the camera is offset. Also, make sure your container is centered.
May 15, 2008
Hello Henry,
thanks for your help! I think that the center point stays in the first image i load into the container. The center point is not in the middle when all images are loaded in the container. I load the images with XML into the container. Can you tell me please how i can change the center point after all images are loaded, or the actionscript to change the center pint of the camera?
Thanks and greetings from germany!!!
May 15, 2008
Here you can see what i mean: http://projekt02.haakde-sign.com/
Grettings Thorsten^^
May 15, 2008
Thorsten,
Looks like your 3D gallery is off to a good start.
I believe the first thing you need to do is determine the width of your gallery(the width of your images + spacing * the number of columns). So this means that you need to load in your xml first to determine this value. Then offset your starting x position by this value divided by 2. Hope that makes sense.
May 15, 2008
Thanks for your help Henry!!! But what i dont understand is that in this example must not set the camera to a differnt position like -> (the width of your images + spacing * the number of columns). Why do have to do this in my Gallery???
Greetings Thorsten^^
May 15, 2008
And how do i change the center of the camera ?? Which thing do i have to change and where ??
Greetings Thorsten^^
May 15, 2008
Hey Henry!!!
I found out how i can change the camera position^^ I did it like you said and to di that i had to add this code:
var camerapositionX = ((150 * displayimage) - 150) * 0.5;
var camerapositionY = ((115 * maxRows) - 115) * 0.5;
plane.x = li * 150 - camerapositionX;
li++;
plane.y = yaxis - camerapositionY;
if((i+1) % displayimage == 0) {
li = 0;
yaxis += 115;
}
Greetings from Germany^^
May 15, 2008
Thorsten,
Glad you found a solution. I actually meant to offset the x position of your images. That way you don’t move the camera. But either way will work.
In my example, I am not loading the pictures dynamically, so I just set the positions manually.
May 16, 2008
Hello Henry^^changi
Actually i think that my example is not so good as your idea to change the offset the x position of the images. Can you tell me where i have to add camerapositionX and camerapositionY to change the camera position???
Greetings from Germany!!!
May 21, 2008
I followed the tutorial, however at runtime I received a compiler error like Bumbdigiti. Can you help with this?
May 21, 2008
[...] is aimed at providing useful information for web designers. You can visit to read tutorials such getting started with 3D in Flash, to get free downloads like Photoshop brushes, and to find design [...]
May 22, 2008
McClain,
What version of Papervision you are you using?
May 22, 2008
It’s 1.5 I get a error message that has more on the windows pc than the mac when using the same file. To clarify, when I run threeD.fla on pc I get an error message that has multiple descriptions. However, that same fla on mac gives me the error that reads.
1017: The definition of base class Mesh3D was not found.
??? i am so stumped.
May 23, 2008
Henry
I sent you a .fla file. It now only has one error message. Hopefully you will be able to solve the issue. The compiler states that the renderCamera is a undefined method.
May 24, 2008
[...] few weeks ago I wrote a tutorial introducing you to Papervision 3D. The tutorial explains how to create the beginnings of a simple 3D Gallery. If you want a fully [...]
May 25, 2008
Would it be rude for a total Flash newb (with some js experience) to ask a few basics?
When you say “into our file” I’m lost *laughs* - most of the rest I think I get. I cut and pasted your script into a new file paper.as. With that file active, I can’t access the library. So, I create a new “Flash File (ActionScript 3.0)” and import my pix into its library with export set.
Thanks in advance.
PaperFlash.as line 15 reports 1093 Syntax error.
Yeah, I jumped the tracks
May 28, 2008
hmmm… if I change the double quotes to single quotes like this: new BitmapAssetMaterial(’Jess’);
the compile error goes away. But, no images in the view…
May 28, 2008
OK, for anyone so newb as I was… here is my answer.
The step
“The first step is to include all of the necessary Papervision3D classes in our file.”
became:
1. Start Flash CS3
2. File->New… and select “Flash File (ActionsScript 3.0)
3. Window->Actions
Paste the code in that window. Follow step 4 to import and images and “Export for Actionscript”
Save. Control-Enter to compile and execute. I got errors and had to change the double
quotes to single quotes in the BitmapAssetMaterial lines. I also corrected image sizes on the “Plane” calls.
Glad you didn’t have to admit you were this green?
Jun 7, 2008
Great tutorial. Thanks Henry, this helps a lot. I have played with several of the example projects from papervision3d but none of them have any explanation into what is going on. This is a great starting point.
Jun 19, 2008
i tried the ff the codes here but i got this error:
1000: Ambiguous reference to Vertex3D.
any idea as to why i was getting this?
Jun 20, 2008
This sure dimistifies papervision, thanks a whole lot, it was about time. The only thing is that when I use MovieMaterial, and use my movieclips name, it doesn’t work.
var mat1:MovieMaterial = new MovieMaterial(”img1″);
mat1.smooth = true;
mat1.oneSide = false;
i get:
ReferenceError: Error #1069: Property width not found on String and there is no default value.
at org.papervision3d.materials::MovieMaterial/createBitmap()
at org.papervision3d.materials::BitmapMaterial/set texture()
at org.papervision3d.materials::BitmapMaterial()
at org.papervision3d.materials::MovieMaterial()
at simple_image_gall_fla::MainTimeline/frame1()
isn’t it passed as a string???
Jun 27, 2008
I cannot seem to get anything to work. i’m sure i’m missing something simple.
Any chance in providing an .fla file for download?
Jul 2, 2008
Hello
I am having trouble using .png or making the movieclips transparent could someone possible
help me?
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5;
container.y = stage.stageHeight * 0.5;
addChild(container);
var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D();
camera.zoom = 6;
var mm:MovieMaterial = new MovieMaterial(cake);
mm.smooth = true;
mm.oneSide = false;
var mm2:MovieMaterial = new MovieMaterial(cake2);
mm2.smooth = true;
mm2.animated = true;
mm2.oneSide = false;
var mat3:BitmapAssetMaterial = new BitmapAssetMaterial(”cake3″);
mat3.smooth = true;
mat3.oneSide = false;
var photo1:Plane = new Plane(mm, 479, 319,3,3);
scene.addChild(photo1);
photo1.x =-190;
photo1.y =-10;
photo1.z =-150;
var photo2:Plane = new Plane(mm, 479, 319,3,3);
scene.addChild(photo1);
photo1.x =-100;
photo1.y =-10;
photo1.z =-100;
var photo3:Plane = new Plane(mat3, 370, 253,3,3);
scene.addChild(photo3);
photo3.x = 190;
photo3.y = 150;
photo3.z =-90;
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
{
camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;
scene.renderCamera(camera);
}
Jul 18, 2008
Love th article and your site. Good work
I’m still AS2 old school, is there any way of getting the source file to help me make the leap to AS3 and Papervision3D?
Jul 18, 2008
@paul - I have been meaning to get the source file posted here. I will try my best to added this weekend.
Jul 21, 2008
source files would be amazing! Thank you so much for the article!
Jul 23, 2008
can somebody tell me how to apply this for movieClips instead of bitmap Please ?
Jul 29, 2008
I cannot run this, everytime i test the movie it says:
1046: Type was not found or was not a compile-time constant: Plane.
1046: Type was not found or was not a compile-time constant: Plane.
1046: Type was not found or was not a compile-time constant: Plane.
1061: Call to a possibly undefined method renderCamera through a reference with static type org.papervision3d.scenes:Scene3D.
1180: Call to a possibly undefined method Plane.
I do everything in the tutorial, give my 3 pics into library, give them linkage (everytime i give the linkage there’s a warning “a definition for this class could not be found in the classpath”.
Help
Aug 5, 2008
Hey thanks for the great intro to Papervision, I’ve been looking for something like this.
I just have one problem, I keep getting multiple 1020: Method marked override must override another method errors. Any suggestions?
Aug 5, 2008
Never mind. I had conflicting class paths.
Aug 29, 2008
[...] is aimed at providing useful information for web designers. You can visit to read tutorials such getting started with 3D in Flash, to get free downloads like Photoshop brushes, and to find design [...]
Sep 1, 2008
hi guys I haven’t used flash for years. I stuck at the beginning I have downloaded the papervision stuff but now I’m confused with what to import first (stage1)
Can anyone help me??
Sep 8, 2008
[...] is aimed at providing useful information for web designers. You can visit to read tutorials such getting started with 3D in Flash, to get free downloads like Photoshop brushes, and to find design [...]
Sep 14, 2008
[...] is aimed at providing useful information for web designers. You can visit to read tutorials such getting started with 3D in Flash, to get free downloads like Photoshop brushes, and to find design [...]
Sep 16, 2008
hi! Thanks for the tutorial! I’ve come across a problem. I am using papervision 2.0 and did the camera3D classes changed something? I can only move the camera moving in 2D ways if i changed the value of camera.x and camera.y. Should i use yaw() now?
Thanks very much in advanced.
Leave a Comment