6. Loading Complex Models
Hi, Today we're going to modify the "Creating Objects" project again, this time to load a Collada Model file.
Loading Collada files is the fastest and easiest way in Papervision 3d to get a complex model into your scene. By changing a few lines in your code, we can quickly load a model of a cow and make it spin! The result will be this:
All that, in just a few lines of code!
Let's show you how to spin cows..
We'll need to use the org.papervision3d.objects.DisplayObject3D package to store our model in. This will store the geometry, materials and everything like the position and rotation. We'll also need the Collada file parser.. Change your import lines so they look like this:
import PaperBase; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.parsers.Collada;
They're the only three imports needed!
Now, instead of making a cone, this time we're making a cow, so we change the "public var cone" line to this:
public var cow:DisplayObject3D;
So, that line tells our program that we want to store a DisplayObject3D in a variable called cow.
Now, in the init3d() function code we'll load the Collada file. I have the file stored on my server. You can download it if you want but this example will refer to the model on my server so it will work wherever. Change all of the code in "init3d" to this:
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
cow.moveDown(100);
cow.scale = 3;
cow.pitch(-30);
default_scene.addChild(cow);
Most of that code is just positioning the cow in the scene!
The first line of that code makes the cow variable load the Collada model file from my server. All of the parsing, getting the material and everything like that is done by the Collada package which is pretty neat!
We then move the cow down a bit, tilt her towards the camera, and add her to the scene.
All that's needed now is to rotate the cow each time the frame is processed. Simple! Change the code under "processFrame" so that it reads:
cow.yaw(5);
and you're all done!
My final code is here:
-
package {
-
-
import PaperBase;
-
import org.papervision3d.objects.DisplayObject3D;
-
import org.papervision3d.objects.parsers.Collada;
-
-
public class Main extends PaperBase {
-
-
public var cow:DisplayObject3D;
-
-
public function Main() {
-
init();
-
}
-
-
override protected function init3d():void {
-
cow = new Collada("http://papervision2.com/wp-content/downloads/dae/cow.dae");
-
cow.moveDown(100);
-
cow.scale = 3;
-
cow.pitch( -30);
-
default_scene.addChild(cow);
-
}
-
-
override protected function processFrame():void {
-
cow.yaw(5);
-
}
-
-
}
-
-
}




