Stop/start GLTF 2.0 animation via keypress

Questions
1

I’m sure this is easy, but I’m not getting it.

I append an animated GLB file into my scene. It works perfectly.

BABYLON.SceneLoader.Append("./", "animation.glb", scene, function () {
var anim = scene.getMeshByName("__root__");
anim.scaling = new BABYLON.Vector3(0.3,0.3,0.3);
anim.position = new BABYLON.Vector3(0, 0, 0);
});

Now how do I stop it animating with a keypress? I’ve tried code snippets from the “Animation Blending” example, as well as a host of others, and I’m lost. I think part of the problem is that the “Animation Blending” example uses a .babylon file? I don’t know. HELP!

3

@PatienceAllergy -

Create a function to start/stop your animation on a key press by calling the function in whatever event you like.

Here’s a recent topic which covers many conditions for starting and stopping animation:

Galen

4

Yep, I saw that one, I even tried some code out of it. But I couldn’t make any of it work.

But I’m giving it another go here. Maybe you can help me perfect the code.

The key I’ll use is W, I only need one key, and I don’t need the mesh to move, just toggle the animation.

So I chopped and changed the examples to suit and came up with below, but it doesn’t work.

BABYLON.SceneLoader.Append("./", "f3d-walk.glb", scene, 
    function (newMeshes2, particleSystems, skeletons) {
var walk = scene.getMeshByName("__root__");
walk.scaling= new BABYLON.Vector3(0.3,0.3,0.3);
walk.position = new BABYLON.Vector3(0, 0, 0);

let isWPressed = false;

document.addEventListener('keydown', (e) => {
    if (e.keyCode == 87) { isWPressed = true; }
});

document.addEventListener('keyup', (e) => {
    if (e.keyCode == 87) { isWPressed = false; }
});

scene.registerBeforeRender(function() {
if (!scene.isReady()) return;
        
if (isWPressed) {
    scene.beginAnimation(skeletons[0], 1, 32, true);
} else {    // I'm guessing animating from frame 1 to frame 1 is a pause
    scene.beginAnimation(skeletons[0], 1, 1, true);
}
});
});
5

@PatienceAllergy -

I need to try and get a little sleep - so I’ll be out for a few hours. But I’ll take a look when I’m back at my desk. Perhaps in the meantime you might set up a PG scene using your code - even if it doesn’t work, we’ll have something you built using your assets and can modify quickly.

The important elements are that it’s your code and just make sure that we are loading your meshes and animations. If you’re not sure how to set this up, just use a free online drive and link to it. There are many drives out there where you can host for free.

I can see what you’re trying to set up, however there isn’t enough structure in place where I or someone else won’t be writing most of it for you. I’m always happy to put a PG scene together, but again it’s really important to use your geometry, anims, and any other key assets - as we’ll just end up writing a generic scene that may not necessarily apply to your specific circumstances. This will also get you up and running with a host drive; and since you’re relatively new to BJS, I’m certain you’ll have this need again soon.

If you didn’t get any of the code working from the topic I linked to, then there must be some holes in your experience; which is completely normal… we’ve just got to fill those gaps in so that you don’t come away not fully grasping some of the most basic concepts. And that’s a crappy place to be. I lived there for a year or more when I first joined the forum 5 years ago. Perhaps I’m not fully understanding, so if I’m incorrect about your skill-sets just ignore me. I can only read so much into what I see.

I should be up again in a few hours, so if no one else has assisted, I’ll be happy to help. But that PG scene will get you an answer right away and will be there for you in the future. Most of us have a template we use which we can load a basic scene with assets quickly and modify.

Cheers,

Galen

2 Likes
6

Hi,

Can you make a playground with your code, please ?
It’ll be much easier for us to help you :slightly_smiling_face:

3 Likes
7

Yeah, I’ll do up a PG for you tomorrow. I’m going to get some sleep now too. And yes, I’m pretty out of my depth. I come from a web development background. So I use javascript and php fairly regularly, but this is all a bit next level for me. I spent a day trying to figure this out myself, and then posted my question because I’m lost. So, stay tuned for the demo I’ll post tomorrow, I look forward to getting my basics “filled in”. Sweet dreams Zzzzzz. :sleeping:

8

Hey @PatienceAllergy -

Just woke up and saw your post. If you have a site you’re working from, then it might be good to also have a link to this space if you need any review of your PHP/HTML architecture. PHP can really limit your WebGL support unless you’re a master of the DOM. Otherwise just the PG scene will do far more since PGs are specific to function. But obviously you already know this.

You almost had me going on the Fletch reference. I wasn’t going to go there… but you beat me to it. Innuendos aside… :grinning:

We’ll look for your PG tomorrow. No need to spend much time on this, as just the key code and paths are needed. Don’t do what I used to do; spending 10 hours guessing at code. This forum is awesome… this is an easy task for many… and you’ll be one of the many in a few hours.

Galen

9

Here is a demo ya’ll can play with. I commented out my attempt to stop/start the animation via keypress, because it stopped the mesh from loading at all.

I was going to upload a GLB, but didn’t need to, I found this cheesy beating heart all ready to go!

All I want to do is stop the animation while the ‘w’ key is held down. That’s it folks. It’s that simple.

https://www.babylonjs-playground.com/indexStable.html#0ASNMD

10

Hey. This is playing the animation only on keypress, I don’t know if this was your goal, but from pg it looks like.
https://www.babylonjs-playground.com/indexStable.html#0ASNMD#1

1 Like
11

@PatienceAllergy

See how easy that was? Here I am up again all night. That’s what we creatures of the night do. If you want the animation to play without a key press, here’s the scene:

https://www.babylonjs-playground.com/indexStable.html#0ASNMD#2

I just set the variable isWPressed = true. Did you simply find this code on the PlayGround? What elements exist in this scene that you don’t fully understand? Events? RegisterBeforeRender()? All are extremely important to understand as you’ll be making use of these as much as any functions in JavaScript; and specifically the RegisterBeforeRender() function is often required to calculate values and run many functions outside of the render loop. So make sure you know and understand this well.

If you want, please ask whatever questions you might have as in this PG scene exists many key elements that you’ll use everyday. And if you’re new to these functions, it can be daunting. Everyone simply expects for you to already fully grasp what many might call JavaScript “basics.” Luckily you’ve hit several essential functions you’ll need to fully understand; if you don’t already.

Galen

1 Like
12

Yes, that was my goal, either way I knew that would give me the correct procedure. I would never have thought that I needed to set up an animation group, nor known how to do that, despite having read about them! Thanks so much! :smiley:

1 Like
13

Hey thanks Galen, Yep I wasn’t quite sure where to put the RegisterBeforeRender(), and I didn’t really know about animation groups, so the working examples from @MarianG and yourself are very useful. I mixed fragments of code from the “Animation Blending” example from the Babylon “Examples” page, and code that I already new worked.

I’m working on a game in between other gigs so it’s a bit stop/start (excuse the pun), because I have to prioritise paid work.

Umm was your Fletch joke earlier about where he plays a faith healer? Ahahaha. :upside_down_face:

1 Like