使用chrome中的three.js拒绝跨源图像加载

Question

试图像这样在THREE.js添加材料

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

它在Chrome，IE，FF中工作正常，直到3天前，Chrome更新到最新的开发版17。

Chrome 17只是不加载图片并抱怨以下内容

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

这是疯了，因为图像显然在同一个域中，所以这是chrome或THREE.js还是别的问题？

Answer 1

如果您从localhost运行Chrome并使用Three.js，则可能需要使用此命令行标记运行Chrome：

c:// ... /chrome.exe --allow-file-access-from-files

Answer 2

https://github.com/mrdoob/three.js/issues/687引用了three.js的GitHub上的一个问题，它有很好的解决方法列表，包括一个描述如何在本地运行的wiki页面的链接 。 该线程中还有一些其他解决方法，包括在脚本中添加以下内容：

THREE.ImageUtils.crossOrigin = "";

或者，添加CORS标头以便特别允许它们。

^{请注意，大部分此类信息是从已存在的问题链接添加的，此答案的原作者未包含该链接。}

Answer 3

如果你：

• 不想设置自己的服务器，和
• 不想降级浏览器的安全性

然后我找到了解决这个问题的方法，只需要一点努力：

1. 将图像转换为Base64文本
2. 将其存储在外部Javascript文件中
3. 将其链接到您的项目页面
4. 将其加载到纹理中

有关详细信息，请访问http://tp69.wordpress.com/2013/06/17/cors-bypass/ 。

Answer 4

您还可以通过从根文件夹运行以下命令来使用python运行简单的HTTP服务器。

python -m SimpleHTTPServer 8000

Answer 5

1）Chrome快捷方式 - >属性 - >快捷方式选项卡 - >目标并最后在目标中添加--allow-file-access-from-files 。 （在执行此操作之前杀死所有chrome任务。）

要么

2）下载Mongoose Web服务器软件。 将它放在您的工作目录中，然后运行它。 它将在浏览器http：// localhost：PORT中打开，它将为您的所有文件提供服务。

要么

3）您还可以在应用程序中使用NodeJS服务器 。

Answer 6

这对我在命令行\\ terminal工作：

./chrome.exe --disable-web-security

*请注意，在执行命令之前必须关闭所有chrome实例才能使其工作。

Answer 7

完美的解决方案：

THREE.js：拒绝交叉原始图像加载

只需将时间戳添加到图像网址即可。 我不知道它背后的逻辑，但它的确有效。

例：

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});