Theatre.js : how to animate multiple objects?

Help & Support
,
1

Hello everybody,
I have followed this example by @lexxik to use theatre.js in playcanvas. ( [PlayCanvas 3D HTML5 Game Engine](https://lexxik example: theatrejs + pc) )

I understand the logic to animate one object but now I would like to programmatically add any entity which has a particular tag to theatrejs studio so I can animate them easily.

for example let’s say I have 4 different models (box/cube) and I give them the tag “anim”

 // I get all my 'tagged objects'    

        const entities =this.app.root.findByTag("anim");
        // [...] I skip the basic theatrejs stuff [...] //

  // I create a "sheet" containing each objects and theirs props with this function
 
    function addObjtoSheet(obj){
       const getPropVec3 = (precision) => {
        return {
            x: t.number(0, { nudgeMultiplier: precision }),
            y: t.number(0, { nudgeMultiplier: precision }),
            z: t.number(0, { nudgeMultiplier: precision }),
        };
    };    
    return sheet.object(
        obj.name,
        {
            position: getPropVec3(0.01),
            rotation: getPropVec3(0.01),
            scale: getPropVec3(0.01),
            visible: true
        }
    );
    var objects=[];
    for (var i=0; i<entities.length;i++){

        objects.push(addObjtoSheet(objets[i]));
 
    }

  // their I (should) have my "theatre js sheet" with all my objects 

  console.log(objects)
}

But then I don’t know how to animate them and assign each object in the sheet to a “reel” entity in my scene ? If someone knows how I would love some help. Thanks

1 Like
2

Yeah, I would also like to know if this is possible.
I have a complex 3d UI animation that includes multiple glb and multiple spritesheet animations.
It would be neat if you could orchestrate it with some kind of timeline interface.
For know I am doing it using animation events, separate script for spritesheet texture animation, separate script for fading in and out.

3

When you add your objects to the sheet, then you will be able to select them in the studio view. You can access it via top left button, after you launch the app. If you select your object from that menu, there will appear a timeline interface and a properties window that will allow you to tweak the object properties, e.g. position/rotation, etc.

Once happy with the animation, you can export it as JSON from the studio menu and add to the project assets. Then when publish, you can just use the lightweight Theatre client, that can only playback animations, without heavyweight Theatre studio. You can understand the concept after completing some tutorials on Theatre.js.