为什么X3DOM中的图像纹理无法加载？

Question

我第一次使用X3DOM（尽管我以前做过很多VRML）。我正在尝试一个简单的例子，使用图像文件作为纹理，但是图像永远不会加载。这就是我看到的（使用Chrome Version 43.0.2357.130 m）：圆圈无限旋转，Loading: 1保持不变。我在另一个文件中也遇到了同样的问题（除了它有7个图像，消息显示“Loading: 7”）。

以下是我的代码：
图片存在并存储在相同的目录中。为什么图片无法加载呢？

- ViennaMike

---

如果你没有使用适当的 Web 服务器，就无法加载纹理，因为它们是通过 XHR 加载的。 - mistapink

Answer 1

它在Mozilla Firefox中可以正常工作，因此您可以在那里测试它。
Chrome会抛出安全异常，因为该图像未由服务器提供。

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': 
Tainted canvases may not be loaded.image.onload @ x3dom.js:377

你可以在这里找到解释。

还有一些相关信息，请查看这里。

加载 WebGL 纹理时受到跨域访问控制的限制。为了让你的内容从另一个域加载纹理，需要获取 CORS 批准。请参见 HTTP 访问控制以了解有关 CORS 的详细信息。

- Traian

---

这里有个奇怪的事情。如果我把它放在一个Web服务器上，在Chrome浏览器中运行得很好，但是在同一台机器上的Firefox浏览器中，我无法查看examples.x3dom.org上的几个简单示例中的上述示例。如果我只是在本地尝试而没有服务器，场景中只会出现一个空白的边界框，而从Web服务器上，我会得到一个填充了黑色的边界框。所以在Chrome中查看的核心问题已经解决了，但仍然存在一些有趣的问题（这就是为什么是+1，而不是已接受答案的原因）。 - ViennaMike

你需要使用调试器（例如Firebug：https://getfirebug.com/downloads）来查找一个案例中的错误是什么。否则，那只是猜测... - Traian

明白了。显然我的一些浏览器正在使用SWF播放器，而我没有在服务器上安装它，因此当我从托管网站查看它们时，跨域问题出现了不同的原因（SWF文件和纹理位于不同的主机上）。我今晚会解决这个问题。顺便说一句: 现在真正奇怪的是，我的家用IE浏览器加载我正在处理的场景的纹理（比上面那个更复杂），但有些对象位置不正确。我在工作中使用的IE、Chrome、Firefox或iPhone上的Safari都没有这个问题。 - ViennaMike

Answer 2

你可以对你的纹理进行Base64编码。

<ImageTexture url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAA3NCSVQICAjb4U/gAAADAFBMVEUAAAAAADMAAGYAAJkAAMwAAP8AMwAAMzMAM2YAM5kAM8wAM/8AZgAAZjMAZmYAZpkAZswAZv8AmQAAmTMAmWYAmZkAmcwAmf8AzAAAzDMAzGYAzJkAzMwAzP8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zMwAzMzMzM2YzM5kzM8wzM/8zZgAzZjMzZmYzZpkzZswzZv8zmQAzmTMzmWYzmZkzmcwzmf8zzAAzzDMzzGYzzJkzzMwzzP8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mMwBmMzNmM2ZmM5lmM8xmM/9mZgBmZjNmZmZmZplmZsxmZv9mmQBmmTNmmWZmmZlmmcxmmf9mzABmzDNmzGZmzJlmzMxmzP9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZMwCZMzOZM2aZM5mZM8yZM/+ZZgCZZjOZZmaZZpmZZsyZZv+ZmQCZmTOZmWaZmZmZmcyZmf+ZzACZzDOZzGaZzJmZzMyZzP+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MMwDMMzPMM2bMM5nMM8zMM//MZgDMZjPMZmbMZpnMZszMZv/MmQDMmTPMmWbMmZnMmczMmf/MzADMzDPMzGbMzJnMzMzMzP/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//MwD/MzP/M2b/M5n/M8z/M///ZgD/ZjP/Zmb/Zpn/Zsz/Zv//mQD/mTP/mWb/mZn/mcz/mf//zAD/zDP/zGb/zJn/zMz/zP///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABlenwdAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG8mZagAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEZJREFUCJljuA4CDCAAYYF5l0AALALEEB5YBMRHcEECYD5YA4hguA5nwghk5UTyYUJgk6/DBRjg9l0CuxdqP7r7MNyP4j8Akf+KwQMQ//UAAAAASUVORK5CYII="></ImageTexture>

- Anon