Having 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=54

2. 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:

Papervision3D component material dialog

 

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]

Download the source files

Posted
AuthorPeter