javascript - Loading Maya model with Three.js -

i following this tutorial on how load maya models three.js.

everything fine, tutorial explains how load models 1 texture.

here's source code tutorial:

function createscene(geometry, x, y, z, scale, tmap) {             zmesh = new three.mesh(geometry, new three.meshlambertmaterial({map: three.imageutils.loadtexture(tmap)}));             zmesh.position.set(x, y, z);             zmesh.scale.set(scale, scale, scale);             meshes.push(zmesh);             scene.add(zmesh);         } 

full js live link

            var screen_width = window.innerwidth;         var screen_height = window.innerheight;          var container;          var camera, scene;         var canvasrenderer, webglrenderer;          var mesh, zmesh, geometry, materials;          var windowhalfx = window.innerwidth / 2;         var windowhalfy = window.innerheight / 2;          var meshes = [];          init();         animate();          function init() {              container = document.createelement('div');             document.body.appendchild(container);              camera = new three.perspectivecamera(75, screen_width / screen_height, 1, 100000);             camera.position.x = 400;             camera.position.y = 200;             camera.position.z = 400;              scene = new three.scene();              // lights             var ambient = new three.ambientlight(0x666666);             scene.add(ambient);              var directionallight = new three.directionallight(0xffeedd);             directionallight.position.set(0, 70, 100).normalize();             scene.add(directionallight);              // renderer             webglrenderer = new three.webglrenderer();             webglrenderer.setsize(screen_width, screen_height);             webglrenderer.domelement.style.position = "relative";              container.appendchild(webglrenderer.domelement);             var loader = new three.jsonloader(),                 callbackkey = function (geometry, materials) {                     createscene(geometry, materials, 0, 0, 0, 6);                 };             loader.load("chameleon.js", callbackkey);              window.addeventlistener('resize', onwindowresize, false);          }          function createscene(geometry, materials, x, y, z, scale) {               zmesh = new three.mesh(geometry, new three.meshfacematerial(materials));             zmesh.position.set(x, y, z);             zmesh.scale.set(scale, scale, scale);             meshes.push(zmesh);             scene.add(zmesh);          }          function onwindowresize() {              windowhalfx = window.innerwidth / 2;             windowhalfy = window.innerheight / 2;              camera.aspect = window.innerwidth / window.innerheight;             camera.updateprojectionmatrix();              webglrenderer.setsize(window.innerwidth, window.innerheight);         }          function animate() {             (var = 0; < meshes.length; i++) {                 meshes[i].rotation.y += 0.01;             }             requestanimationframe(animate);             render();         }          function render() {             camera.lookat(scene.position);             webglrenderer.render(scene, camera);         } 

but model has 4 textures. should change load of them?live link

it appears tutorial following ignoring materials json model format , passing geometry , straight text reference single texture file so:

var loader = new three.jsonloader(),     callbackkey = function(geometry) {createscene(geometry,  0, 0, 0, 15, "chameleon.jpg")}; loader.load("chameleon.js", callbackkey); 

the jsonloader not pulls in geometry materials in array. (see: https://github.com/mrdoob/three.js/blob/master/src/loaders/jsonloader.js line 45) can pass array meshfacematerial(arrayofmaterials) so:

var loader = new three.jsonloader();,     callbackkey = function(geometry, materials) {createscene(geometry, materials, 0, 0, 0, 15, )}; loader.load("chameleon.js", callbackkey); 

then in createscene function change first line be:

zmesh = new three.mesh(geometry, new three.meshfacematerial(materials)); 

edit: adding details on fixing maya exports

so model loading black. in case issue in model file chameleon.js. have @ each material's colorambient , colordiffuse property. notice they're [0.0, 0.0, 0.0]. known obj export bug in maya. have 3 options fix it.

1) open chameleon.js file , alter colorambient , colordiffuse lines (you'll need play values make right)

"colorambient" : [0.8, 0.8, 0.8], "colordiffuse" : [0.8, 0.8, 0.8], 

or

2) in maya before applying diffuse map, make sure apply default color value first. reason once map on can no longer access color property , exporter uses default value of 0.

or

3) after exporting maya can alter obj file change these lines from:

kd 0.00 0.00 0.00 

to

kd 0.80 0.80 0.80 

i've tested here @ home , model looking good, let me know how goes?