Papervision3D tutorial from the ground up
Posted by Dennis on Mar 25, 2007 in 3D, ActionScript, Flash, Flex • 136 comments[Update 15/10/2009] The most comprehensive work about Papervision3D is this book.
There are some Papervision3D tutorials out in the wild, but the ones that I’ve seen don’t start from scratch. That’s why I decided to put together this step-by-step tutorial to show you how to create a simple 3D object with Papervision3D and 3ds Max. This tutorial assumes that you have some experience with Flex Builder or Flash and ActionScript though.
First of all, you need to download and install:
- Adobe Flex Builder or Adobe Flash CS3
- Autodesk 3ds Max
- Feeling Software’s ColladaMax plugin for 3ds Max: this plugin enables you to export 3D objects to Collada, an open standard Digital Asset schema for interactive 3D applications.
- TortoiseSVN: a Subversion client, implemented as a windows shell extension. With this tool you can get the latest version of Papervision3D’s source code.
After downloading and installing the software, you need to set up an ActionScript project in Flex Builder:
- Go to File > New and choose “ActionScript Project”
- Fill in the project name (”Papervision3DTutorial” for example) and click the “Next” button
- Locate the “Main source folder” field and give it the value “source”
- Click the “Finish” button. This will close the wizard and will take you back to the workspace.
- Create a folder named “assets” in the project root
- Download this image and put it in the assets folder
Or in Flash:
- Go to File > New and choose “ActionScript 3.0 Project”
- Create a “source” folder and add this folder to the classpath (you can find this in the ActionScript 3.0 settings section)
- Create a new ActionScript 3.0 file in the source folder and name it “Papervision3DTutorial.as”
- Go to the document settings and put the class name “Papervision3DTutorial” in the “document class” field
- Download this image, import it to the library, go to linkage, and fill in “MyPhotoMaterial” as the class name
Next, we’ll get the Papervision3D source files:
- Open Windows Explorer
- Right click in Explorer’s right pane. This shows the context menu and should have the TortoiseSVN submenu:
- Select “Repo-browser”, copy this URL: http://papervision3d.googlecode.com/svn/trunk/ and click “OK”
- This will open the repository browser. Navigate to as3/trunk/src and rightclick on the “src” folder. Choose “Export…” from the context menu:
- Fill in your project’s source directory in the “Export directory” field and press the “OK” button
- TortoiseSVN will now get all the source files and put them into your ActionScript project’s source path
Time for some 3ds Max action. If you don’t have 3ds Max or don’t want to install it, you download the dae file here and skip these steps.
- 3ds Max opens with a standard empty scene. Create a new standard primitive: Create > Standard Primitives > Cone. It should look something like this:
- Now we’ll assign a bitmap material to this object. Go to Rendering > Material Editor or just press the “M” key.
- this brings up the Material Editor window. Locate the “Blinn Basic Parameters” section and click on the square next to “Diffuse”:
- you’re presented with the Material/Map browser. Double click on “Bitmap” in the right pane to open up a file browser. Now navigate to your project’s assets directory and select the borobudur-java-indonesia.png
- this takes you back to the Material Editor window. If all went well you’ll see the jpg wrapped around a sphere:
- now we’ll add this material to the library. Still in the Material Editor window, go to the main menu and choose Material > Put to library. Click Yes. Fill in “myPhotoMaterial” as the name. Press OK.
- the next thing you have to do is assign the material to the object. You can do that by clicking on the “Assign material to selection” button:
- - close the Material Editor window. You can generate a preview by rendering the scene. Press F10 or go to Rendering > Render and click the Render button. You should see something like this:
- this takes us to the final step in 3ds Max, the Collada Export. Go to the main menu and choose File > Export. Navigate to your project’s assets directory, fill in the name “mycone.dae”, choose “COLLADA (*.DAE)” from the “Save as type” combo and hit the Save button. Accept the defaults and click OK.
On with Flex Builder … (Flash users click here)
- Open Papervision3DTutorial.as
- Copy and paste the following code. I’ve added comments to explain what is happening in the code:
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
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;
[SWF(backgroundColor="#000000", frameRate="60")]
/**
* Papervision3dTutorial.as
* 25 March 2007
* @author Dennis Ippel - http://www.rozengain.com
*/
public class Papervision3DTutorial extends Sprite
{
[Embed(source="../assets/borobudur-java-indonesia.png")] private var MyPhotoMaterial:Class;
[Embed(source="../assets/mycone.dae", mimeType="application/octet-stream")] private var MyCone:Class;
private var myMaterials:Object;
private var container:Sprite;
private var scene:Scene3D;
private var camera:Camera3D;
private var rootNode:DisplayObject3D;
/**
* Constructor
* @return
*/
public function Papervision3DTutorial()
{
var myPhotoMaterial:Bitmap = new MyPhotoMaterial() as Bitmap;
// create an object containing the material(s)
myMaterials = {
// the property name needs to correspond with the name you gave it
// in 3ds Max. you can also look it up in the collada (*.dae) file:
// <material id="myPhotoMaterial" name="myPhotoMaterial">
myPhotoMaterial: new BitmapMaterial( myPhotoMaterial.bitmapData )
};
// initialize the objects
init3D();
// add a listener for the 3D loop
addEventListener(Event.ENTER_FRAME, loop3D);
}
/**
* Creates the container, scene, camera and root node
*/
private function init3D():void {
// create the container, add it to the stage, position it
container = new Sprite();
addChild( container );
container.x = 200;
container.y = 200;
// create a new scene and use the container
scene = new Scene3D( container );
// create a new camera and position it
camera = new Camera3D();
camera.x = 3000;
camera.z = -300;
camera.zoom = 5;
camera.focus = 10;
// add a root node to the scene and add our 3d object by
// reading the Collada (*.dae) file
rootNode = scene.addChild( new DisplayObject3D("rootNode") );
rootNode.addChildren( new Collada( XML( new MyCone() ), new MaterialsList( myMaterials ) ) );
}
/**
* The 3D animation loop
* @param event
*/
private function loop3D( event:Event ):void {
// get our cone object which resides in the root node
var myCone:DisplayObject3D = rootNode.getChildByName("Cone01");
if(myCone) {
// object exists, now rotate it
myCone.rotationY += 1;
}
// render the camera to see the changes
scene.renderCamera( camera );
}
}
}
On with the Flash IDE …
- Copy and paste the following code in Papervision3DTutorial.as. I’ve added comments to explain what is happening in the code:
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.BitmapAssetMaterial;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.objects.Collada;
[SWF(backgroundColor="#000000", frameRate="60")]
/**
* Papervision3dTutorial.as
* 25 March 2007
* @author Dennis Ippel - http://www.rozengain.com
*/
public class Papervision3DTutorial extends Sprite
{
private var myMaterials:Object;
private var container:Sprite;
private var scene:Scene3D;
private var camera:Camera3D;
private var rootNode:DisplayObject3D;
/**
* Constructor
* @return
*/
public function Papervision3DTutorial()
{
// create an object containing the material(s)
myMaterials = {
// the property name needs to correspond with the name you gave it
// in 3ds Max. you can also look it up in the collada (*.dae) file:
// <material id="myPhotoMaterial" name="myPhotoMaterial">
myPhotoMaterial: new BitmapAssetMaterial( "MyPhotoMaterial" )
};
// initialize the objects
init3D();
// add a listener for the 3D loop
addEventListener(Event.ENTER_FRAME, loop3D);
}
/**
* Creates the container, scene, camera and root node
*/
private function init3D():void {
// create the container, add it to the stage, position it
container = new Sprite();
addChild( container );
container.x = 200;
container.y = 200;
// create a new scene and use the container
scene = new Scene3D( container );
// create a new camera and position it
camera = new Camera3D();
camera.x = 3000;
camera.z = -300;
camera.zoom = 5;
camera.focus = 10;
// add a root node to the scene and add our 3d object by
// reading the Collada (*.dae) file
rootNode = scene.addChild( new DisplayObject3D("rootNode") );
rootNode.addChild( new Collada( "assets/mycone.dae", new MaterialsList( myMaterials ) ) );
}
/**
* The 3D animation loop
* @param event
*/
private function loop3D( event:Event ):void {
// get our cone object which resides in the root node
var myCone:DisplayObject3D = rootNode.getChildByName("Cone01");
if(myCone) {
// object exists, now rotate it
myCone.rotationY += 1;
}
// render the camera to see the changes
scene.renderCamera( camera );
}
}
}
See the resulting .swf here.
So far this short (and I hope simple) introduction to Papervision3D. More complex examples can be downloaded from the repository.
NEW! Check out part 2 of this tutorial.
Thanks for the tutorial! however all I am getting is a black screen. The console says “The addCollada() method has been deprecated. Use addChildren( new Collada( filename ) )” so I replaced the addCollada with the addChildren and now I get an error stating
1180: Call to a possibly undefined method Collada. Not sure if they changed the source since you wrote the tutorial. Also there is no link to the dae, so I guessed and curled http://rozengain.com/bblog/templates/rozengain/files/mycone.dae
to get the file.
Sorry for looking gift horses in the mouth just trying to get my head around this cool technology!
Randy
Hey Randy,
Thanks for pointing this out. I fixed the link to the .dae file.
I can’t tell you much about the error you’re getting though. Papervision3D’s asdoc (http://www.papervision3d.org/docs/as3/) doesn’t mention anything about this being deprecated. Are you sure you got the AS3 sources?
Dennis
I just downloade the latest version and it is no longer giving me the deprecated error. I am using the as3. The only thing I did differently is to add the papervision source as a separate source folder instead of using the tutorials source folder as a repository. But that should not matter I would think. still just getting a black screen. No error messages but this comes up on the console:
[SWF] Users:randyhowk:Documents:Flex Builder 2:P3dTutorial:bin:P3dTutorial-debug.swf - 1,018,433 bytes after decompression
Papervision3D Beta RC1 (25.03.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
I’ll try it on the pc maybe the pathways have to be a certain way(ie no spaces)
Rh
Try putting the .dae file in the output directory (/bin) of your project. Let me know if that helps!
Dennis
hi I’m getting this error
1067: Implicit coercion of a value of type org.papervision3d.scenes:DisplayObject3D to an unrelated type org.papervision3d.objects:DisplayObject3D
what’s wrong?
Hi,
Could you tell me where the error occurs (line number for instance)?
Denis, ghast wat een relaxed tutorial man… Ben gelijk weer met Flex aan de gang gegaan. Binnenkort ff wat afspreken…
Can someone explain me the foloowing line:
[Embed(source="../assets/borobudur-java-indonesia.png")]
I don’t understand this syntax, is it an AS3 ?
Where the image is used ??
Thinks.
Yes, it is ActionScript 3.0 and it is called a “metadata tag”. You can read more about it here: http://livedocs.adobe.com/flex/201/html/metadata_141_01.html#161936
Hello, I have some problems with that code, I don’t understand really the following:
Q1: why we have to create MyPhotoMaterial :
[Embed(source="../assets/borobudur-java-indonesia.png")]
private var MyPhotoMaterial:Class;
and then:
var myPhotoMaterial:Bitmap = new MyPhotoMaterial() as Bitmap;
myMaterials = {
myPhotoMaterial: new BitmapMaterial( myPhotoMaterial.bitmapData )
};
We have it already in the objetct which is in the collada file, isn’t it ??
So why loading the bitmap ???
Q2: I don’t understand this line:
rootNode.addChildren( new Collada( XML(new MyCone()), new MaterialsList( myMaterials ) ) );
Why we have to create:
new MaterialsList( myMaterials )
PS: If someone can explain the code, it will be great.
Think you.
A1: the texture isn’t embedded in the collada file itself, so we need to load it separately
A2: this example contains only one material, that’s why it appears to be overkill. This comes in handy when you use more than one material.
Think you for your respons.
I am very confused ! If the texture is not in the collada file, so why we used the texture when we created the cone, why we warpped the testure on the cone ??
In addition to that, why not building just a cone (without textures), and then add the material using PV3D ??
This code is very good commented, however it says what the code dose, not WHY it dose that !!
The cone is just a simple example to illustrate how you set up a basic Papervision3D scene. You need to see it in a bigger perspective. Take for instance an object like this x-wing by John Grden: http://www.rockonflash.com/blog/wp-content/images/pv3d/xwingdemo/skin.png
Hello,
How can I do to replace the texture : borobudur-java-indonesia.png by a simple color ?
[Embed(source="../assets/borobudur-java-indonesia.png")]
private var MyPhotoMaterial:Class;
var myPhotoMaterial:Bitmap = new MyPhotoMaterial() as Bitmap;
myMaterials = {
myPhotoMaterial: new BitmapMaterial(myPhotoMaterial.bitmapData)
};
I would like to change myPhotoMaterial which is a bitmap to a simple color.
Is that possible ??
Yes, that is possible. Use the ColorMaterial class. Check out part 2 of this tutorial to see an example!
Dennis
Hello,
I am using Flex 2 builder, the project works very well if I run the html file, the problem is with the swf, when I open it I can’t see anything !!!
Can someone tell me why I have this strange problem ???
Another question:
I would like to add some interactivity, for instance, the user could use the keyboard to move the cone, can someone gives me a tutorial of how tu use the event with AS3, or maybe an exemple .
Think you.
i’ve followed the tut to t but for some reason when i run the project i get this erro…
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
p.s. saw your talk at fitc yesterday and was amazed at progress youve made.. im a 3d modeller and cant wait to jump into papervision.. thank you for all youve done.
hey once again,
It seems I made a spelling mistake in my material editor (i guess it wasnt to a t as id initially thought)
but its working now
http://www.erenhasip.com/Papervision3DTutorial.swf
here it is in the end
Hi ..
Good to see you fixed the problem.
Your 3D model looks fantastic!!! I suggest you put it on the PV3D wiki as a demo!
Oh, I’m not the one you saw at FITC, that was Carlos Ulloa.
Oh I’m sorry I presume things, but I still thank you for putting this up.. this is some great stuff to work off of…
p.s. I posted it up through the wiki but i feel as though im treading on forbidden ground.. im not going to get yelled at for posting on the wiki will i?
Hello,
I have a small question: How can I do to move the camera instead of moving the rootNode ???
camera.RotationY dosen’t work ?!!!
Thinks for this great tutorial.
Hi, I’ve grabbed the latest PV from the SVN today and wanted to try out this tutorial but all I’m getting is an exception:
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL:
… XML file contents here! …
at org.papervision3d.objects::Collada/::loadCollada()
at org.papervision3d.objects::Collada$iinit()
at Main/::init3D()
at Main$iinit()
Are there any incompabilities in the recent version?
Hi Sascha,
I don’t know, I haven’t tried the new version yet. I’ll look into it.
Dennis
Thanks for the very useful demo.
I had a couple of tweaks as the code base changed last weekend, but downloaded the latest svn today and the code ran as above. I downloaded the jpg and the dae separately and created an assets folder to put them into. I used an actionscript project created in Flex builder.
Thanks for the very useful demo.
I had a couple of tweaks as the code base changed last weekend, but downloaded the latest svn today and the code ran as above. I downloaded the jpg and the dae separately and created an assets folder to put them into. I used an actionscript project created in Flex builder.
thanx fer this. im getting into papervision3d now! my biggest problem is in 3DSM. keep those tutorials coming!
I tried it right now and it gave me a lot of errors at runtime but none before compiling, heres what i got
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.papervision3d.objects::Collada/::buildObject()
at org.papervision3d.objects::Collada/::parseGeometry()
at org.papervision3d.objects::Collada/::parseNode()
at org.papervision3d.objects::Collada/::parseScene()
at org.papervision3d.objects::Collada/::buildCollada()
at org.papervision3d.objects::Collada$iinit()
at Papervision3DTutorial/::init3D()
at Papervision3DTutorial$iinit()
I think your code is outdated now, im sure pv3d has been updated a lot since u made this so hopefully you’ll update your code soon
like Gaurav i, too am experiencing the same null Collada instance problem
? need updates.. or clarification on what we might be doing wrong
Hi Frank,
I just ran the tutorial file with the latest version from the repository, but I didn’t get any errors. Perhaps something else is causing the problem. You’re using the cone collada file?
Dennis
BRILLIANT TUTORIAL ..
well explains from scratch so love it .. and i noticed as of yesterday the code worked for you.
but i am trying this on Flash CS3 and it is giving me the following error.
well i started of with making a different model and using a different image.
but since it didnt work, i started fresh and used the your dae file and code.
i used flash file to have a document class called as ‘Papervision3DTutorial’ and it is an as file.
I also traced lines and it works till the following line.
var myPhotoMaterial:Bitmap = new MyPhotoMaterial() as Bitmap;
and then it gives the following problem on that line..
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at Papervision3DTutorial$iinit()
any clue what might be the issue. ?
really appreciate your effort..
Hi Varun,
Could you check if this line is in your class:
[Embed(source="../assets/borobudur-java-indonesia.png")] private var MyPhotoMaterial:Class;
Then make sure if the image is really in that location …
Dennis
yes, the images are there in the location.
I also tried other paths, but it didnt help.
can I have your email id or something where i can mail you the files and you can look over it.. if possible. ??
btw. is there any adobe list of the error code numbers? like what Error #1007
I downloaded and tried this code in Flex and it worked.
It just wont work in Flash IDE. I figured out there would be some behind the scenes flex code that is been added to the above code.
well, right now pretty lazy to figure it out .. will do it later sometime.
but if anyone of you do … please post the result.
Flex 2, 3D max 8 sp3, Papervision3D Beta 1.5
i created a project follow your tutorial. however i get a black screen. the report is ”
Papervision3D Beta 1.5 (23.07.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
[SWF] D:\Flex Workspace\MyFirst3D\bin\MyFirst3D-debug.swf - 1,086,167 bytes after decompression”
If i use your .dae file, all is run OK. But i use mine which i create follow your tutorial,just get a black screen.
I don’t know why?
Hey Field,
Check these options when you export your file:
Standard Options, Relative Paths, Geometry, Normals, Triangulate.
Let me know if this helps!
Dennis
Hi Dennis,
Thank you for your suggestion, all things become OK.
Many many thanks.
i tried it, but everything is pitch black, can somebody help me? or dennis, can i get your e-mail add?… thanks, kemi.
why code change?
rootNode.addChildren( new Collada( XML(new MyCone()), new MaterialsList( myMaterials ) ) );
—->
rootNode.addCollada( “../assets/mycone.dae”, new MaterialsList( myMaterials ) );
Oooops .. that was an old file, thanks for pointing that out!
I installed the code highlighter and gave it an old actionscript file. It’s fixed now!
Thanks for the tutorial!
I finished the tutorial.
i get a black screen too!
i use the Collada v3.04 ,it make a dae file, but i not the same as the file you give it to me,how can do it ?help me please!
Hi Kemi,
You can find my e-mail address on the “about” page.
Dennis
Hey Peter,
Did you use the settings that I mentioned (see a previous comment)? Do you use Flash or Flex?
If you’ve used the standard settings and it still doesn’t work, you can send me the collada file (my e-mail address is on the “about” page).
Dennis
Hi
I tried to run the example on Flash CS3, and i got this error:
source: var myPhotoMaterial:Bitmap = new MyPhotoMaterial() as Bitmap;
description: 1136: Incorrect number of arguments. Expected 2.
I tried to add two parameters to the function and i can get it to run but i can’t see anything on the stage.
Any help is appreciated.
Thanks
Joyrex,
You’re right, that line shouldn’t be in the code .. just delete it and it’ll work!
Dennis
Hi there, thanks for this great tutorial. Im running into an error when running it. I am using Flash CS3 for it. Here is the error:
ReferenceError: Error #1065: Variable MyPhotoMaterial is not defined.
at global/flash.utils::getDefinitionByName()
at org.papervision3d.materials::BitmapAssetMaterial/org.papervision3d.materials: BitmapAssetMaterial::createBitmapFromLinkageID()
at org.papervision3d.materials::BitmapAssetMaterial/set texture()
at org.papervision3d.materials::BitmapAssetMaterial$iinit()
at Papervision3DTutorial$iinit()
I named it correctly in Max, so I am totally stumped. Any ideas? Its probally something simple but I cant seem to figure it out.
hmmm, well I gave it another try from scratch, however this time I used your .dae file. My error went away, however I am getting this one now.
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
I noticed some one else above had a similar issue, but when he was using his .dae file not yours, also I am using Flash CS3. I just cant seem to get this working, any thoughts?
I am having the exact same issue. In fact, I cannot get ANY dae files to import whether I export them from 3DS Max myself using the COLLADA exporter, or whether I just try to follow existing tutorials. No matter what I do, I cannot get DAE’s to import. What could be causing ALL dae’s to not import. My output always looks as follows with whichever DAE I try to use:
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: Cone01
BitmapFileMaterial: Loading bitmap from borobudur-java-indonesia.png
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at org.papervision3d.objects::Collada/::buildObject()
at org.papervision3d.objects::Collada/::parseGeometry()
at org.papervision3d.objects::Collada/::parseNode()
at org.papervision3d.objects::Collada/::parseScene()
at org.papervision3d.objects::Collada/::buildCollada()
at org.papervision3d.objects::Collada/::onComplete()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/flash.net:URLLoader::onComplete()
Papervision works fine, however, when I just generate dynamic primitives. It’s DAE’s that I can’t get to work. Thanks!
Change this line:
rootNode.addChildren( new Collada( “assets/mycone.dae”, new MaterialsList( myMaterials ) ) );
To this:
rootNode.addChild( new Collada( “assets/mycone.dae”, new MaterialsList( myMaterials ) ) );
Then it should work. Make sure you have set the linkage ID in the library asset’s properties!
Dennis
My export displays a cone with the map fine, but doesn’t rotate…
I put a trace after if(myCone) and got nothing….
My output:
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
My export displays a cone with the map fine, but doesn’t rotate…
I put a trace after if(myCone) and got nothing….
My output:
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
Hey there Dennis!
First I want to thank you for this great tutorial, helped me a lot. Cost me a lot of nerves to figure out how to get my own object into all this, but I worked it out I guess. I see the object, with the material even. But I’ve got the same problem as Mickey, can’t get it to rotate. Did the tracing too, well, my output tells me :
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
null
DisplayObject3D: Suzanne
BitmapFileMaterial: Loading bitmap from Monkey_Suzanne.jpg
DisplayObject3D: Lamp
DisplayObject3D: Camera
It’d be great if you possibly know what’s wrong. I can’t seem to figure it out. The problem is, I’m 3D designer, I’ve very few knowladge of AS, let alone AS3. But my boss wants me to get Papervision going so I have no choice to get known to it for now. ^^;
Please let me know if you have any idea. You can mail me as well, it’s “lucifer-x@web.de”.
Marcel
Same issue as the 2 posters above me. Draws a textured cone, but Cone01 can’t be found in the childlist of rootNode within the loop.
Looked at the DAE file and the objectname is correct though…
Any suggestions please?
Great tutorial. I also had the no rotation problem, so I traced out the names of all the children of rootNode. It turns out that the cone is showing up as having the name “3″ instead of “Cone01″. If I change line 82 of the Flash example code to:
var myCone:DisplayObject3D = rootNode.getChildByName(”3″);
…then it works beautifully.
What Brian wrote worked for me too, now I wonder where you named your cone “3″. Was it in max?
to solve the “myPhotoMaterial” error, I’ve just commented this line,
the cone is now displayed!
//myPhotoMaterial: new BitmapAssetMaterial( “myPhotoMaterial” )
I got the same rotation issue as well~ However, when I follow Brian’s method, the rotation goes fine !!!
But which line defines the child name “3″ ??? I really can’t find it ???
First of all… great tutorial, finally you get to see all the basics.
But I have the same problem as the ones above me.
Question is why it’s “3″?
Also noticed one other thing when I changed my cone to a cube (changed nothing else in the code)
It seemed to work the same way until I noticed that when it rotated the cube only had three sides, even though it’s clearly made out to be a cube in Max3…why is that?
I can’t see that beeing defined anywhere.
To clarify, my cube have five sides, not three… but three corners, with some strange morphing
Thanks for pointing this out.Thanks for the very useful demo.
There are some Papervision3D tutorials out in the wild, but the ones that I’ve seen don’t start from scratch. That’s why I decided to put together this step-by-step tutorial to show you how to create a simple 3D object with Papervision3D and 3ds Max. This tutorial assumes that you have some experience with Flex Builder or Flash and ActionScript though. Web / Flash design Thanks for information
A demonstration example is simply excellent. Thank you ! More such materiallov.
Hi guys,
I really enjoyed this excellent tutorial and made a couple of additions to the script for Flash CS3:
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.display.*;
import flash.net.URLRequest;
// Import Papervision3D
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MaterialsList;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.BitmapAssetMaterial;
import org.papervision3d.objects.Collada;
import org.papervision3d.objects.Cube;
import org.papervision3d.objects.Cylinder;
import org.papervision3d.objects.DisplayObject3D;
[SWF(backgroundColor="#000000", frameRate="60")];
public class demo1 extends Sprite {
private var myMaterials:Object;
private var container:Sprite;
private var scene:Scene3D;
private var camera:Camera3D;
private var rootNode:DisplayObject3D;
private var ldr:Loader;
private var url:String;
private var urlReq:URLRequest;
private var cubeMaterials:MaterialsList;
/**
* Constructor
* @return
*/
public function demo1() {
// initialize the objects
init3D();
// add a listener for the 3D loop
addEventListener(Event.ENTER_FRAME, loop3D);
}
/**
* Creates the container, scene, camera and root node
*/
private function init3D():void {
// create the container, add it to the stage, position it
container = new Sprite();
addChild( container );
container.x = 400;
container.y = 200;
// create a new scene and use the container
scene = new Scene3D( container );
// create a new camera and position it
//I used Google Skechup to make the 3d model
// since object is really big I had to reset the camera!
camera = new Camera3D();
//camera.x = -200;
camera.y = 100;
camera.z = -200000;
camera.zoom = 10;
camera.focus = 100;
/*
I thought about importing the pic file direclty from an external file;
no need to put in library first! : Used BitmapFileMaterial class for this
and external URL-call
*/
var ldr:Loader = new Loader();
var url:String = “models/images/Metal_Brass_CeilingnoCulling.jpg”;
var urlReq:URLRequest = new URLRequest(url);
ldr.load(urlReq);
//addChild(ldr);
// create an object containing the material(s)
myMaterials = {
// the property name needs to correspond with the name you gave it
// in 3ds Max. you can also look it up in the collada (*.dae) file:
//
//Import directly via dae file
//myPhotoMaterial: new BitmapAssetMaterial( “Metal_Brass_CeilingnoCulling” )
//Import via external File (see call written above)
myPhotoMaterial: new BitmapFileMaterial( ldr )
};
// add a root node to the scene and add our 3d object by
// reading the Collada (*.dae) file
rootNode = scene.addChild( new DisplayObject3D(”rootNode”) );
//I renamed my dae file by adding “myMesh01″;
//makes it much easier to do the remote call ( no need to look into the dae file)
rootNode.addChild( new Collada( “models/3dcube.dae”, new MaterialsList( myMaterials ) ), “myMesh01″);
}
/**
* The 3D animation loop
* @param event
*/
private function loop3D( event:Event ):void {
// get our object which was renamed above to myMesh01
var mesh_body:DisplayObject3D = rootNode.getChildByName(”myMesh01″);
if (mesh_body != null) {
mesh_body .rotationX++;
mesh_body .rotationY++;
}
// render the camera to see the changes
scene.renderCamera( camera );
}
}
}
For all Google Sketchup Users:
Check this out!
http://www.osflash.org/pipermail/papervision3d_osflash.org/2007-April/004962.html
Great code thanks
Your suggestions are very concrete and helpful. Thanks..
Your 3D model looks fantastic. I used an actionscript project created in Flex builder.Thanks.
Hi, greate job!
But i have some problems. I`m using Flash CS3
Compiler gives such string:
COLLADA file load error Error #2032: Stream Error. URL: file:///D|/Infa/PV3D%5Fsource/assets/mycone.dae
Can you tell me what i`m doing wrong?
Thanks.
Great tutorial. Your model looks fantastic.
Thanks.
I`d fixed all my problems, bur still have some Q-s about dae-file.
0 0 0 24.9647 0 0 24.1141 6.46135 0 ……
My *.dae file has 188 lines, yours - 172.
I check Your and My *.dae files and the only string that needed to be change is:
If i change from Your *.dae file to Mine it`s work.
What does this string DO?
Thanks a lot for letting us know this info. Really informitive, I liked reading it alot..
Very useful info! Excellent 3D model looks fantastic. I successfully experimented with it. Thanks!
A great article and a wonderful instrument. When in master’s hands it becomes like a magic wand. A question, by the way - is it possible to do something like that using animated image?
It is the best tutorial which I saw. Thank you !
Hello ! I tried to add two parameters to the function and i can get it to run but i can’t see anything on the stage.
Any help is appreciated.
Thanks
I wrote:
package {
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.events.Event;
import flash.display.*;
import flash.net.URLRequest;
…
and i cant compilate itp, i have an error . Can you tell me whats wrong?
For Maya users: be sure to triangulate your pologons before export to collada, otherwise you will get the null reference error.
I thought answers and google talk should get more traffic..
I’m also wondering about the rotation, just like they said, I renamed “Cone01″ to “3″ and the rotation started working perfectly!
@Olthrion I think what you’re seeing is your cube, its just that the texture you’re using is not 2sided hence you only see 3 out of the 6 sides, since the other “half” of the cube is showing the other side of the texture which isnt 2sided.
For those of you where renaming “Cone01″ to “3″ seems to fix the animation problem, I have created a quick fix! Here it is:
First, open the collada.as file and go to the constructor method
Change the beginning of the constructor function to:
public function Collada( COLLADA :*, materials :MaterialsList=null, scale :Number=1, initObject :Object=null, newName :String=null )
{
if(newName!=null) {
this.name = newName;
}
//Rest of the function
}
Then go to where the call to rootNode.addChild() is in Papervision3DTutorial.as. Change this call to:
rootNode.addChild( new Collada( “assets/mycone.dae”, new MaterialsList( myMaterials ), 1, null, “Cone01″ ) );
Then you should be able to change the getChildByName(”3″) in the loop3D function back to getChildByName(”Cone01″)!
Hope this helps.
It is good that someone writes articles which really matters something. Thank you for this article, it’s full of knowledge which is hard to find in tons of rubbish in our famous world wide web. Regards and good luck!
Hi there, I too am having the same problem with my own .dae files.
The .dae file downloaded above works fine but my own just get the above error. I am using 3dsmax9 which apparently does not require the colladaMax plugin as it is already built in.
But, alas, no joy! Has anyone got around this please?
Thanks Dan
I read it and i think you right.
Hi there, I too am having the same problem with my own .dae files.
The .dae file downloaded above works fine but my own just get the above error. I am using 3dsmax9 which apparently does not require the colladaMax plugin as it is already built in.
But, alas, no joy! Has anyone got around this please?
Thanks Dan
It is good that someone writes articles which really matters something. Thank you for this article, it’s full of knowledge which is hard to find in tons of rubbish in our famous world wide web. Regards and good luck!
It’s really good written and I fully agree with You on main issue, btw. I must say that I really enjoyed reading all of Your posts. It’s interesting to read ideas, and observations from someone else’s point of view
I tried the comment to modify Collada.as and the code but it never worked for me until I changed the line to get the object to this
from this:
var myCone:DisplayObject3D = rootNode.getChildByName(”Cone01″);
to this:
var myCone:DisplayObject3D = rootNode.children["Cone01"];
Oddly enough I needed this change for the rotation to work.
Da da! Thanks, thanks, thanks! Great job!
Really many thanks for this tutorial.
You don’t know how it is helpful for me.
Greetings from Poland!
thx for the great stuff. set a backlink on this article
Very usefull tutorial. I’ve never used Papervision before. Now it’s so simple
My cone does not spin. My output looks like this. Is that right?
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
Hi. I followed your instructions exactly.
When I publish, all I get is this: http://www.simplicit.co.za/papervisiontest/Papervision3DTutorial.swf
…with this in the output window:
Papervision3D Beta 1.7 (20.08.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Cone01
Any ideas?
Ok. Sorted it out. Changed “Cone1″ to “3″ and it worked.
Also changed my camera settings to:
camera.x = 3500;
camera.z = -800;
Looks like this now:
http://www.simplicit.co.za/papervisiontest/Papervision3DTutorial.swf
As a matter of interest, the line:
[SWF(backgroundColor="#000000", frameRate="60")]
did not determine the background color and frame rate. The background color and frame rate I set in the fla file was what it ran with. Have I done something wrong?
Thanks for the great tutorial. It is a fantastic intro to Papervision3D.
Could you please provide the FLA file itself, i am having a lot of errors
Thanks Merijn
You mean that I need to buy a software (Adobe Flesh CS3 or Adobe Flex Builder) and only after this I can use a open source software (Papervision 3D)?
Are you kiding?
OK. I have perfected the intro tutorial. Thank you very much. You can find my version of the published tutorial here:
http://www.simplicit.co.za/papervisiontest/Papervision3DTutorial.swf
How do I display a preloader for my .dae file? Is there a resource somewhere for preloading Papervision3D content?
Do you are nice
You could also use the opensource prog Blender, it supports DAE Export too
A great and very nice idea!
@coloradoSlim
A useful tip.
Thanks
nice article! keep up the good work my man
Hi; excellent tutorial:
Tank you very much for this step by step tutorial, great job.
About the problem with the name “cone01”, I was checking the DisplayObject3D class and the addChild method has two parameters, the second one sets the name of the child but if not defined the class will reference it using an id property, which is “3” in our case.
So I just add the second parameter “cone01” in the addChild method and voila.
rootNode.addChild( new Collada( "assets/mycone.dae", new MaterialsList( myMaterials ) ), "cone01" );I apologize for my English.
Jorge.
Arr, very interesting tuto, but it still doesn’t work on flashCs3 with my own dae file exported with collada with max9. I tryied 2 times everything that is explain on this forum but it stil doesn’t work…
This should help for couple of posts not answered above. I visited a few sites and came across information that the collada exporter built in inside 3dsmax 9 is a little different while exporting than the actual third party collada plugin used otherwise. Thus the dae file exported will not be the same. Please check and clarify the same.
Bedankt!! Very very nice..
Thanks you verry nicee
http://www.oyunambari.com
There is a mistake in the above code (in both versions): the
rootNode.addChild chould also provide the name ‘Cone01′ (this name is later used to set rotation ), thus the correct form of the corresponding line is:
rootNode.addChild( new Collada( “mycone.dae”, new MaterialsList( myMaterials ) ),’Cone01′ );
Thanks for the post. Made the long effort following all these steps worth it!
Thanks for the post. Made the long effort following all these steps worth it!
It´s a great tutorial with impressive effects.
THX
hi there, my trackbacks does not work. just would like to say thanks for this plugin, appears on my “must-have†list
Arr, very interesting tuto, but it still doesn’t work on flashCs3 with my own dae file exported with collada with max9.
How do I add more materials? I tried adding more materials to the myMaterials function but it wasn’t working and said I needed to close the brace sooner.
Hi, I cant see the object in the Papervision scene…
I dont know what is happening… I’d install the collada plugin exporter for 3dsmax 8, and this is the output from flas cs3.
Papervision3D Beta RC1.1 (18.06.07)
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: rootNode
DisplayObject3D: null
DisplayObject3D: Box
Everything is perfect… BUT
When I use a collada dae file from other, I can see the object, but when I use my own object exported form 3dsmax 8, nothing…
The object is a box with image png file maped.
Directly, dont show the object!!
Any ideas?
I visited a few sites and came across information that the collada exporter built in inside 3dsmax 9 is a little different while exporting than the actual third party collada plugin used otherwise. Thus the dae file exported will not be the same. Please make sure to download and use the right plugin directly from collada instead of using the built in dae exporter in 3dsmax.
Wow, thanks for the great tutorial. For a while I tried to learn creating 3D effects, but on my own it was very hard. But now I can do small 3d effects and will learn to illustrate with 3d. Will read more of your articles!
Best regards,
Jeremy
fine but my own just get the above error. I am using 3dsmax9 which apparently does not require the colladaMax plugin as it is already
Hi there, I too am having the same problem with my own .dae files.
The .dae file downloaded above works fine but my own just get the above error. I am using 3dsmax9 which apparently does not require the colladaMax plugin as it is already built in.
thAnKS good The .dae file downloaded above works fine but my own just get
Great tut man! i was wondering if i could export an entiere animation made in max. Im trying but i can not find the way out. could you gimme a hand?
my e mail: posmodelico@hotmail.com
http://www.pornizlecame across information that the collada exporter built in inside 3dsmax 9 is a little different while exporting than the actual third party collada plugin used otherwise. Thus the dae file exported will not be the same. Please make sure to download and use the right plugin directly from collada instead of using the built in dae exporter in 3dsmax. .net trying but i can not find the way o
Hi,
I’m getting this error:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at Papervision3DTutorial$iinit()
Seems pretty serious! Any idea what I might be doing wrong here?
Thanks!
Hi,
I’m getting this error:
TypeError: Error #1007: Instantiation attempted on a non-constructor.
at Papervision3DTutorial$iinit()
Seems pretty serious! Any idea what I might be doing wrong here?
Thanks!
Sorry - I posted before and my error was that I was not using the code written for the Flash IDE. However, using the correct code, as well as your DAE file, I still get the error that was mentioned in previous posts by others:
ReferenceError: Error #1065: Variable MyPhotoMaterial is not defined.
at global/flash.utils::getDefinitionByName()
at org.papervision3d.materials::BitmapAssetMaterial/org.papervision3d.materials:BitmapAssetMaterial::createBitmapFromLinkageID()
at org.papervision3d.materials::BitmapAssetMaterial/set texture()
at org.papervision3d.materials::BitmapAssetMaterial$iinit()
at Papervision3DTutorial$iinit()
This is driving me crazy - Ive been at it for hours trying to figure it out. What am I doing wrong?
Thanks,
Emmett
I can´t understand. It´s running without any problems.
Hey Emmett,
What Papervision version are you using? v1.7 or v2?
Thanks,
Dennis
Finally i have got it running without any problems and was able to greate some very good effects. Thanks!
Hi Emmett,
How do I add more materials? I tried adding more materials to the myMaterials function but it wasn’t working and said I needed to close the brace sooner.
Can you please email me at erikcussack77@gmail.com
Thanks,
I will try to translate your nice tutorial to my own language and surely credit you for this. Will let you know when it is ready.
HI,Dennis:
I am a chinese,that’s so great to read your article,and I made this tutoria sucessful in Flash.but i got a ploblem that can’t control the size and position of the texture in flash. it just all around the Model,you konw ,that’s usually not we need. can you tell me how to control it with BitmapMaterial(). certainly,wellcom contact me by emial. Thx
please, dont put all code on one line!
Arr, very interesting tuto, but it still doesn’t work on flashCs3 with my own dae file exported with collada with max9. I tryied 2 times everything that is explain on this forum but it stil doesn’t work. Et si vous cherchez un bon site de voyance gratuite and voyance par webcam ou simplement une consultation de voyance, suivez le lien.
I’m importing a .DAE file into papervision but I can’t seem to get the object to reflect light or cast shadows. Will lighting effects in my 3D render program (”Blender”) automatically be rendered by Papervision3D or do I need to set those properties using Papervision3D commands?
Yes i’am agree with you !
Im using the AS3 code, but its obviously in a .as file - to run it, im assuming i need to put some sort of code into an .fla file?
I have tried:
import Papervision3DTutorial;
but that doesnt seem to work - is there anything else i need in the .fla file to execute the .as?
please let me know!
[...] *** Papervision 3D Tutorial from the Ground up [...]