5

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.com/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 incomplete 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.

Improve this question

3 Answers 3

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 :/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is there a workaround? Perhaps scanning the json file for materials and creating independent textures for each image file just to cache them?
Heh, well, it doesn't! I loaded them up using loadTexture first, but even after that the JSONloader still fetched the image file instead of taking it from cache (tested in chrome and firefox). network monitor screenshot I also tried using window.onload but that event is only ever triggered once.
2

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.

Improve this answer

1 Comment

Thanks for the suggestion, bit too much of a novice to go modifying the source code for now I think.
1

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);

Improve this answer

2 Comments

This might work but it's not guaranteed to work. Effectively the browser is supposed to do absolutely nothing until your JavaScript exits its current event. The fact that you're spin waiting means you've never exited the event. Basically you're just getting lucky that whatever browser/version you tested on happens to not completely freeze. On top of that, even if it doesn't freeze if the connection is slow the browser may kill your JavaScript as taking too long. You also DoS the user's machine while spin waiting.
This looks like "busy waiting" for me... . Don't do it this way... .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.