Utilizing the obj+mtl loader to import my OBJ files into the scene and loading textures from the mtl file.
For example:
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 functions properly on all platforms except for mobile IOS devices. On these devices, files with textures or environment maps do not display, only shadows.
My attempts so far:
Ensuring textures are a power of 2.
Setting shading to double-sided.
Managing file sizes (under 200kb).
Upon inspecting with the web inspector, I encounter this error:
[Error] THREE.WebGLProgram: shader error: (7)
1282
"gl.VALIDATE_STATUS"
false
"gl.getProgramInfoLog"
""
""
""
Below 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;
}
/*setting 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' ] );
/*setting material reflectivity*/
materials.materials['initialShadingGroup']['reflectivity'] = 1.0;
/*setting 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 ) {
/*setting attributes of OBJ children*/
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 );
});
}