Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to wait for textures to finish loading from JSON model in Three.js?

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.

like image 492
Brian Avatar asked Dec 20 '13 21:12

Brian


1 Answers

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

like image 175
mrdoob Avatar answered Oct 05 '22 00:10

mrdoob