jQuery 选项卡菜单和 WebGL

Question

我想使用 jQuery UI 中的选项卡(来源: http://jqueryui.com/demos/tabs/ )使用 WebGL GLGE 在每个选项卡上显示 COLLADA dae 文件(来源: http://www.glge.org/ )。选项卡应根据 xml 文件动态生成。一切都按计划进行，只是 3D 对象的渲染不起作用。

我现在尝试了不同的方法，但没有一个有效。结果每次都一样。 3D COLLADA 对象仅在第一个选项卡上呈现。即使我使用基本和静态的 document.write 语句而不从 xml 中检索数据，也只会显示第一页上的建筑物。

例如:

<div id="tabs">
  <div id="tabs-1">
     //ONLY THIS OBJECT IS RENDERED
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-2">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>
  <div id="tabs-3">
     <iframe src="glge/index_1.html" height="400" width="400"></iframe>
  </div>

如果我使用 jQuery 选项卡之外的 iframe，则会呈现多个 iframe。所以

<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<iframe src="glge/index_1.html" height="400" width="400"></iframe>
<div id="tabs">
     //codehere
</div>

在选项卡上方显示三个渲染的 3D 对象。

希望您能理解我的问题并帮助我解决。

编辑:我刚刚上传了上面的“简单”示例。您可以在下面看到它: http://korb.cwsurf.de/tmp/buildingdetail_simple.html

问候，法伊科

Answer 1

iframe 加载了一个初始隐藏状态，代码基本上从隐藏状态获取 0x0 尺寸。您可以选择在选项卡单击时加载或刷新框架。如果您转到http://korb.cwsurf.de/tmp/buildingdetail_simple.html#tabs-2，您可以看到这一点。只有可见的部分才能正确渲染。

我会推迟到这里What's the best way to reload / refresh an iframe using JavaScript?了解如何重新加载 iframe。

您可以从空白 href 开始，然后仅在单击选项卡时填充它。或者渲染全部，然后在帧加载后调用选项卡。