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 (x,y,z) and be able to change the angle degree of the rotation (of Bone002; the marked bone) around x.
Here you can see the machine I want to load. I can only set the angle of Bone002 in Blender and the rest of the bones move accordingly as their movement allows. and the parent-child relationships. To do this, I have introduced bone constraints for the other bones, such as inverse kinematics for arm01 or damped tracking for rotor001, etc.
The problem is that these bone constraints are unfortunately not loaded into three js but only the animation from Blender.
So if I change the rotation angle of Bone002 in the code, only the respective arm swivels and the rest does not change:
As you can see, only Bone002 has been moved here and everything else is not as it should be.
Here another angle:
This is what it should look like with 10 degrees:
and this is what it looks like on the website:
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? I would like the user to be able to enter an angle and for Bone002 to execute this angle. Do I need another library? And how do I implement this in my code? I really need help.