WebGL importing models using the OBJMTLoader in three.js fails

2
votes

I am having some problems trying to import the following model into WebGL using three.js:

http://tf3dm.com/3d-model/vanille-99084.html

I've converted the obj file to JSON using the converter that comes with three.js and the model works fine when using the JSON Loader. However, when trying to load the model with the textures from the .mtl file the OBJMTLOader fails.

I am using the following example and just replaced the paths with the paths to my files:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html

UPDATE:

I've made a bit of progress. For some reason I thought that I need to import the JSON converted OBJ rather than the obj file itself. So now that I've referenced the correct .obj file the model is imported correctly. However, the textures are still not loaded. Currently the whole model/mesh is just black.

Any help appreciated

2
three.jstexturesloader3d-model

2 Answers

4
votes

It appears that the problem was due to the .TGA files comming with the models. Apparently, threejs can't parse TGA files. So the solution was to convert the TGA files to plain PNGs using Photoshop and then update the .mtl file to reference the PNGs rather than the TGA files.

1
votes

There is a TGA Loader as well however if you don't want to do TGA to PNG conversion.

        var texture = loader.load( 'textures/crate_color8.tga' );
        var material = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } );
        var mesh = new THREE.Mesh( geometry, material );

From http://threejs.org/examples/webgl_materials_texture_tga.html