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文件)还是在Web服务器上运行它？如果在Web服务器上运行它,则应避免跨源权限问题.(这是Chrome等浏览器的安全功能.)

Answer 2

我通过安装 Node.js 并运行本地服务器来打开此 html 解决了这个问题！