javascript - THREE.js:跨源资源共享策略拒绝跨源图像加载

Question

我的 Chrome 版本是 31.0.1650.57

我正在学习 THREE.js 并从 https://github.com/jeromeetienne/threex.planets/ 下载了一个行星示例

但是当我运行 earth.html 时

如标题所说，发生了一个奇怪的错误:

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

我查看了代码并找到了可能与此错误相关的内容:

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

但我不知道如何修复它，我对 javascript 比较陌生，

希望有人能帮帮我!

非常感谢!

Answer 1

您是在本地文件系统上运行它(双击 html 文件)还是在网络服务器上运行它？如果你在网络服务器上运行它，你应该避免跨源权限问题。 (这是 Chrome 等浏览器的一项安全功能。)