htmlcanvasthree.jsblender

Blender export to Three.js


I just created a random mesh using Blender and I want to export it to be used in HTML5 via the Three.js. I haven't seen any decent tutorials that shows how to do this. Can anyone help me out with this? I just want the 3D Mesh to display in the web, no animations included. Thanks!


Solution

  • The easiest way I found after many searches and trial and error was Three.ColladaLoader. Place your .dae files in a folder titled models in your /root directory. I found the Blender JSON exporter less reliable. Call the PinaCollada function from within the init() function, somthing like this:

    function init(){
       const scene = new THREE.scene;
       // ...
       const object1 = new PinaCollada('model1', 1);
       scene.add(object1);
       const object2 = new PinaCollada('model2', 2);
       scene.add(object2);
       // ...
    }
    
    function PinaCollada(modelname, scale) {
       const loader = new THREE.ColladaLoader();
       let localObject;
       loader.options.convertUpAxis = true;
       loader.load( `models/${modelname}.dae`, function colladaReady( collada ) {
           localObject = collada.scene;
           localObject.scale.x = localObject.scale.y = localObject.scale.z = scale;
           localObject.updateMatrix();
       } );
       return localObject;
    }