The following example is the source and some comments for our first papervision3D project. It demonstrates how to create a simple cube, instantiate the papervision3D objects and classes, and how to use the mouse to control camera movement. Hope this helps!
One of the keys to setting up a flex and papervision project, is to first make sure you import all of the packages you will be using. For this project, these are the required imports:
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.objects.Collada;
import org.papervision3d.core.proto.DisplayObjectContainer3D;
import org.papervision3d.objects.Cube;
import org.papervision3d.materials.ColorMaterial;
After importing the new papervision classes, and flash events, we need to define some variables, and also embed our png’s for the textures we are going to use, like this:
[Embed(source="../assets/cmmlogo.png")] private var CubeTexture:Class;
[Embed(source="../assets/cmmorange.png")] private var crazyTexture:Class;
private var myMaterials:Object;
private var container:Sprite;
private var scene:Scene3D;
private var camera:FreeCamera3D;
private var rootNode:DisplayObject3D;
The top 2 lines here embed the png’s for flash, and then we just define some variables.The next step, is in your public function, make a call to a new function that will setup your stage, and basically initialize the papervision engine. I do that like this:
public function P3DTutorial()
{
init3D();
addEventListener(Event.ENTER_FRAME, loop3D);
}
The other thing that was added here, is we created an enterframe event for the mouse cursor to update the cube/spin it. I’ll explain that function in a bit. Next, we create the init3D function like so:
private function init3D():void {
container = new Sprite();
addChild( container );
container.x = 200;
container.y = 200;
scene = new Scene3D( container );
camera = new FreeCamera3D();
camera.z = -600;
rootNode = scene.addChild( new DisplayObject3D(“rootNode”) );
var cubeTexture:Bitmap = new CubeTexture() as Bitmap;
rootNode.addChild( new Cube( new BitmapMaterial( cubeTexture.bitmapData ), 200, 200, 200, 1, 1, 1 ), “myCube01″ );
}
Ok.. the first half of that chunk, creates the “3D” container. Then, we position the container relative to the stage, and setup a standard free-flowing 3D camera. (Tip: You can substitute FreeCamera3D, for Camera3D if you want a stationary camera instead of a moving one)
The second half of that snippet creates our first 3D object. With the papervision engine, that’s all there is to it. What happens here, is since we defined our texture above as a class, we can apply that as a bitmap material now to the newly instantiated object. You can do it at the same time the object is created by adding the new BitmapMaterial line right in with the addChild.
Lastly, all thats left to do, is setup the enterframe to rotate things/capture mouse movement. All I did was create a simple function like this one:
private function loop3D( event:Event ):void {
var screen: DisplayObject3D = this.scene.getChildByName("rootNode");
var rotationY: Number = -(this.mouseX / this.stage.stageWidth * 275);
var rotationX: Number = -(this.mouseY / this.stage.stageHeight * 275);
screen.rotationY += (rotationY - screen.rotationY) / 12;
screen.rotationX += (rotationX - screen.rotationX) / 12;
this.scene.renderCamera(this.camera);
}
This function simply rotates the cube/spins it according to mouse placement.
And that’s it for this simple tutorial. Not much to it, It goes over the basics of importing, setting up a 3D cube, and instantiating the papervision 3d engine.
-nrb
Connect to LinkedIn API from AS3 and Adobe AIR
Nice, thanks. I was looking for something simple like this. Worked well for me.
i get the following error:
any ideas? much thanks.
Papervision3D Beta RC1 (18.06.07)
DisplayObject3D: null
DisplayObject3D: rootNode
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at main/::init3D()
at main$iinit()
by the way im using flash rather than flex, any workarounds?
The only thing that I can think of Mike, regarding your error, is its not setup properly from the get-go. I used the flex environment, and made this all into a constructor by itself. Which then gets instantiated by papervision. I have never used flash to create a constructor like this. If you do some searching on papervision and constructors, flex is pretty much the normal environment for this, and trust me, it just makes things easier in the long run using flex as your IDE.
Flash, I’m quite certain it can be done, but all of this would have to be contained in external actionscript files, and probably then instantiated by a constructor. At least that’s what I believe works for flash.
Just a heads up also, papervision3D has released the first open source, public beta. Also, rockonflash has released custom papervision components for the flash environment. I bet this will help you out a little bit getting started with P3D in flash.
Take a look over at the papervision wiki now..
It helps to know what a free camera is. Why can’t the docs give up just a little more info. Any good examples of a moving camera out there.
Andrew, You can substitute FreeCamera3D, for Camera3D if you want a stationary camera instead of a moving one.
If you use a FreeCamera3D, You can manipulate the 3D space around the camera, move it forwards, and backwards, etc.. kind of like this tutorial suggests.
If you don’t want that, and for example you want to create a static, non-moving scene, you can just use the standard Camera3D instead, and position it where in the scene you like.
Hope that helps clarify a bit..
Thanks, but this doesn’t work in flex. All kinds of errors.
THANKS!!!!!!!!!!
I wouldn’t say that Flex makes things easier with PaperVision3D, I use Flash with FDT and find that much easier to use than Flex. Actually, I have seen some major projects go to hell in a handbasket because of Flex.
If you want to use this with the Flash IDE, just create a class and then refer to that in your Document Class in the properties panel. You don’t need these 2 lines:
//[Embed(source=”../assets/cmmlogo.png”)] private var CubeTexture:Class;
//[Embed(source=”../assets/cmmorange.png”)] private var CrazyTexture:Class;
Instead, just import an image into your libray, and in the linkage ID call it CubeTexture. Then where that embed code was put:
private var image1:BitmapData = new CubeTexture(0,0);
Lastly, you don’t need this line:
var cubeTexture:Bitmap = new CubeTexture() as Bitmap;
in the line below that one, just pass image1 to the instantiated BitmapMaterial
rootNode.addChild( new Cube( new BitmapMaterial( image1 ), 200, 200, 200, 1, 1, 1 ), “myCube01″ );
Also, just make sure that your class is wrapped in the package statements.
Once, again, nice easy tutorial, I’ve been looking for something simple like this to get started.
A little bit off confusion that may help some people:
Is the tutorial aimed to run in an .as file within flex and not the .mxml file (script block)?
And while I’m on the subject, how can the .as papervison 3d file be displayed within the .MXML file, if anyone knows?
JC
JC, this is meant to run in an external AS file yes.. It wasn’t setup to run from within an MXML file. This source was all held externally..
Thanks for this nice tut, found another great one at rosengain.com.
To set it up in flash folow someTimes’ comments and don’t forget to import flash.display.BitmapData;
cheers,
JD
[...] I found a tutorial over at Curious Minds Media, but since it was constructed for Flex, I opted to create a Document Class file for this. The [...]
When I try to put this code in, I get the error
1067: Implicit coercion of a value of type org.papervision3d.materials:BitmapMaterial to an unrelated type org.papervision3d.materials:MaterialsList.
I am using Flex 3, ideas?
[...] tutorial from the ground up Paper Visions Come to Life in 3D Flash PaperVision3D Hands On Simple Papervision3D Tutorial Lee’s Papervision3D tutorial Papervision3D Materials Tutorial Flex Your AS Papervision 3D [...]
Hi Friends,
Can any one give me a source code to create simple cube and rotate it in X and Y axis.
Please can any one help me..
Am struggling for this more than a month.
Am getting some source from some sites.
But am not getting the full source…
So can any one give me the full source for my need…
Thanks in advance….
Which papervision version i have to use for this tutorial??
[...] Simple Papervision 3D Tutorial [...]