Three.js-无法将本地图像用于loadTexture

Question

i am trying to use a local image for loadTexture in Three.js but i get the following error: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at .... may not be loaded.

I have a java application running on apache tomcat (locally) which serves my image with the following url: http://localhost:8084/sve/img/wood-texture.jpg .

Here is my javascript code where i try to load the image:

var woodTexture = new THREE.ImageUtils.loadTexture('http://localhost:8084/sve/img/wood-texture.jpg');

I am using Google Chrome (Version 40.0.2214.111 m) to run my Three.js program. I also try to start chrome like this: chrome.exe --allow-file-access-from-files. But i get the same error.

Does anyone have any solution for this?

Answer 1

It's probably easiest to make sure the texture is served by the same server as your three.js app.

If you still need it to come from another server (the Java app on the other port in your example) you need to make the Java app set some CORS headers.

For example: "Access-Control-Allow-Origin: *"

See https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS for more info.