Cow does not have texture as pictured:
package {
import PaperBase;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
public class MainCow extends PaperBase {
public var cow:DisplayObject3D;
[Embed(source="./cow.dae", mimeType="application/octet-stream")] private var Cow:Class;
public function MainCow() {
init();
}
override protected function init3d():void {
cow = new Collada(XML( new Cow() ) );
cow.moveDown(100);
cow.scale = 3;
cow.pitch( -30);
default_scene.addChild(cow);
}
override protected function processFrame():void {
cow.yaw(5);
}
}
}
Thanks rob, I personally didn't have this problem - Maybe its some kind of security issue - something stopping the flash viewer from accessing my server.
If you want to download the model and the texture, you can get them here:
http://papervision2.com/wp-content/downloads/dae/cow.dae
http://papervision2.com/wp-content/downloads/dae/Cow.png
- Luke
In the text of the tutorial, you have a typo, using "modeDown" instead of "moveDown". This mistake is not present in the final code block. Just thought you might want to know.
Thanks Joshua, Fixed
- Luke
-what's the software 3d that you use to make a collada like cow.dae ?
-because i have some problems with 3dmax i can't export collada object like you do??
-you can give us the code to add texture(by url) to an collada object??
thanks
Hi Abdel,
Unfortunately I didn't make the Cow that I've used in the example - I'm planning on creating a Collada download section soon as one of the problems that I had when I first started with Papervision was finding good Collada files to use!
Collada files have their texture paths defined in them. If you open up my cow Collada file you'll see the line./Cow.png "
"
Try changing that to a url if you want to load the image from somewhere else.
That's the easiest way to add a texture to a Collada file by url, hope that helps!
- Luke
Great tutorials! Thanks, I really enjoy the material on this site as I'm playing with Papervision 2.
Quick question- When using the PaperBase class, what's the "Best Practice" way to listen for key events? IE should I use event listeners, or poll for key-downs in the processFrame() function? To which function should I add the event listeners?
Hi Lee,
There's a tutorial coming shortly on handling keyboard input - I think the best way to do it would be to add the lines:
Just below the "init()"; line. Then, create two functions named onKeyDown and onKeyUp, so your code will look like this:
Using that code, the onKeyDown function will be fired when you press a key down and the onKeyUp function when you relese it.
To work out which keycode is assigned to which key, I put the line "trace(keyCode);" into the onKeyDown function, then when you run the project in debugging mode, the output console will log the value of the key when you press it.
Hope this helps
- Luke
Thanks Luke for the tutorial, all is working well!
Looking forward to the next steps...
David
First, thanks for this tutorials.
Now, I haven't tried this yet, but this seems to work as fine as collada. Is for Blender users http://rozengain.com/?postid=54
Hope to be usefull.
Hey,
Thanks a lot for the great tutorials. Works fine.
On another topic --> I'm trying to extend this to make morph animations. Basically, displacing the vertices of the object (probably interpolating vertex positions from two separately loaded .DAE objects). I tried doing that on the primitives like sphere and cube and it works fine, but whenever loading a Collada file, I can't access the geometry as the geometry property remains NULL whatever i do.
I just added a 'trace(cow.geometry);' as well as the appropriate import (import org.papervision3d.core.geom.*;) but that doesn't see to work. I always get NULL for the cow geometry, although the doc says I should retrieve an array
Any idea?
Francois
hi everyone
am new, just want to say thank you to Luke for the tutorials.
but i have a question.
Firstly, In (Loading Complex Models) tutorial 6. the sample shows the mesh with a material.
But for some reason i was only able to load the mesh. And with the tutorial and fixes above I still could
not load the material with the mesh.
Question: how do I load both the mesh and the material.
Thanks
hi guys
could someone please help me
the cow mesh only appears in black color without the material.
please!!!
How can I change the cow texture?
Hello - My first post - Looks like a lot of good, helpful work here.
My question - Would it be possible to load the name of a .dae file into the compiled flash .swf using a flash var. The flash music players work this way so you can load different songs. I guess the technical question is - is the .dae file compiled in the .swf or parded at runtime to allow changing files on the fly?
Carl Newman
Hi guys,
you have done a really nice job with that 3D Engine
I wanted to ask if somebody knows how to export the Collada models? I am using Blender and there is a collada export possibility, but there are a lot of preferences, for example export as trialngles or polygons, also the version of collada , there is 1.3 and 1.4
Another question is if the model itself must be created in some special way ?
Thanks in advance
Martin Dobrev
Hi Luke
I would like to know what is the maximum number of triangles that the collada can handle, i mean, when i translate one scene from 3dsmax to .DAE i find out that the renderer can´t work with many triangles, so is there any max number of them?
Great tutorials Luke, keep up the great work.
How do you apply an interactive material to an imported dae/xml model? This one has been alluding me. Thanks in advance.
Andrew
This tutorial gives really a very quick starting point.Thanks a lot for your well done work, Luke!
Thomas
Thank you for all these great free tuts!
Great tutorials Luke - well written, clear, concise and extremely helpful.
Thank you.
Helo
I found plugin for 3ds max to export collada file that is supported by papervision:
http://www.feelingsoftware.com/content/view/65/79/lang,en/
Its for free,have to register on the site. I tried it it works.
Or just have a look at the product directory for collada-tools:
http://www.collada.org/mediawiki/index.php/Portal:Products_directory
Cheers,
Dirk
[...] For at loade Collada filen ind i Papervision, læs denne tutorial. [...]
Hello,
I have a question of this example and the creation of simple models. I would like to create a galaxy with his planets, sun and movements around this.
I have initial code creating a spheres with the Sphere variable of Papervision. What is the best option: Papervision code or import a modeling with collada?
This is the code:
package jel.com.pv3d
{
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import jel.com.main.CanvasFlash;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Sphere;
import org.papervision3d.scenes.MovieScene3D;
public class SistemaSolar extends CanvasFlash
{
private var escenario3D:MovieScene3D;
private var camara:Camera3D;
private var dummySol:DisplayObject3D;
private var dummyTierra:DisplayObject3D;
private var dummySolJupiter:DisplayObject3D;
private var sol:Sphere;
private var tierra:Sphere;
private var luna:Sphere;
private var jupiter:Sphere;
public function SistemaSolar(_width:Number, _height:Number) {
this.width = _width;
this.height = _height;
//Creamos un fondo de estrellas, 400 para ser más exactos.
creaFondoEstrellas(400);
//creamos un sprite y se lo asignamos al escenario3D
//hay que centrarlo en pantalla, dando la mitad del ancho y el alto de la misma.
//de no hacer esto, los objetos aparecerían en la esquina superior izquierda de la pantalla
var contenedor_spt:Sprite = new Sprite();
contenedor_spt.x = 0.5*_width;
contenedor_spt.y = 0.5*_height;
this.addChild(contenedor_spt);
escenario3D = new MovieScene3D(contenedor_spt);
//creamos la cámara y definimos su zoom y la distancia a la que está el objetivo
camara = new Camera3D(DisplayObject3D.ZERO);
camara.zoom = 8;
camara.focus = 100;
//movemos la cámara hacia atrás y arriba para mirar al mundo desde un ángulo ligeramente picado
camara.moveBackward(1750);
camara.moveUp(1500);
//creamos 2 objetos dummys para hacer que un astro gire sobre su eje
//a una velocidad angular distinta que su satélite a su alrededor
//pero si no se quiere esto, los dummys no son necesarios
dummySol = new DisplayObject3D();
dummySolJupiter = new DisplayObject3D();
dummyTierra = new DisplayObject3D();
//creamos un material con la textura de la superficie del sol, que cargamos de la carpeta imagenes
//y una esfera para simular el Sol
var materialSol:BitmapFileMaterial = new BitmapFileMaterial("imagenes/sol.jpg");
//materialSol.smooth = true;
sol = new Sphere(materialSol, 200, 20, 16);
//idem para la tierra
var materialTierra:BitmapFileMaterial = new BitmapFileMaterial("imagenes/mundo.jpg");
//materialTierra.smooth = true;
tierra = new Sphere(materialTierra, 100, 20, 16);
//idem para la luna
var materialLuna:BitmapFileMaterial = new BitmapFileMaterial("imagenes/luna.jpg");
//materialLuna.smooth = false;
luna = new Sphere(materialLuna, 30, 20, 16);
//idem para la luna
var materialJupiter:BitmapFileMaterial = new BitmapFileMaterial("imagenes/jupiter.jpg");
//materialLuna.smooth = false;
jupiter = new Sphere(materialJupiter, 120, 20, 16);
jupiter.x = 1400;
dummySolJupiter.addChild(jupiter);
escenario3D.addChild(dummySol);
escenario3D.addChild(sol);
//la tierra la vinculamos a dummySol, para darle una velocidad de rotación en torno al sol
//distinta de la rotación del sol sobre su eje.
//idem para la relación de vinculación tierra/luna
dummySol.addChild(dummyTierra);
dummyTierra.addChild(tierra);
dummyTierra.addChild(luna);
escenario3D.addChild(dummySolJupiter);
dummyTierra.x = 850; // distancia entre la Tierra y el Sol
luna.x = 250; // distancia entre la Tierra y la Luna
sol.container.filters = [new GlowFilter(0xFFD648, 0.5, 35, 35, 2.0, 2.0)];
//declaramos esta clase como oyente del evento ENTER_FRAME
//esto hace que el método onEnterFrame sea llamado 25 veces por segundo (el frameRate de reproducción de la aplicación)
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
//método que dibuja estrellas aleatoriamente en el fondo
private function creaFondoEstrellas(num:uint):void {
var fondoEstrellas:Sprite = new Sprite();
fondoEstrellas.graphics.clear();
fondoEstrellas.graphics.beginFill(0x000000, 1.0);
fondoEstrellas.graphics.drawRect(0,0, this.width, this.height);
fondoEstrellas.graphics.endFill();
var radio:Number;
for (var i:uint=0; i<num;i++) {
radio = 1.5*Math.random();
fondoEstrellas.graphics.beginFill(0xffffff, 0.7);
fondoEstrellas.graphics.drawCircle(this.width*Math.random(), this.height*Math.random(), radio);
fondoEstrellas.graphics.endFill();
};
this.addChild(fondoEstrellas);
}
//este método es llamado cada 1/25 de segundo (cada vez que se produce un evento ENTER_FRAME)
private function onEnterFrame(evt:Event):void {
//rotamos 2 grados la esfera que representa al globo terráqueo y renderizamos el escenario para que se actualice la vista
sol.rotationY -= 0.2; //rotación del Sol sobre su eje
dummySol.rotationY -= 0.5; //rotación del resto de cuerpos sobre el Sol
dummyTierra.rotationY -= 2; //rotación de la Luna sobre la Tierra
tierra.rotationY -= 1.5; //rotación de la Tierra sobre su eje
//luna.rotationY -= 1; //si quieres que la Luna tenga un mov. relativo sobre su eje, activa esta línea; aunque creo que la luna siempre nos muestra "la misma cara"
dummySolJupiter.rotationY -= 0.3; //rotación de Júpiter
jupiter.rotationY -= 0.75
escenario3D.renderCamera(camara);
}
}
}
Thank you!
[...] http://papervision2.com/loading-complex-models/ [...]
[...] Simple Collada Load [...]
@Martin
I really hope you've received an answer by now to your queries:
"I wanted to ask if somebody knows how to export the Collada models? I am using Blender... there are a lot of preferences, for example export as trialngles or polygons, also the version of collada, there is 1.3 and 1.4.
Another question is if the model itself must be created in some special way ?"
Sorry if you've had to wait 3 months! :\
Anyway, here's how I'm doing it with Blender:
- Export using Collada 1.4
- Export as Triangles (we're not supporting Polygons yet... but it'll be great when we do!)
- Before exporting, I select all the geometry I want exported and then select the option "Only Export Selection", otherwise, the lights/lamps and cameras in your scene will be exported as well.
I haven't tested out the "Sample Animation" option yet, but any animation your geometry has is included in the Collada file.
As as creating a model "in a special way"... I haven't had to do anything special. Try using the steps I outline above with some simple models (like a couple cubes, and then, say two intersecting planes) to see how it works.
Man, COLLADA and PV3D both rock!
this is amazing! please keep up your awesome tutorials!
Greetings from Germany
I just wanted to thank you for your GREAT WORK!!! there are not much tutorials that are so easy to understand!
awesome tutorials, thanks so much.
i can get the cow.dae file to load in, but i'm trying to load in my own and nothing's showing up -
1.i make my model with Cinema 4D
2.export as an .fbx
3.use the Alias FBX converter, convert it to a .DAE file
import it in and it's blank.
if i copy the xml from the cow.dae file and paste it into the new file it works,
i'm really puzzled. any ideas anyone?
thanks again luke!
Alright, it's great to have such a real cow in Flash. By the way, where is the milk?
Luke, would you so kind to make us a tutorial which make the cow walking? i mean we are easy to move the cow from left to right but I don't know how to make the cow walking which we will it moves it legs while we are moving the cow???
traditionally, i will make the cow with walking movie frames and gotoandplay it while the player is pressing the right arrow key.
how do I make such things in paperVision?
I tried to export a model from 3D studio, using colladaMax...but no results!
I am not able to export its texture, and i see in flash only some parts of my model.
I think i must set some settings in 3ds exporting panel..but i dont know the right way!
Can someone help me?
great tutorial!
hey luke,
great tutorials as everyone has said, makes getting into papervision so much easier. i actually took the advice on one comment and am using Flash cs3 to export projects out of, as i'm more used to that. the only problem is it takes ages to export a scene (like 30 seconds). i've placed all the great white files in the same directory as the paperbase.as (com, org, etc). this works well but i'm wondering if i set things up differently would it speed up export of .swfs? even complex .swfs of other projects have never taken this long.
Hi People... my OUTPUT say this:
Papervision3D Public Alpha 2.0 - Great White (3.12.07)
PV3D 2.0a WARNING : DO NOT USE WITH BETA 9 PLAYERS. ONLY WITH OFFICIAL TO TEST.
CHECK YOUR VERSION!
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: null
DisplayObject3D: vsn-mats
BitmapFileMaterial: Loading bitmap from http://papervision2.com/wp-content/downloads/dae/Cow.png
Whats the Problem? My COW doesnt appear !!!