Threejs Using objects from 3ds Max with textures - webgl

Question

I purchased 3d human teeth model from turbosquid in a 3ds scene format. All I want to do is to extract individaul teeth from the file and use them in threejs script to display them on web page. What I did was exported one tooth from 3ds Max in .obj format and converted that to json using the converter provided with threejs. Though the image appears on the page but with no textures applied to it.
I am new to 3ds Max and Threejs having no idea what am I missing. Can you please guide me.
Edit:
Here is the Json metadata
"metadata" :
{
"formatVersion" : 3.1,
"sourceFile" : "toothz.obj",
"generatedBy" : "OBJConverter",
"vertices" : 1636,
"faces" : 1634,
"normals" : 1636,
"colors" : 0,
"uvs" : 1636,
"materials" : 1
},
"scale" : 1.000000,
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Teeth",
"colorAmbient" : [0.584314, 0.584314, 0.584314],
"colorDiffuse" : [0.584314, 0.584314, 0.584314],
"colorSpecular" : [0.538824, 0.538824, 0.538824],
"illumination" : 2,
"opticalDensity" : 1.5,
"specularCoef" : 70.0,
"transparency" : 1.0
}],
Edit:
Here's the complete code
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 2000);
loader = new THREE.JSONLoader();
loader.load( "js/JsonModels/toothz.js", function( geometry, materials ) {
materials[0].shading = THREE.SmoothShading;
var material = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 3, 3, 3 );
mesh.position.y = 0;
mesh.position.x = 0;
scene.add( mesh );
} );
camera.position.z = 340;
//var ambient = new THREE.AmbientLight( 0x101030 );
//scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();

Answer 1

Texture exporting is usually tricky in many exporters because there isn't always a clear mapping between 3d program materials and three.js materials. Furthermore, there is no materials defined at all in the .obj file, but a separate .mtl is required. I'm not sure if a) .mtl is exported and b) obj converter uses it, but in any case, your JSON is missing the texture definition in the material. You have a few choices:
Try the MAX exporter, which should allow exporting your stuff directly to JSON, without the intermediate .obj step.
With the OBJ route, you should check that all relevant options in the exporter are checked, a .mtl file is generated, and the obj converter finds it.
Alternatively add the texture manually into the JSON: "mapDiffuse": "my_texture_filename.jpg" (into the material definition in the "materials" section of the file).
You could also add the texture to the material in your model loading callback. However, this is a big hack and not recommended.

Answer 2

See the three.js Migration wiki.
Geometry no longer has a materials property, and loader callbacks, which previously had only a geometry parameter, are now also passed a second one, materials.
EDIT: You need to do something like this:
loader = new THREE.JSONLoader();
loader.load( "js/JsonModels/toothz.js", function( geometry, materials ) {
materials[0].shading = THREE.SmoothShading;
var material = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 3, 3, 3 );
mesh.position.y = 0;
mesh.position.x = 0;
scene.add( mesh );
} );
three.js r.53