在Chrome上使用THREE.js在本地圖像上拒絕跨源圖像加載

Question

我正在使用THREE.js，我在開發者控制台中收到此錯誤：

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

當我用Chrome打開我的腳本時。 代碼如下所示：

var particle_system_material = new THREE.ParticleSystemMaterial({
    color: 0xffffff,
    map: THREE.ImageUtils.loadTexture("images/circle.png"),
});

所以你可以猜到：

map: THREE.ImageUtils.loadTexture("images/circle.png");

是問題。 使用Firefox，它可以很好地工作。

我已經閱讀了以下鏈接中的提示： Chrome，three.js：交叉原始圖像加載被拒絕 ， https：//github.com/mrdoob/three.js/wiki/How-to-run-things-locally ， https://www.google.fr/search?q=Access-Control-Allow-Origin

我也意識到了給出的命令：

使用命令行標志啟動Chrome可執行文件：

chrome --allow-file-access-from-files

什么都行不通，我瘋了。 它只是我硬盤上的一個圖像，包含HTML和JS文件，沒有服務器，沒有“原點”。

Answer 1

您是在運行本地服務器，還是只是打開html文件？

最有可能的是，運行localhost服務器將解決此問題。 Mamp / Wamp非常易於使用。

如果這不起作用，你可以做一些像chrome --disable-web-security那樣激烈的事情

Answer 2

請記住，如果使用禁用Web安全標志啟動chrome，則必須先關閉所有其他chrome實例，以使其按預期工作。