使用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

如果你:

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