Delay animation/movement until a gltf and a csv are loaded

Questions
,
1

Hey all,
My goal is to animate a loaded gltf model along a CatmullRomCurve3 which vertices are loaded in via a csv. For the animation I am using myModel.position.set() which is similar to this older example found online: three.js 1 - rotating cube - JSFiddle - Code Playground

My current solution works only when I first check if the model object exists / is loaded already (otherwise the scene crashes in the beginning):

function render() {
    if ( myModel) animateBoat();
    renderer.render( scene, camera );
}

But after the model is there, it becomes unnecessary (or even expesnive?) to check its existance in every render loop. I’ve also wondered if using a myModel.isAnimated boolean, instead of checking if it exists, would be less expensive.

Can someone recommend any other alternative?
Thanks in advance!

2

Loading files should have callback methods which are fired once the operation is completed. You may start calling a recursive method with requestAnimationFrame set to that method itself, same way render method works.

Also the performance impact of an if-check is negligible, I would not worry about that. You may need to remove or replace your object at some point then need to check again.

2 Likes
3

Thanks a lot, Sarge!
Moving the animation of a model into a separate recursive method seems to work well with one model (1 gltf and 1 csv)!
Though, in the end I aim to have 3-4 different models per scene and as you assert that the if-check shouldn’t be a thing to be worried about, I will probably stick to that solution.

But why would that be necessary?

1 Like
4

I may be misunderstood, I do not really know about your project, so just assumed. Imagine that in some case you remove your object from the scene, to replace it or so. Then checking if it’s null is useful, so you don’t try to run the animations on a null model. In your case this might not happen at all.

5

Thanks for the quick reply and the explanation! Yes, that makes sense :slight_smile:

For the record, Sarge, your suggestion also works with more models, though at first I get a console error (TypeError: Cannot read property 'position' of undefined). After that, both models are visible and animated in the end.

1 Like