In Tutorials Mar 4, 200884
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);
}
84 Comments
Mar 4, 2008
Mar 17, 2008
Mar 17, 2008
Mar 18, 2008
Mar 24, 2008
Mar 25, 2008
Is the first explanatory tutorial about paper Vision I’ve found.
Thank You very much.
Mar 26, 2008
Apr 9, 2008
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
bombdigiti – here’s the code I used to get the tutorial up and running: http://pastebin.com/m14d95ceb
Apr 10, 2008
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
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
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
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
May 6, 2008
Instead of BitmapAssetMaterial, you can use MovieMaterial and pass in the instance name of a movieclip.
May 10, 2008
May 12, 2008
If you are using MovieMaterial instead of BitmapAssetMaterial, try passing in the library id of your movieclip as a string.
May 14, 2008
Greetings from Germany!!!
May 14, 2008
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
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
Grettings Thorsten^^
May 15, 2008
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
Greetings Thorsten^^
May 15, 2008
Greetings Thorsten^^
May 15, 2008
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
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
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
May 21, 2008
May 22, 2008
What version of Papervision you are you using?
May 22, 2008
1017: The definition of base class Mesh3D was not found.
??? i am so stumped.
May 23, 2008
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
May 25, 2008
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
the compile error goes away. But, no images in the view…
May 28, 2008
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
Jun 19, 2008
1000: Ambiguous reference to Vertex3D.
any idea as to why i was getting this?
Jun 20, 2008
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
Any chance in providing an .fla file for download?
Jul 2, 2008
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
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
Jul 21, 2008
Jul 23, 2008
Jul 29, 2008
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
I just have one problem, I keep getting multiple 1020: Method marked override must override another method errors. Any suggestions?
Aug 5, 2008
Aug 29, 2008
Sep 1, 2008
Can anyone help me??
Sep 8, 2008
Sep 14, 2008
Sep 16, 2008
Thanks very much in advanced.
Nov 8, 2008
ReferenceError: Error #1065: No se ha definido la variable cake1.
Nov 10, 2008
1046: Type was not found or was not a compile-time constant: Plane.
var photo1:Plane = new Plane(mat1, 246, 370,3,3);
Nov 10, 2008
1021: Duplicate function definition.function render(e:Event):void
Nov 20, 2008
But I still have a problem…
I am want to use the galery as a menu to access other webpages. So I am trying to apply a mouse event click on my planes with a navigate to url. But it doesn’t work. It seems that whatever I do, the click event applies to the container and not to the plane…
Here is the piece of code I have added at the end:
addEventListener(MouseEvent.CLICK, photo1Click);
function photo1Click(e:MouseEvent):void
{
navigateToURL(new URLRequest(“http://www.youtube.com”));
}
Please, help…
Dec 1, 2008
HELP PLEASE
Dec 13, 2008
Dec 19, 2008
Please, if you can, upload your .fla file, with papervision, someware.
Thank you.
Jan 4, 2009
Thanks,
Andy
Jan 9, 2009
03bekh8i7p1t0v1m
good luck
Jan 14, 2009
This is really a cool stuff!!!
I was trying it out, but am caught up with this error: “1061: Call to a possibly undefined method renderCamera through a reference with static type org.papervision3d.scenes:Scene3D. ‘code:scene.renderCamera(camera)’;”
“1137: Incorrect number of arguments. Expected no more than 0. ‘code:var scene:Scene3D = new Scene3D(container);’”
I checked back in those source classes, I coudnt find the method renderCamera anywhere and Scene3D does not have any arguments…..
Help me, what am I supposed to do?
Cheers,
Deepak
Mar 16, 2009
Theres something way messed about my class path
Like a couple of other posts here flash wasnt finding the refrences to the Plane class which I got around by stipulating it pretty much exactly after objects
“import org.papervision3d.objects.primitives.*;”
But what about the scene class? its still not finding it correctly
1137: Incorrect number of arguments. Expected no more than 0.
also
1061: Call to a possibly undefined method renderCamera through a reference with static type org.papervision3d.scenes:Scene3D.
from scene.renderCamera
Anyone?
Apr 20, 2009
DisplayObject3D: null
DisplayObject3D: null
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 pratice_fla::MainTimeline/frame1()
any thought?
May 17, 2009
Jul 4, 2009
Good luck.
Aug 20, 2009
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
1137: Incorrect number of arguments. Expected no more than 0
1180: Call to a possibly undefined method Plane.
Aug 24, 2009
Oct 15, 2009
I solved 1046 & 1180 by changing “import org.papervision3d.objects.*;” to “import org.papervision3d.objects.primitives.*;”
But I’m still wondering how to get rid of 1061 & 1137.
Nov 15, 2009
Here’s my working code:
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.*;
var viewport:Viewport3D = new Viewport3D(0,0,true,false);
addChild(viewport);
var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
camera.zoom = 40;
[...]
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;
renderer.renderScene(scene, camera, viewport);
}
Nov 22, 2009
Dec 4, 2009
thank you sir, that helped me out getting the tutorial to work. *salute*
Dec 21, 2009
i am getting this runtime error when publish the fla: ERROR: MaterialObject3D: transformUV() material.bitmap not found!
I supposed it’s related with the BitmapAssetMaterial object, but i have no idea what’s wrong.
Can somebody help me?
Thanks
Erick
Feb 14, 2010
Mar 30, 2010
Apr 13, 2010
Apr 19, 2010
Jul 15, 2010
Jul 30, 2010
Oct 2, 2010
Oct 10, 2010
Dec 8, 2010
May 20, 2011
Leave a Comment