Blender Exported UV Map Texture Not Showing In Three JS

Question

Blender Exported UV Map Texture Not Showing In Three JS

Greetings, Nov 13th 2014

Briefly, I am attempting to use the below code to aid three.js in recognizing the material from a blender exported file that has been successfully loaded while the morph influences work great! However, the UV mapped texture from within blender doesn't show up and there are no thrown errors to the console? I can easily use the imageutils to load the texture separately but of course the UV mapping is lost! Oddly when I do load the UV graphic separately I get the odd pattern that symbolizes a UV graphic but the significance defeats me?...I, new to three.js, have tried numerous code combinations as the below last attempt represents. Any ideas how to attempt three.js to recognize the UV material?

Appreciatively, Ted

mesh = new THREE.Mesh( 
    geometry, 
    new THREE.MeshLambertMaterial({
        THREE.UVMapping(THREE.ImageUtils.loadTexture("clothtexturegreenuv.jpg"), 
        morphTargets: true 
    })
);
mesh.scale.set( 35, 35, 35 );
scene.add( mesh );

Answer 1

Try this:

var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture( "clothtexturegreenuv.jpg"), 
    morphTargets: true 
}); 

mesh.scale.set( 35, 35, 35 );     
scene.add( mesh );

Answer 2

It works in the examples with MeshFaceMaterial automatically, no UVMapping or loadTexture calls are needed when the exported json already has the UVs and the texture reference I think. From the example at http://threejs.org/examples/webgl_loader_json_blender.html :

var loader = new THREE.JSONLoader();
loader.load( 'models/animated/monster/monster.js', function ( geometry, materials ) {
    var faceMaterial = new THREE.MeshFaceMaterial( materials );
    //(...) that example uses morph anims too but I cut the extras (...) 
    morph = new THREE.MorphAnimMesh( geometry, faceMaterial );
    scene.add( morph );
}

We also document use of UVs + different maps in a manual there and it's similar (but only updated last spring for now whereas the threejs.org example is current): https://forge.fi-ware.org/plugins/mediawiki/wiki/fiware/index.php/3D-UI_-WebTundra-_User_and_Programmers_Guide#Exporting_3D_scenes_from_authoring_applications