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

Question

我想在Three.js中使用本地图像for loadTexture，但是我收到以下错误： 未捕获的SecurityError：无法在'WebGLRenderingContext'上执行'texImage2D'：可能无法加载....的跨源图像。

我有一个在apache tomcat（本地）上运行的java应用程序，它使用以下URL提供我的图像：http://localhost:8084/sve/img/wood-texture.jpg。

这是我的javascript代码，我尝试加载图片：

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

我正在使用谷歌浏览器（版本40.0.2214.111米）来运行我的Three.js程序。我也尝试像这样启动chrome：chrome.exe --allow-file-access-from-files。但是我得到了同样的错误。

有没有人对此有任何解决方案？

Answer 1

最简单的方法是确保纹理由与three.js应用程序相同的服务器提供。

如果您仍然需要它来自另一台服务器（示例中其他端口上的Java应用程序），则需要使Java应用程序设置一些CORS标头。

例如："Access-Control-Allow-Origin: *"

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。