Mesh disappears after setting material (obj + mtl) using three.js

3
votes

I've being trying to load some 3D models found on the web in my THREE.scene. I've followed basic tutorials, handled my light and cameras well and it works perfectly for some objects:

        function loadObject(path, modelName)
        {
            var mtlLoader2 = new THREE.MTLLoader();
            mtlLoader2.setPath( path );
            mtlLoader2.load(modelName+'.mtl', function( material ) 
            {
                material.preload();
                var objLoader2 = new THREE.OBJLoader();
                objLoader2.setPath( path );
                objLoader2.setMaterials( material );
                material.side = THREE.BackSide;
                objLoader2.load( modelName+'.obj', function ( mesh ) 
                {
                    mesh.name=modelName;
                    var axisHelper = new THREE.AxisHelper(1);
                    axisHelper.visible=true;
                    mesh.add(axisHelper);
                    scene.add( mesh );
                    console.log('Loaded '+modelName);   
                });                 
            });
        }

I also call an animate function to render regularly:

        function animate()
        {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }

An example
An example

Unfortunately, some other objects disappear (without any error) as soon as I apply the material:

objLoader2.setMaterials( material );

By invisible, I mean that it doesn't appear but it exists, the axisHelper is displayed. As other online viewers seem to display perfectly the same objects, I've come to the conclusion that some .mtl files found online are not compatible with three.js. Or is it the way I use it?

Here is an example of a functioning file: https://www.models-resource.com/mobile/shaunthesheeppuzzleputt/model/19915/

And a non functioning one: https://www.models-resource.com/ds_dsi/shaunthesheep/model/12472/

I now try to figure out why and if I could fix it. Please share your ideas and (hopefully) solutions :)

1
3dthree.js.obj
The second mtl which do not work have an additional Tr 1 statement which seam not really standard... I guess it is interpreted as "Transparency = 1", that is "opacity = 0". Try to set it to 0 or simply remove this statement in the mtl file. (opacity settings are a common 'joke' of 3D exchange format...) – user1501157
That was it, thank you so much. – Quentin El Guay
It's been my experience with obj/mtl that Tr and d are poorly implemented. Wikipedia en.wikipedia.org/wiki/Wavefront_.obj_file says Tr = 1 - d, but I don't believe that is always true. – Ron Jensen
This could be as simple as transparency = 1 - opacity or opacity = 1 - transparency, but there not two 3D softwares that translate it the same way... The COLLADA specs about this is somewhere pretty funny, in the sense "Why make things simple when one can make them complicated". – user1501157

1 Answers

2
votes

As answered by Sedenion in the comments, the Tr statement was the problem. I removed them (there were 2) and it solved my problem.