Animate Multiple Objects Simultaneously in a scene

Questions
,
1

Hey all,
I will get straight to the point. Suppose say if I have 25 Object3D objects in my Scene. Each of these objects need to be animated(translated or rotated) about a particular axis. All the 25 Objects need to be animated simultaneously. How do I proceed about it? I couldn’t make any meaningful progress in terms of writing code, so I don’t have any code to share. Any help is greatly appreciated. Thanks in advance.

2

But you didn’t explain which part is blocking you.:man_shrugging: ? Animating 1 or 100 objects works the same way - you just make adjustments before calling renderer render method.

3

@mjurczyk Thanks for the response. Do you have any example. Of how to animate many objects simultaneously? inside a render loop. Should I loop through all objects?

4

Maybe there’s something in official examples that may help you - there’s quite a few with animations.

In general, it is just a for-loop, no magic at all. If you’d show us your sample code we can see what’s causing the objects not to animate.

Well, you just loop through the objects you’d like to animate - but looping through all objects is fine, too, as long as your scene is not too crowdy.

5

Dear @mjurczyk. Thanks for the response.

let data = new Map();  //data Map contains all the data regarding animation

PartFromAssy.array.forEach(part => { // part here is Object3D object

    data.set(distances[_i], { vector: normalizedVector[_i], id: part.id });  // Data Map is updated like this. 

    _i++

});

let animateVariable = 0;

renderer.setAnimationLoop(function () {

    for (let _i = 0; _i <= PartFromAssy.length; _i++) {

        if(animateVariable<=distances[_i]) {

            let objID = data.get(distances[_i]).id;

            let normalizedVector = data.get(distances[_i]).vector;

            let obj = scene.getObjectById(objID);

            obj.translateOnAxis(normalizedVector, distances[_i]);

            animateVariable+=0.01;

        }

    }

Here’s the code snippet of how I am trying to achieve animation of many Objects simultaneously. It doesn’t seem to work. Can you help me out?

6

It may be easier if you use renderer.render() manually inside a requestAnimationFrame - see here an example of this (traverse method loops through all objects in the scene, and updates them.)

This is the final result.

1 Like