Papervision3D in 5 minutes
7 07 2007Having had Ralph over to our user group last Thursday was a real inspiration to get experimenting with Papervision3D again. Last night I decided to try out John Grdn’s new PV3D components for the Flash IDE — I was stunned.
Its been ages since I last played around with the API but its ridiculously quick and easy to get a Collada model loaded in and apply your custom materials. Just a couple of lines of code and you get it animating. Thought I’d share my little experiment here, if you’ve got a couple of minutes to spare during a coffee break be sure to give it a try.
1. Download and install PV3DComponents_v1.0.mxp from the following URL:
http://www.rockonflash.com/blog/?p=542. Launch Flash CS3 and create a blank FLA
3. Drag an instance of the Collada Scene component from the components panel to the stage, resize it to fit the stage and give it the instance name “scene3D”
4. Download cube.dae (created by Alessandro Crugnola for this experiment)
5. Go to Window > Other Panels > PV3D Panel
6. In the PV3D Panel point to your working folder and specify cube.dae you just downloaded as its Collada source file
7. In the model tab of the PV3D Panel set up the zoom and rotation of the 3D object
Notice the live preview in the component on stage. Now, lets add a material to this cube —
8. Import an image file into you’d like to use as a material, set up its linkage ID in the Library panel to “cubeSkin”
9. In the Parameters panel click on Materials list and set it up to read as the screenshot below:
The materialName property refers to the name of the material as specified in the Collada file, in this case its “CubeMaterial”. Interesting to know if you’re not sure what material names where used in a specific file you can just open it with your favourite text editor and look for the library_materials node — Collada files are XML based so easily readable.
The materialLinkageID property is set to the Linkage ID we gave that bitmap image that was imported i.e. “cubeSkin”
10. Add a new layer to your timeline and add the following code (if you feel dirty doing this, simply create an AS3 class and set it as the document class for the FLA).
import flash.events.Event;
function rotateCube(evt:Event):void {
scene3D.collada.rotationX += 1;
scene3D.collada.rotationY += 1;
scene3D.collada.rotationZ += 1;
}
addEventListener(Event.ENTER_FRAME, rotateCube);
Pretty easy, right? It just increments the x, y and z rotation of the 3D object by 1 every frame. Now save this FLA in your working folder and run Control > Test Movie which should give you a result something like this:
[flash]/blog/wp-content/uploads/2007/07/pv3d.swf,350,300[/flash]
Nice article Peter! I want to try this out. Looks like it takes some of the work out of loading the model and mapping the material in code… (Rock on John!)
Sean
[...] Elst posted a quick blog about his experience with Papervision3D in five minutes. Pretty cool that it only took him that long to get back into the swing of things. Once I pick [...]
[...] bouge décidément de ce côté. Peter Elst vient de nous faire un petit tutorial avec Papervision en 5 minutes, histoire de faire mumuse avec le composant Papervision pour Flash CS3. Plutôt rapide [...]
Thanks for posting about this Peter!
I thought it worth mentioning that you could also use yaw(), pitch() and roll() methods to do the incremental rotation
scene3d.collada.yaw(1)
is the same as:
scene3d.collada.rotationY += 1;
Thanks again, this looks great!
John
Very cool!!
Wish I could get this working right. I’m fine until step 9 where it says “In the Parameters panel click on Materials list and set it up to read as the screenshot below:” When I click on the Materials list it is totally blank. When I hit the “+” icon nothing happens, so I’m not sure how to populate the list with data. I have installed all of the AS3 classes and can’t figure out what the problem is. Any help is appreciated.
Thanks,
Jeff
If you click the + icon you should see the dialog getting populated with values like animated, singleSided etc. (see screenshot). Then you just click the space on the right of each value and type in its value.
Hope this helps!
MXP File installed correctly, I can see the PV3D Panel and all but I don’t have any new components in the components panel
Using Flash CS3 with latest Player 9 Beta on OSX 10.4.10
Any help is appreciated
Thanks
thx, i like ur work, bedankt alweer, ik maakte er dit van ..cubes
I’ve figured out my problem: The papervision component is not functioning properly under Mac OS X. I tried installing it on a Windows PC and all of my material list problems went away. Apparently clicking the + icon on the Materials list will only work under a Windows installation of papervision. Hope this helps.
Jeff
Good to hear you’ve got it working Jeff — I’ve got no problems using it on Mac OSX though.
Hi Jeff,
I was only able to reproduce that issue in Windows if the publish setting was set to ‘ActionScript 2.0′ and the ‘Identifier’ field in the linkage properties, was filled in instead of the ‘Class’ field.
Thanks Peter. Great tutorial.
[...] got around to trying out this Papervision3d tutorial and I’m really surprised at how quickly a mapped, moving cube could be knocked up. Since the [...]
[...] Papervision3d downloads Papervision3d Wiki Papervision3d blog Another Papervision3d blog Papervision3d in 5 mins [...]
great tutorial, but i am not able to activate the linkage ID with AS3, says has to be AS2 an when publishing i get the message the papervision needs AS3.. hmmm, so what can i do??
os: mac 10.4.10
The code in the outputwindow is:
DisplayObject3D: null
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: Box01
Collada material CubeMaterial not found.
hi, ive been looking for articles and source for a while,
i downloaded SVN turtle thing,set it all up and i tried variuos other ‘basic’ tutorials, including the Computer ats one which usually works, and nada!
yours did work however!!!! so thanks a lot!
do you know of any sites that have utorials that, like yours, do what they say, and start simple working up slowly, im ok at scripting and 3d, but this thing has me perplexed.
want to make an interactive 3d worldy thing for a site im on at work, this is how i gotta do it it seems, but im lost.
wish there was a clearly illustrated easy to follow book that included source files for tuts.
help me flash god.
MSN me
waz
Hi Peter,
Awesome tutorial, as a person who plays around with Flash and 3DS Max (.NET developer by trade), I found all the previous tutorials ’skipped’ out important bits!
Now I finally have a base working example I can finally start playing around with my own models in PV3D (Ikept getting to the materials bit’s in other tutorials, but non explained how to setup the parameters).
Great tutorial, thanks,
Carl
hi!
i’m using flash CS3 on WinXP and when i’ve installed PV3ComponentsV1.0 there was no any new components in components panel even thou PV3Com works, well… lets say well.
same problem as “Paradox” posted few months ago.
have anybody figured it out in meanwhile?
tnx!
I got it all done on my end…Hey i just wanted to mention to your other viewers that   didnt work in the actions of my .fla [i just deleted them] Here is how it would look like.
import flash.events.Event;
function rotateCube(evt:Event):void {
scene3D.collada.rotationX += 1;
scene3D.collada.rotationY += 1;
scene3D.collada.rotationZ += 1;
}
addEventListener(Event.ENTER_FRAME, rotateCube);
Also viewers should note to give the component (on the stage) an instance name of scene3D.
Keep up the good work Peter and thanks for the quick tutorial, to RockonFlash and to the owner of the Google code .mxp (neOriley). Yeah it was a stunner and it took just about 5 minutes!!
[...] thanks to Peter Elst, Rock on Flash and Google code for making this possible….There are many out there who like [...]
[...] 3D Object Basics - Papervision3D tutorial from the ground up - Papervision2: Preparing your tools - Papervision3D in 5 minutes - Content creation for Papervision3D using XSI Mod Tool - Papervision Tutorial - Papervision 3D [...]
[...] 3D Object Basics - Papervision3D tutorial from the ground up - Papervision2: Preparing your tools - Papervision3D in 5 minutes - Content creation for Papervision3D using XSI Mod Tool - Papervision Tutorial - Papervision 3D [...]
[...] and 3D Object Basics- Papervision3D tutorial from the ground up- Papervision2: Preparing your tools- Papervision3D in 5 minutes- Content creation for Papervision3D using XSI Mod Tool- Papervision Tutorial- Papervision 3D [...]