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

Answer 5

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 6

For those who are reading this in 2021, and hopefully later as well, I want to elaborate on the provided answers and comments, which are generally great.

First, the Three-to-Blender exporter is not a valid option anymore as it was removed from the Three.js code base.

Secondly, COLLADA is not viable too as it got too many corner cases with this format which is not well optimized for the Web.

So the recommended way now is to use Blender's glTF 2.0 exporter and Three.js GLTFLoader class. See this tutorial for usage.