Three.js textures loading as black

Question

I am currently trying to transfer a mesh from Maya into three.js. I've already converted the Maya file into a .obj and can see the mesh when loading up the page. However, the Materials that have images as their textures (all of which are 1024x1024 and are .tga format) show up as black, while the Materials that are simply solid colors end up showing up. See image:

http://i.stack.imgur.com/BVq4g.png

Notice how the spheres are cyan (their materials are simply a solid color) while the rest is black (those materials have a texture file attached).

Here is how I am loading in the mesh/textures:

var loader = new THREE.JSONLoader();

loader.load(
    'RoboticArm2.js',
    function (geometry, materials) {
        var material = new THREE.MeshFaceMaterial(materials);
        var object = new THREE.Mesh(geometry, material);
        scene.add(object);              
    }
);

Based on the console, it is properly loading all the texture files (no errors retrieving anything). The RoboticArm2.js file mentions all of the proper values for "mapDiffuse" as the respective .tga files for the texture.

I saw on another stackoverflow question that this may be caused by a bug where the .obj export from Maya makes the colorAmbient and colorDiffuse values in the .js file [0, 0, 0]. This was the case at first, but I tweaked them all to [0.8, 0.8, 0.8] (like the answerer suggested) to see if anything showed up, no luck.

If you need any other info/code, please let me know, thanks!

it is better to set the ambient to (0.2,0.2,0.2). 0.8 is too high for ambient. can you quickly convert your textures to .png (and update the js file also). If this does not fix the problem you would need to post the object or a page that uses it. — gaitat
Converting to .png did the trick! The mapping seems a little askew though, however that is a totally different problem :) Thank you! — Artemis Thorne

Artemis Thorne Artemis Thorne · Accepted Answer · 2015-06-28T22:05:59

0

votes

Converting the texture files to .png makes them appear properly, and not black.

Three.js textures loading as black

1 Answers