3

我是第一次使用 X3DOM（虽然我以前做过很多 VRML。

我正在尝试一个带有纹理图像文件的简单示例，但图像永远不会加载。这是我看到的（使用 Chrome 版本 43.0.2357.130 m）： 在此处输入图像描述 圆圈永远旋转，并且 Loading: 1 保持不变。我在另一个文件上遇到了同样的问题（除了它有 7 个图像，并且消息显示为“正在加载：7”。

这是我的代码： <!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta> <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/x3dom/release/x3dom.css'></link> <script type='text/javascript' src='http://www.x3dom.org/x3dom/release/x3dom.js'></script> </head> <body> <x3d width='500px' height='400px'> <scene> <shape> <appearance> <ImageTexture url="wood11.png"><ImageTexture/> </appearance> <box> </box> </shape> </scene> </x3d>
</body> </html>

图像存在并存储在同一目录中。为什么我无法加载图像？

4

2 回答 2

2

它适用于 Mozilla Firefox，因此您可以在那里进行测试。
Chrome 会引发安全异常，因为该图像不是由服务器提供的。

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

你可以在这里找到解释。

还有一些其他相关信息在这里。

WebGL 纹理的加载受跨域访问控制的约束。为了让您的内容从另一个域加载纹理，需要获得 CORS 批准。有关 CORS 的详细信息，请参阅 HTTP 访问控制。

于 2015-07-04T18:14:56.703 回答
1

您可以对纹理进行 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>
于 2016-03-22T02:53:29.247 回答