How can I Import my object with it's inherent textures from Blender to ThreeJS?

Question

I have used the STL Loader for threejs to import my object from Blender into threejs but for some reason, the textures don't appear. I assume it has to do with the object's MeshBasicMaterial. I tried changing it to Phong but the object turns black instead.

Then I realized, instead of changing the material from basic to phong, why can't I kept the inherent features/textures from Blender when I load the object from STL loader to threejs? Is there a way to keep the texture? Is there a tutorial I can follow?

THanks!

EDIT:

Here's a snippet of my code where I exported my Blender object with textures to a threejs .js file. The object loads in my viewer but it's black with no textures. I'm not sure how to fix this. I followed another example that used an inn for texture (hence the name. Didn't change the name yet).

var Viewport = function ( signals ) {

var container = new UI.Panel( 'absolute' );
container.setBackgroundColor( '#aaa' );

var clock = new THREE.Clock();

// settings
var enableHelpersFog = true;

// helpers

var objects = [];
var INTERSECTED;

var sceneHelpers = new THREE.Scene();

//the grid that appears at the beginning. 
var size = 500, step = 25;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );

for ( var i = - size; i <= size; i += step ) {

    geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
    geometry.vertices.push( new THREE.Vector3(  size, 0, i ) );

    geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
    geometry.vertices.push( new THREE.Vector3( i, 0,  size ) );

    var color = i === 0 ? color1 : color2;

    geometry.colors.push( color, color, color, color );
}
var grid = new THREE.Line( geometry, material, THREE.LinePieces );
sceneHelpers.add( grid );


///Objects stuff
var objectshapes = [];

//stl files
group = new THREE.Object3D();




            var loader_slotted_disk = new THREE.STLLoader();
            loader_slotted_disk.addEventListener( 'load', function ( event ) {
                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh1 = new THREE.Mesh( geometry, material );

                mesh1.name='slotted disk';
                mesh1.castShadow = true;
                mesh1.receiveShadow = true;

                sceneHelpers.add( mesh1 );
                objectshapes.push( mesh1 );

            } );    
            loader_slotted_disk.load( 'js/ui/assests/slotted_disk.stl' );

            var loader_left_bronchus = new THREE.STLLoader();
            loader_left_bronchus.addEventListener( 'load', function ( event ) {

                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh1 = new THREE.Mesh( geometry, material );

                mesh1.name='left bronchus';
                mesh1.castShadow = true;
                mesh1.receiveShadow = true;

                mesh1.position.x = Math.random() * 200 - 50;
                mesh1.position.y = Math.random() * 200 - 50;
                mesh1.position.z = Math.random() * 200 - 50;

                sceneHelpers.add( mesh1 );
                objectshapes.push( mesh1 );

            } );
            loader_left_bronchus.load( 'js/ui/assests/left_bronchus.stl' );

            var loader_parenchyma = new THREE.STLLoader();
            loader_parenchyma.addEventListener( 'load', function ( event ) {

                var geometry = event.content;
                console.log(geometry);
                var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                var mesh2 = new THREE.Mesh( geometry, material );

                mesh2.name='parenchyma';
                mesh2.castShadow = true;
                mesh2.receiveShadow = true;

                sceneHelpers.add( mesh2 );
                objectshapes.push( mesh2 );

            } );
            //loader_parenchyma.load( 'js/ui/assests/parenchyma.stl' );

            //group.rotation.x = Math.PI* 3/2


            ////////////
// CUSTOM //
////////////



                        var inn_loader = new THREE.JSONLoader(); inn_loader.load("js/reducedandcoloredmodel[Conflict].js", function(geo, material) { var materials = new THREE.MeshFaceMaterial(material); inn = new THREE.Mesh(geo, materials); scene.add(inn); }); // 
///stl files added

            var geometry = new THREE.CubeGeometry( 50, 50, 50 );
            var geometry2 = new THREE.SphereGeometry( 50, 10, 10);

            var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
            object.name = "cube";

            object.position.x = Math.random() * 200 - 50;
            object.position.y = Math.random() * 200 - 50;
            object.position.z = Math.random() * 200 - 50;


            object.rotation.x = Math.random() * 2 * Math.PI;
            object.rotation.y = Math.random() * 2 * Math.PI;
            object.rotation.z = Math.random() * 2 * Math.PI;

            sceneHelpers.add( object );
            objectshapes.push( object );

            var object2 = new THREE.Mesh( geometry2, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
            object2.name = "sphere";

            object2.position.x = Math.random() * 200 - 50;
            object2.position.y = Math.random() * 200 - 50;
            object2.position.z = Math.random() * 200 - 50;

            object2.rotation.x = Math.random() * 2 * Math.PI;
            object2.rotation.y = Math.random() * 2 * Math.PI;
            object2.rotation.z = Math.random() * 2 * Math.PI;

            sceneHelpers.add( object2 );
            objectshapes.push( object2 );
            console.log(objectshapes);


///box around object
var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, fog: false } ) );
selectionBox.matrixAutoUpdate = false;
selectionBox.visible = false;
sceneHelpers.add( selectionBox );

///axis
var selectionAxis = new THREE.AxisHelper( 100 );
selectionAxis.material.depthTest = false;
selectionAxis.material.transparent = true;
selectionAxis.matrixAutoUpdate = false;
selectionAxis.visible = false;
sceneHelpers.add( selectionAxis );

// default dummy scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );;

// fog

var oldFogType = "None";
var oldFogColor = 0xaaaaaa;
var oldFogNear = 1;
var oldFogFar = 5000;
var oldFogDensity = 0.00025;

// object picking

var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000, 8, 8 ) );
intersectionPlane.visible = false;
sceneHelpers.add( intersectionPlane );

var ray = new THREE.Raycaster();
var projector = new THREE.Projector();
var offset = new THREE.Vector3();

var cameraChanged = false;
var helpersVisible = true;

//by default the selected scene object is the camera.
var picked = null;
var selected = camera;

Answer 1

I had the same issue using Blender v 2.68a. The problem was solved with Blender 2.71.

I imported, using Blender 2.71, the .stl file which was previously shown black on WebGl, then exported it without changing any setting parameter from the default .stl exporter menu. I reloaded the file with WebGl and there it was, full colour!

Answer 2

While I didn't use the JSON Loader, I tried to use the Collada Loader (as my model retained textures offline when imported in the Webgl loader collada example) and inside this current 3-D viewer, my model was still black. However, after adding a light, the textures were shown.

Essentially, I'm assuming just as well with the JSON Loader, I need to add a light inside my 3-D viewer for the model's exterior to show.

Answer 3

mr doob already points out that stl doesn't specify color or texture, it is pure geometry. I suggest exporting something trivial from blender (like a cube with textures) with the three.js exporter, to get an understanding of what's going on. I have example code at threejs-and-blender. View the source of those threejs demos and look at which files are being pulled in, you should find references to images too.

Once you have that working, figuring out the more complex model becomes easier. Plus if you don't want to share you original model you should have no trouble sharing a simple cube for debugging.