No texture when exporting a model from Blender to Three.js

Question

I am trying to export a model with texture from Blender for use in Three.js, using the Blender export to Three.js plugin.

http://i.imgur.com/enj1GQW.png

1. (Red) is Inside Blender, before exporting, what the model looks like. The textured applied to the model was marble.
2. (Blue) after exporting the model to Three.js format (filename fullBoard.js) and reopening in Blender
3. (Green) Using the previously mentioned export with Three.js

My Javascript function for initalizing the model:

    function init2(){
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 100;

    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight( 0x101010 );
    scene.add( ambient );

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0.5, 2, 1 ).normalize();
    scene.add( directionalLight );

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    var loader  = new THREE.JSONLoader();

    loader.load( 'objects/fullBoard.js', function ( geometry, materials ) {
        var material1 = materials[ 0 ]; //black
        var material2 = materials[ 1 ]; //white
        mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
        mesh.scale.set(5,5,5);
        scene.add( mesh );
    }  );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    window.addEventListener( 'resize', onWindowResize, false );

}

I have been struggling to find an easy way to make custom 3D models for use with Three.js that have texture. I have also tried to export .dae files with the THREE.ColladaLoader() and that method also did not produce texture.

Answer 1

The blender procedural textures won't export by default. You can however, bake them into regular textures and then export. There are tutorials on the web.

I also would recommend using a different exporter, like binary GLTF (.glb)

I used to use the three.js exporter but found that it would go out of date relatively often between revisions of three.js, and if you use an existing format like gltf, or collada, you will have better interoperability with other programs if you need to make changes later but have lost the originals.

GLTF also has the nice benefit of compressing meshes which can make a huge difference for web delivered content.