如何在Three.js中等待从JSON模型加载完成的纹理？

Question

我有一个JSON模型，根据AlteredQualia的皮肤示例成功加载。但是，我想在加载完成之前不显示模型。正如您在此示例中所看到的，模型首先出现，然后加载它们的纹理资源：http://alteredqualia.com/three/examples/webgl_animation_skinning_tf2.html 我在网页上添加了一个不透明的div，然后使用JSONloader.load()函数的回调将该div移开。不幸的是，这个回调在网格添加到场景时触发，看起来不会被仍在加载的蒙皮图像阻挡，所以我最终“揭示”了一个不完整的场景。

我应该如何解决这个问题？我看到有一个THREE.ImageUtils.loadTexture()函数，它有一个回调函数，但它似乎没有涉及到这种情况，其中网格是像这样声明和定义的：

var mesh = new THREE.SkinnedMesh(geometry,new THREE.MeshFaceMaterial(materials));
//geometry and materials are both parameters of jsonloader.load callback

我查看了MeshFaceMaterial和SkinnedMesh的源代码，但没有找到解决方案。

感谢提供的任何帮助。

- Brian

Answer 1

目前这个问题还没有得到妥善解决。目前在一切加载完成时并没有回调或事件被触发 :/

- mrdoob

---

有没有解决方法？也许可以扫描 JSON 文件中的材质并为每个图像文件创建独立纹理以进行缓存？ - Brian

呵呵，好吧，它没有！我首先使用loadTexture加载它们，但即使在那之后，JSONloader仍然从图像文件中获取而不是从缓存中获取（在Chrome和Firefox中测试）。网络监视器截图我还尝试使用window.onload，但该事件只会触发一次。 - Brian

Answer 2

这是一个有点hack的方法，但在three.js的第10362行（版本61）中，您会看到image.onload = function()（它在主要的THREE.Loader原型中）。我设法追踪到这是JSON模型加载纹理的回调函数。

如果您在该函数内添加自己的回调函数，就可以跟踪纹理何时加载完成。

不过，正如我之前所说，这是一种hack方法（对于特定应用程序帮助了我很多），而不是解决方案，请非常小心地修改库代码。您可能会破坏您不知道的东西。

- Botol

---

谢谢您的建议，我觉得现在还是太菜了，不敢去修改源代码。 - Brian

Answer 3

这是一个非常愚蠢的作弊方法，但它可以作为一种黑客手段。我同意需要至少分别实现图像加载和其他内容，这样不需要图像的内容就不会浪费时间。话虽如此，如果优化不是你的问题......

var texture = THREE.ImageUtils.loadTexture(url); 
while (texture.image.width == 0);

- Mark Mullin

---

这可能起作用，但不能保证可行。实际上，浏览器应该在您的 JavaScript 退出当前事件之前绝对不做任何操作。您一直在自旋等待的事实意味着您从未退出该事件。基本上，您只是侥幸运气，无论您测试的浏览器/版本是否完全冻结。除此之外，即使它不会冻结，如果连接速度慢，浏览器也可能杀死您的 JavaScript，因为它花费了太长时间。当您自旋等待时，还会向用户的机器发起拒绝服务攻击。 - gman

这看起来像是“忙等待”...不要用这种方式...。 - Trantor