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