I have been working on loading .obj files using ThreeJS for cross-compatibility. The OBJMTLLoader method works perfectly fine in Firefox, Chrome, and IE on Windows as shown on falloutfan.com/eyebot.
However, when I try to view the object on an iPhone 5, it seems that the .mtl file does not render. Could this be due to limited WebGL support on iPhones/iOS? Are there any potential solutions or workarounds for this issue? Any assistance would be greatly appreciated. Below is the code snippet I am using:
<html>
<head>
<script src="threejs/build/three.min.js"></script>
<script src="threejs/src/loaders/OBJLoader.js"></script>
<script src="threejs/src/loaders/OBJMTLLoader.js"></script>
<script src="threejs/src/loaders/MTLLoader.js"></script>
<script src="threejs/src/loaders/DDSLoader.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
clock = new THREE.Clock();
// ambient
var ambient = new THREE.AmbientLight(0xeeeeee);
scene.add(ambient);
// light
var light = new THREE.PointLight( 0xffffff, 1, 50 );
light.position.set(0, 0, 6 ).normalize();
scene.add( light );
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader());
// instantiate a loader
var loader = new THREE.OBJMTLLoader();
// load a resource
loader.load(
// resource URL
'eyebot.obj', 'eyebot.mtl',
// Function when resource is loaded
function ( object ) {
object.position.set(0, 0, 0);
camera.position.set(0, 12, 0);
camera.lookAt(new THREE.Vector3(0,0,0));
obj = object;
scene.add( obj );
}
);
obj = null;
var render = function ()
{
deg_per_sec = 40;
delta = clock.getDelta();
requestAnimationFrame( render );
renderer.render(scene, camera);
if (obj)
{
obj.rotation.x += delta * Math.PI / 180 * deg_per_sec; // Rotates 1 degree per second
obj.rotation.y += delta * Math.PI / 180 * deg_per_sec * 1.5;
}
};
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor( 0x000000, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
if (window.addEventListener)
window.addEventListener('load', render, false);
else if (window.attachEvent)
window.attachEvent('onload', render);
else window.onload = render;
</script>
</body>