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 anyone help me out with this? I just want the 3D Mesh to display in the web, no animations included. Thanks!

Answer 1

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 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 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 );
});