Braffin Braffin - 3 months ago 23
Javascript Question

Three.js and loading a cross-domain image

I know this has been asked before, and I've read ever question and answer I've been able to find, but nothing works.

I'm running this on a local server (IIS). I'm trying to load an image from imgur and then use that as texture for an object using the code:

var savedImage = /[^?]*$/.exec(location.search)[0];
if (savedImage != "") { savedImageLoad("http://i.imgur.com/" + savedImage + ".jpg"); };

function savedImageLoad(image) {
var mapOverlay = new THREE.ImageUtils.loadTexture(image);
sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});;
sphere.geometry.buffersNeedUpdate = true;
sphere.geometry.uvsNeedUpdate = true;
}


But it's giving the error:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://i.imgur.com/uBD0g95.jpg may not be loaded.


I've tried placing
THREE.ImageUtils.crossOrigin = "anonymous";
, or some variation of, at the beginning of my code, at the end, and at other various points. I've added a web.config with

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>


but that didn't work. This also doesn't work on a site hosted on bitbucket.org, which to me says I'm missing something in my code.

It seems to be failing at the
sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});;
line, as if I comment that out then there's no error (but then the mesh isn't updated).

I'm really at a loss of what else to try here and any help would be appreciated.

Answer

This works

THREE.ImageUtils.crossOrigin = '';
var mapOverlay = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');

Here's a fiddle.

Note: You don't use new with THREE.ImageUtils.loadTexture

In order to load an image cross-origin into WebGL the server that's sending the image has to respond with the correct headers. It's not enough for you to say you want to use the image cross-origin. All that does is tell the server you're requesting permission to use the image.

You can set img.crossOrigin, or in THREE's case THREE.ImageUtils.crossOrigin, to either '', 'anonymous' which is the same as '', or you can set it to 'use-credentials' which sends even more info to the server. The browser sees you set crossOrigin and sends certain headers to the server. The server reads those headers, decides if your domain has permission to use the image and if you do have permission it sends certain headers back to the browser. The browser, if it sees those headers will then let you use the image.

The biggest point to take away from the above is the server has to send the headers. Most servers don't send those headers. imgur.com does apparently. I suspect bitlocker does not though I didn't test it.

Also you have to set crossOrigin. If you don't the browser won't allow you to use the img in ways your not supposed to be able to even if the server sends the correct header.