Recently I had been doing a little more work in Away3D and I needed to use an object that was more complex than a preset primitive. After looking through some of the Away3D examples I tried bringing in my own model from Cinema4D. I quickly found that setting up and exporting your file correctly is half the battle. In this tutorial I’ll explain how to create a primitive in cinema4D export it correctly for Away3D inside flash. Source code is available at the bottom. Use the right/left arrows to switch models and the up/down to change the texture. Below is the final product:
It all starts in Cinema4D. I’m using Cinema4D R11. Create a new project and start with a tube primitive. Below are some of the parameters I used
Tube Properties
Then select the primtive and hit the “C” button. This will convert it to a polygon object. Your object manager should now look like this:
Now we will add a new material. I downloaded a metal texture off of CG Textures and reduced it’s size to 256 x 256. In a 3d system inside flash the two biggest things that can quickly bring your project down are the number of vertices in your model and the dimensions of your texture. Some general numbers are that a scene can support around 6,000 vertices give or take. So it’s great for simple scenes but for anything larger you might want to try another 3d environment like unity3d.
and when you get prompted to copy a version of your texture file to the textures folder hit yes, it will save some hassle later with the file path. Also be sure to rename the texture to something recognizable like “RingMat” so that it can be identified later.
Now switch over to vertices mode and hit apple + a to select all the points. Then select functions > triangulate. In Cinema4D will default to drawing quads or units of 4 points. Inside Away3D it draws with triangles so we need to make this adjustment.
Now we switch over to BodyPaint UV Edit where we can quickly adjust the UV Map so it doesn’t look quite so hideous. If you are new to UV mapping and 3d in general UV mapping allows you to customize and control how your 2d texture appears on geometry and shapes in 3d. UV Mapping is an art in itself and can take weeks to do perfectly. For this exampl and for other simple tasks the UV Editor inside Cinema4D can take a lot of the work out of it.
Now select the UV Mapping wizard.
Now just have to go through all the steps of the wizard.
We will be using the object option.
There are multiple ways you can map coordinates to a texture. Cubic Mapping will work fine in this case. Cubic maps generally make simpler uv coordinate systems. Angle mapping by default will have a collection of smaller more precise parts.
Now select the color channel until it has a – through it’s check box. Otherwise the UV Wizard will overwrite the texture that we already set. If we had a more complicated texture scheme we’d want to map other channels too. But for now color will suffice. Now switch over to polygons mode. Hit cmd + a to select all the polygons. If the selected polygons are orange that means their normals are facing the correct direction.
For the non initiated when a 3d renderer draws all the vertices it draws them in order and this order determines which way it faces. The flat solid part drawn between them is also called a face. A 3d engine does not render faces that do not have their normals facing the camera. So they save on resources by only rendering half of what we need too.
Now the good part: we export! In this screenshot is also a rendering of what the new UV Map looks like.
Export the file in into your project. You will need to also copy the /tex folder into wherever you export your .dae ( collada ) file. This is because inside the Collada file it specifies a URL to it’s default material. Open up the Collada file in your preferred text editor. TextMate or BBEdit are popular choices: I’ll be using BBEdit.
A Collada file is basically a large XML File with specific nodes for a 3d scene including vertices, UV Coordinates, and texture parameters. Inside <libraray_image> there is the <init_from> that specifies the URL of a UV texture. If you are using Cinema4D 11.5 it will provide an absolute url but you can change it to relative like the screenshot above.
Inside the <library_materials> you can spot the texture we named inside Cinema4D. We will use “ID3″ inside Away3D to get the material info we need.
Now onto the code. The code is written with a .fla and a document class but it will work as pure actionscript. There is nothing linked in the library or any other dependencies. When I use Away3D in a project I usually place all the 3d information inside a seperate class but here the document class should be fine. I always make a createAway3D function()
In this function we create a test object to make sure our scene renders. Away3D is composed of a few basic parts. First we have the View3D: think of this as a sprite that will hold and render your 3d scene. The Camera is how the scene will be viewed: it’s the window to your 3d world. Views are also comprised of scenes which is a holder for all of your 3D Objects. The last component of a view is the renderer: this is what will actually rasterize your 3d scene into a 2d image every frame. In Away3D when you create an 3d Object you pass in a separate object with all the properties that you want initialized. The x + y properties dictate where the center of the scene is. The view will automatically be full stage size.
To call the collada file you create a new Loader3D class and use the static Collada.load() method. In the document class you can see the onLoaderSuccess Method but it’s fairly straight forward. In a collada file we have to access the material through the MaterialData class. Here we plug in the ID3 that was identified in the Collada .dae file.
One last concept that I used in this code is Bitwise operations. Bitwise operations are quicker ways of doing simple operations. There are a whole slew of bitwise operations that can be quickly googled for. This bitwise operation will cycle through all the items in the array and when it reaches the end will return to zero.
That’s it! Full Collada model support. If you are having trouble seeing your model make sure that your normals are correct and try adjust the size drastically. Sometimes my models come out with .25 , 5 , or 90 for the scale. It’s all relative. The source code is available here.
