使用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的问题，它有很好的解决方法列表，包括a link to a wiki page describing how to run locally。该线程中还有一些其他解决方法，包括在脚本中添加以下内容：

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快捷方式 - ＆gt;属性 - ＆gt;快捷方式标签 - ＆gt;目标和    最后在目标中添加 - allow-file-access-from-files 。 （在执行此操作之前杀死所有chrome任务。）

OR

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

OR

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();
  })
});