chrome 中的three.js 拒绝跨源图像加载 [英] Cross-origin image load denied with three.js in chrome

问题描述

尝试像这样在THREE.js中添加素材

Trying to add material in THREE.js like this

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

它在 Chrome、IE、FF 中运行良好，直到 3 天前，在 Chrome 将自身更新到最新的开发版本 17 之后.

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

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

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

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

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

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?

推荐答案

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

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:

THREE.ImageUtils.crossOrigin = "";

或者，添加 CORS 标头，以便明确允许它们.

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

^{请注意，大部分信息是从该问题的现有链接中添加的，此答案的原始作者未包含该链接.}

这篇关于chrome 中的three.js 拒绝跨源图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！