ThreeJs and Blender (using colladaLoader): first contact

Question

How can I render an exported scene (with many objects, each with different colors and different properties, such as rotation aroung an axis in the scene) from Blender (with colladaLoader -->.dae) in ThreeJs?

Answer 1

So, the first step is to learn how to create a scene in threeJs and learn some feature with Blender. When you are ready, create your first model and before exporting keep this in mind:

1. you need to an object with vertices, so if you just create a text with Blender, you have to convert it to a mesh, otherwise threeJs will not render it
2. be sure to choose the Blender render option and not the Cycles, otherwise the .dae you export will not be rendered in threeJs
3. when applying a texture, use just colors and basic materials (basic, phong and lambert) - the others will not work using the colladaLoader
4. to see if the object will be rendered with color in threeJs with colladaLoader just look at object in Blender with object mode (solid) - if it's gray and not colored of the color you choose, it will be rendered in threeJs the same way
5. if you apply the 'solidify' modifier to the object and then on threeJs set it to transparent, it will be rendered as wireframed
6. if you append multiple objects in the scene and 'join' them, the respective positions and rotations will be respected in threeJs, otherwise not: for example, if you want to renderize a flower in the bottle (and thoose objects are different blender files which are appended/linked in the scene), the flower will not fit in the bottle in threeJs, but would have a different position and rotation than the bottle
7. grouping the objects will not solve this: to see the scene as you see it in Blender you have to 'join' the objects (with the consequences that this entails) or manually change position and rotation on threeJs the .dae export options don't matter for the rendering of the object in threeJs

and now, the part that regards threeJs:

be sure to import the colladaLoader with:

<script src="jsLib/ColladaLoader.js"></script>

insert this code into your init() function so the loader will load your .dae model:

var loader = new THREE.ColladaLoader(); 
loader.options.convertUpAxis = true; 
loader.load( 'model.dae', function ( collada ) { 
  // with this you can get the objects of the scene; the [0] is not the first object 
  // you display in blender in case of many objects (which means you didn't join them) 
  var obj1 = collada.scene.children[0]; 
  // you can name the object so you can use it even out of the function, if you want 
  // animate it for example obj1.name = "daeObj1"; 
  // you can set here some material properties as trasparency 
  obj1.material.needsUpdate = true; 
  obj1.material.transparent = true; 
  obj1.material.opacity = 0.5; 
  obj1.hearth.material.wireframe = false; 
  // and now some position and rotation for good visualization 
  obj1.position.set(0, -5, -0.6); //x,z,y 
  obj1.rotation.set(0, 45, 0); 
  // and add the obj to the threeJs scene 
  scene.add(obj1); 
});

and some code to the animate() function if you want to update some of your objects, with rotation for example

scene.traverse (function (object) { 
   if (object.name === 'daeObj1') { 
     object.rotation.z -= 0.01;
   }
 });

I hope someone will benefit from this post