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

如果你：

• 不想設置自己的服務器，和
• 不想降級瀏覽器的安全性

然后我找到了解決這個問題的方法，只需要一點努力：

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

這對我在命令行\\ 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();
  })
});