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.

4

Hi @LeXXik,
How exactly do I do the publishing. In other words: Where do I find the lightweight client and how do I implement it in my project?

Thx in advance

5

I would recommend completing all tutorials on Theatre.js official website. They will answer all your questions.

6

I have watched some of the videos. They’re all for Three.js and other tools. It seems that for PlayCanvas, it is implemented a bit different. I tried to comment out the studio.initialize(), like I saw in those videos, but I don’t get how to run the animation from the sheet.

It would be cool if you had a line or a simple step to just activate the lightweight.

7

just look at my project , it is pretty straightforward
https://playcanvas.com/project/1063357/overview/every-little-things

1 Like
8

Very cool!

For everyone else reading this in the future: The scripts in question are animation.js and anim2.js. And the object responsible for the scripts is Animator

1 Like