【问题标题】:Why won't image texture load in X3DOM?为什么在 X3DOM 中无法加载图像纹理?
【发布时间】:2016-03-22 10:53:29
【问题描述】:

我是第一次使用 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>

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

【问题讨论】:

  • 如果您没有使用适当的网络服务器,则无法加载纹理,因为它们是通过 XHR 加载的。

标签: html x3d x3dom


【解决方案1】:

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

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

你可以找到解释here

还有一些其他相关信息here

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

【讨论】:

  • 这是奇怪的事情。如果我把它放在网络服务器上,它在 Chrome 上运行良好,但是,虽然我可以在同一台机器上的 Firefox 中查看 examples.x3dom.org 中的几个简单示例,但我无法在 Firefox 中查看上述示例。如果我只是在没有服务器的情况下在本地尝试,我会得到一个空白的场景边界框,而从网络服务器,我会得到一个填充的黑色边界框。所以在 Chrome 中查看的核心问题解决了,有趣的事情还在继续(因此为什么 +1,还没有被接受的答案)。
  • 您需要使用调试器(例如 Firebug:getfirebug.com/downloads)来找出某个案例中的错误。否则只是猜测......
  • 知道了。显然我的一些浏览器正在使用我没有安装在我的服务器上的 swf 查看器,所以当我查看它们时,出于不同的原因(swf 文件和纹理位于不同的主机上)它们会弹出跨域问题。我的托管网站。我今晚会解决这个问题。 P.S.:现在真正奇怪的是,我的家庭 IE 浏览器加载了我正在处理的场景的纹理(比上面的更复杂)但是有些对象不合适。在工作中使用 IE、Chrome、Firefox 或 iPhone 上的 Safari 时,我无法做到这一点。
【解决方案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>

【讨论】:

    猜你喜欢
    • 2012-08-14
    • 1970-01-01
    • 1970-01-01
    • 2013-06-06
    • 2020-05-06
    • 2023-03-16
    • 1970-01-01
    • 2022-01-20
    • 2018-11-18
    相关资源
    最近更新 更多