Interactive machine from blender with its movements and current position

Questions
, , , ,
1

I have animated a cad model with Blender and exported it in gltf format. To realize these movements I had to set bones with constraints. Now I have inserted the edited model into my react app (with three.js).

Now, I want to interact with the model and it’s position (like in Blender).
I would like to display the current position of the model.

How can I transfer the model with the movements exactly as in Blender to three js without having to play a finished animation? And how can I then access the current position exactly?
Do I need another library? And how do I implement this in my code?
I really need help.

1 Like
2

You may want to uncheck the Transform->+Y up when you export your GLB

What you may be seeing is a change in the rotation order / axes caused by conversion to Y up. If you uncheck the Y up conversion, and then just place your GLB under a rotated root node in threejs, you may get different rotation behavior.

3

OK. But the rotation is not the problem for me.
The problem is that the rest of the bones don’t move with it like they do in Blender. Obviously the bone constraints are not transferred from blender.

1 Like
4

Blender bone constraints are a blender functionality and not something that can be exported, I think it’s better to bake the animation in blender if possible and use the bake animation in threejs.

2 Likes
5

But will I then be able to make changes and display the current position?
Changes like, set the rotation angle as desired.

1 Like
6

baking animation doesn’t effect translation and rotation values, simple when baking the animation is to insert a key on each frame, “baking” the animation into the timeline and converting it from curves and tangents into frame by frame animation.

In blender .glb/.gltf export menu, under animation tab > check Bake All Objects Animations

If you hover over this check box the help tip explains exactly what you want
tip

2 Likes
7

Ok. Thank you.
And if I still want to interact with the model somehow on the web, is there a way to do that?

1 Like
8

This is a different story, I don’t have much experience in Threejs animation and bones but I assume it does not matter if the animation is baked or not, you need to create a system that translate the user interaction into the model moving. Depending on your animation or at least each part animation if you rather have an IK system to drive the user animation or simply using a 0 to 1 property of animation where 0 is the start of the animation and 1 is the end of the animation.

You can check this Three.js example that uses IK, though I don’t know if that will help you or make things more complicated for you.

This example shows my idea of 0 to 1 value that drives the animation.

You can always click on the < > icon in the bottom right corner to check the code of the example.

2 Likes
9

Okay thank you very much!
I will take a closer look.

1 Like
10

I think if you try to manually modify a bone that is being animated, it depends if you do it before or after the animationMixer.update

so… you can play an animation…

in your main loop somehwere you’re calling animationMixer.update

then after you can modify a bone and it should override the animation on that bone.

A different approach is to formulate your manual bone change as an animation track and then layer that animation+track onto the model after the first animation, but using a really high weight… this is mostly only useful if you don’t have control over when the animationMixer updates.

1 Like
11

Thanks a lot! But i’m still struggeling with trying to interact with the model in web, so i am trying to find other solutions…
Is there a way to access the angle? Can I create an animation (in Blender) from min angle 0 to max 56 and then call up the desired angle in the code?
Or do I have to set keyframes in Blender and then call the keyframe, i.e. call angles over time?

12

In blender you can set start / end keyframes, export the animation to gltf, and in threejs you can get those animations, and modify their keyframes to your hearts content…
An animation is just a stored list of time + key for different “channels”, where a “channel” is like .position, or .quaternion, or .scale, or .rotation… so you could make a 2 key animation with a start and stop position or rotation, and then modify the end keyframe to control how far or where the thing ends up.
When you play an animation, you don’t specify which keyframe to play, you just tell it what time to advance to, and the animation system takes care of all the in-betweening…

Setting up all your interactions as key frames like that in blender, and then modifying/applying them at runtime in threejs is a great way to script interactivity.

3 Likes