Three.js OBJ MTL Loader not visible on IOS

Question

I'm using the obj+mtl loader to load my OBJ-files into my scene. In my mtl file I'm loading my textures.

e.g.:

newmtl initialShadingGroup
illum 4
Kd 1.00 1.00 1.00
Ka 0.00 0.00 0.00
Tf 1.00 1.00 1.00
map_Kd 6922529901031.jpg
map_Bump 6922529901031_bump.jpg
Ni 1.00

Everything works fine on all systems, except for mobile IOS. On these devices the files which have a texture or get an environment map are not displaying at all. Just the shadows.

What I tried so far:

Checking for textures to be a power of 2.
set the shading to double sided
controlling files sizes (everything below 200kb)

When I use the web inspector i get this error:

[Error] THREE.WebGLProgram: shader error:  (7)
1282
"gl.VALIDATE_STATUS"
false
"gl.getProgramInfoLog"
""
""
""

Here is my loader:

function loadMesh(objTxt, mtlTxt) {

var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
    }
};
var onError = function ( xhr ) { };

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('assets/');
mtlLoader.setPath( 'assets/' );
mtlLoader.load( mtlTxt, function( materials ) {

    materials.preload();
    if(materials.materials['initialShadingGroup']['map'] != null) {
        materials.materials['initialShadingGroup']['map']['magFilter'] = THREE.NearestFilter;
        materials.materials['initialShadingGroup']['map']['minFilter'] = THREE.LinearFilter;
    }

    /*set environment map*/
    materials.materials['initialShadingGroup']['envMap'] = new THREE.CubeTextureLoader().load( [ 'img/posx.jpg', 'img/negx.jpg', 'img/posy.jpg', 'img/negy.jpg', 'img/posz.jpg', 'img/negz.jpg' ] );
    /*set reflectivity of material*/
    materials.materials['initialShadingGroup']['reflectivity'] = 1.0;
    /*set anisotropy of bumpMap*/
    if(materials.materials['initialShadingGroup']['bumpMap'] != null) {
        materials.materials['initialShadingGroup']['bumpMap']['anisotropy'] = 16;
    }

    if(materials.materials['initialShadingGroup']['specularMap'] != null) {
        materials.materials['initialShadingGroup']['specularMap']['anisotropy'] = 16;
    }
    materials.materials['initialShadingGroup']['bumpScale'] = 0.1;

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'assets/' );
    objLoader.load( objTxt, function ( object ) {


        /*set attributes of OBJ childs*/
        object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { 

            node.castShadow = true; 
            node.receiveShadow = true; 

            node.material.shading = THREE.SmoothShading;
        } } );



        scene.add( object );



    }, onProgress, onError );

});
}

tinytree tinytree · Accepted Answer · 2017-10-24T15:43:03

I finally figured it out myself. For Anyone who is interested in my solution: I switched from OBJLoader to the more recent released OBJLoader2.

var objLoader = new THREE.OBJLoader2();

I also got rid of the functionality to receive shadows:

node.receiveShadow = false;

Finally my objects appear, and i can live with the fact, that no shadows will be received on Iphone and Ipad

Three.js OBJ MTL Loader not visible on IOS

1 Answers