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

如果您从本地主机运行 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

这在命令行\终端对我有用：

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