Blender export to Three.js

Question

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

Answer 1

I used the: Blender3d ver 2.78, export script add-on found in three.js utilities folder with the three.js version 60, I added this script to my Blender's add-ons folder where the blender program was setup. Modeling in Sketchup, I exported as a model.dae ( Collada file ), imported that into Blender3d version 2.78 ran the setup for the add-on exporter, exporting Blender3d as a Three.js file. This json file I saved as a .js ( javascript-object ) and not as a .json (JavaScript Notation object)

that object, ( textured correctly ) was ran like this:

///// GROUND CHERRY MESH    

var myShaderMaterial = new THREE.MeshPhongMaterial({ 
          // ADDING TEXTURE 
    map: THREE.ImageUtils.loadTexture('models/MyBistro/ShelfTextures/ground_cherryTEX_001a1.png'),
    specular: 0xFFFFFF,
    shininess: 80,
});         
          // ADDING MODEL OBJ  
var loader = new THREE.ObjectLoader( manager );
loader.load( 'models/MyBistro/ShelfTextures/MyShader1aTEST_TWO.js',  function ( object ){       
    object.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            var geometry = child.geometry;
            object = new THREE.Mesh(geometry,  myShaderMaterial);
            object.scale.set(1.60, 1.60, 1.60);         
            object.position.x =  + 22.10;           
            object.position.y =  - 84.0;            
            object.position.z =  - 4.0;                     
            object.rotation.y = Math.PI / 0.10;                     
            object.castShadow = true;
            object.receiveShadow = true;            
            child.material.map = myShaderMaterial;
            child.material.needsUpdate = true;          
         }      
    }); 
  scene.add( object );  
});

Answer 2

you need the threejs blender exporter: read this

Answer 3

var loader = new THREE.JSONLoader(true);
loader.load({
    model: "model.js",
    callback: function(geometry) {
        mesh = new THREE.Mesh(geometry,new THREE.MeshFaceMaterial);
        mesh.position.set(0,0,0);
        mesh.scale.set(20,20,20);
        scene.add(mesh);
        renderer.render(scene, camera);
    }
});

Is a basic json loader for THREE.JS; you also need to look into:

How to set up the canvas, scene, lights and camera (if you haven't already and aren't using the blender ones)

morphTargets (if you are animating)

materials (if you want to tweak)

Answer 4

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(){
    scene = new THREE.scene;
    ...
    var object1 = new PinaCollada('model1', 1);
    scene.add(object1); 
    var object2 = new PinaCollada('model2', 2);
    scene.add(object2); 
    ...
}

function PinaCollada(modelname, scale) {
    var loader = new THREE.ColladaLoader();
    var 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;
}

Answer 5

The selected answer doesn't return a promise or a callback, so you don't know when you can set things. I've added a small class that will and shown how you can use it. It wraps collada loader.

var ColladaLoaderBubbleWrapper = function() {
    this.file = null;
    this.loader = new THREE.ColladaLoader();
    this.resolve = null;
    this.reject = null;

    this.colladaLoadedNotifier = this.colladaLoadedNotifier.bind(this);
    this.onLoad = this.onLoad.bind(this);
};

ColladaLoaderBubbleWrapper.prototype.loadCollada = function(file) {
    this.loader.load(file, this.onLoad, this.onDownloadProgress);
    return new Promise(this.colladaLoadedNotifier);
};

ColladaLoaderBubbleWrapper.prototype.colladaLoadedNotifier = function(resolve, reject) {
    this.resolve = resolve;
    this.reject = reject;
};

ColladaLoaderBubbleWrapper.prototype.onLoad = function(collada) {
    this.resolve(collada);
};

ColladaLoaderBubbleWrapper.prototype.onDownloadProgress = function(xhr) {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
};

Then to use it include the collada loader:

<script src="js/loaders/ColladaLoader2.js"></script>
<script src="js/blender/colladaBubbleWrap.js"></script>

and in your main js

var colladaLoader = new ColladaLoaderBubbleWrapper();
var colladaLoaded = colladaLoader.loadCollada('colladas/brick/brick.dae');
colladaLoaded.then(function(collada) {
    scene.add( collada.scene );
});