Cross Domain Problems when loading OBJ/MTL Files with textures in THREE.JS

Question

I have an OBJ file generated dynamically by a server on a separate domain. It has some materials and texture JPG files.

I load this OBJ file with a simple php proxy (fileProxy.php):

<?php
 header('Access-Control-Allow-Origin: *');
 header("Access-Control-Allow-Credentials: true"); 
 header('Access-Control-Allow-Headers: X-Requested-With');
 header('Access-Control-Allow-Headers: Content-Type');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
 header('Access-Control-Max-Age: 86400');

//Check if this is an image. if So print coorect header.
if (strpos($_REQUEST['fileToProxy'],'jpg') !== false) {

     header('Content-Type: image/jpeg');

}


$proxyFile = (isset($_REQUEST['fileToProxy'])? $_REQUEST['fileToProxy'] : null);

if ( isset($proxyFile)){
  // the files sent to us aren't properly url encoded
  $proxyFile = str_replace(' ', '+', $proxyFile);

  $content = file_get_contents($proxyFile);

  print($content);
}
else {
  echo "ERROR: no file to proxy";
}



?>

Loading the OBJ files works like a charm

BUT, i cant load the JPG textures embeded in the MTL file. Single colored shaders all work fine, but loading images i get errors.

I get the following error in chrome:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fil…est-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115 may not be loaded.

The address of the texture file is fed correctly into my proxy: http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/3DModels/435639/DonutFullBread.jpg&timtest=115

Now after checking my Network monitor, i realise that the Jpg Image is successfully downloaded and the correct CORS headers are all in place. But webgl/three.js still spits out the errors and does not display my model.

SO this seems like a WEBGL bug. But i get security erros in all browsers. I have tested this on my localhost and on my server. Same problem.

Any solutions?

UPDATE Here's how i load the OBJ/MTL files with three.js: (Only cross domain textures fail)

var loader = new THREE.OBJMTLLoader( manager);

///////////////////LOAD MDOEL////////////////////
 loader.load( 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.file, 'http://ec2-54-201-204-177.us-west-2.compute.amazonaws.com/fileProxy.php?fileToProxy=' + obj.material, function ( object ) {                                              
//if loaded, do some stuff here.                                                   
}
loadedmodel.add(object);

That's all I do really. The Materials and textures are phrased correctly by the loader. I dont have to set any materials up.

niksad8 niksad8 · Accepted Answer · 2014-03-09T14:23:51

I just want to put this here for other people. I had a very similar problem when i was trying to load images from static google map images. So here is what i did

THREE.ImageUtils.crossOrigin = "anonymous";

Just before the actual texure is being loaded. Now this got it working and i could load the images without a problem.

Cross Domain Problems when loading OBJ/MTL Files with textures in THREE.JS

4 Answers