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

Trying to add material in THREE.js like this

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

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

It works fine in Chrome, IE, FF, until 3 days ago, after Chrome updated itself to the latest dev version 17.

它在Chrome，IE，FF中运行良好，直到3天前，Chrome更新到最新的开发版17。

Chrome 17 just doesn't load the image and complains the following

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

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

That's insane since the image is clearly in the same domain, so is this an issue of chrome or THREE.js or something else?

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

7 个解决方案

#1

https://github.com/mrdoob/three.js/issues/687 refers to an issue on three.js' GitHub, which has good list of workarounds, including a link to a wiki page describing how to run locally. There are also some other workarounds in the thread, including adding the following to your scripts:

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

THREE.ImageUtils.crossOrigin = "";

Or, adding CORS headers so that they are specifically allowed.

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

^{Note that most of this information was added from the already existing link to the issue, which the original author of this answer did not include.}

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

#2

If you are running Chrome from localhost and using Three.js, you probably need to run Chrome with this command line flag:

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

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

#3

If you:

如果你：

don't want to set up your own server, and
不想设置自己的服务器，和
don't want to downgrade your browser's security
不想降低浏览器的安全性

then I worked out a way around this which involves only a little bit of effort:

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

Convert the image into Base64 text
将图像转换为Base64文本
Store it in an external Javascript file
将其存储在外部Javascript文件中
Link it to your project page
将其链接到您的项目页面
Load it into your texture
将其加载到纹理中

Full details can be found at http://tp69.wordpress.com/2013/06/17/cors-bypass/ for those that are interested.

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

#4

You can also run a simple HTTP server using python by running the following command from your root folder.

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

python -m SimpleHTTPServer 8000

#5

1) Chrome shortcut -> Properties -> Shortcut tab -> target and add --allow-file-access-from-files in target at last. (kill all the chrome tasks before doing this.)

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

要么

2) Download Mongoose web server software. Put it in your working directory, and run it. It will open in the browser http://localhost:PORT where it will serve all your files.

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

要么

3) You can also use NodeJS server in your application.

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

#6

this worked for me at the command line\terminal:

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

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

*note that you must close all instances of chrome before executing the command for it to work.

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

#7

Perfect solution for:

完美的解决方案：

THREE.js: Cross-origin image load denied

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

Just add timestamp to the image url. I don't know the logic behind it, but it works.

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

Example:

例：

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

#1

THREE.ImageUtils.crossOrigin = "";