javascript - How to wait for textures to finish loading from JSON model in Three.js? - Stack Overflow

admin管理员组

文章数量:1326638

I have a JSON model being loaded successfully based on AlteredQualia's skinning example. However, I would like to not reveal the model until it is finished loading. As you can see in this example, the models appear first and then their texture resources load afterwards: .html

I added an opaque div to my webpage and then using the callback of the JSONloader.load() function I move that div out of the way. Unfortunately this callback is triggered when the mesh is added to the scene, which does not seem to be blocked by the skinning images still being loaded, so I end up "revealing" an inplete scene.

How should I go about fixing this? I have seen that there is a function THREE.ImageUtils.loadTexture() which has a callback function but it does not seem to be involved in this use case where the mesh is declared and defined like so:

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

I had a look at the source code of MeshFaceMaterial and SkinnedMesh but could not see a solution there.

Thanks for any assistance offered.

I have a JSON model being loaded successfully based on AlteredQualia's skinning example. However, I would like to not reveal the model until it is finished loading. As you can see in this example, the models appear first and then their texture resources load afterwards: http://alteredqualia./three/examples/webgl_animation_skinning_tf2.html

I added an opaque div to my webpage and then using the callback of the JSONloader.load() function I move that div out of the way. Unfortunately this callback is triggered when the mesh is added to the scene, which does not seem to be blocked by the skinning images still being loaded, so I end up "revealing" an inplete scene.

How should I go about fixing this? I have seen that there is a function THREE.ImageUtils.loadTexture() which has a callback function but it does not seem to be involved in this use case where the mesh is declared and defined like so:

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

I had a look at the source code of MeshFaceMaterial and SkinnedMesh but could not see a solution there.

Thanks for any assistance offered.

• javascript
• json
• callback
• three.js

Share Improve this question Follow edited Dec 22, 2013 at 5:00 user128511 asked Dec 20, 2013 at 21:15 BrianBrian 11611 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This is currently not properly sorted out. At the moment there is no callback or event dispatched when everything is loaded :/

This is a bit of a hack, but at line 10362 (revision 61) of three.js you will see image.onload = function() (it's in the main THREE.Loader prototype). I managed to track that down to be the callback function for loaded textures from JSON models.

If you add your own callback inside that function you can track when textures are loaded.

As I said before though, this is a hack (which helped me out a lot for a particular application) and not a solution, be very careful modifying the library code. You might break stuff you don't know you're breaking.

This is a ridiculously stupid cheat, but it will work as a hack. I agree one needs to realize image loading and everything else at least separately, so things that don't need images aren't twiddling their little electronic thumbs. That said, if optimization ain't your problem......

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

本文标签： javascriptHow to wait for textures to finish loading from JSON model in ThreejsStack Overflow