How to show the actual position of the blender model

[hestud]

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 be able to display the current position of the model (like in Blender). The angle degree of the rotation (of Bone002) around x, and the x,y and z values.

Can I then also interact with the model and it’s position?
For example, I would like to be able to set the angle in my app for bone002 manually.

[Fennec]

Try Object3D#getObjectByName, you’ll need the exact name of your object (“Bone002” ≠ “Bone 002” ≠ “bone002”).

const bone = myModel.getObjectByName("Bone 002")

Otherwise you can console.log your model and manually go through the children and find the exact name of your bone.

@hestud

Can I then also interact with the model and it’s position?

Yes! Just like any Object3D, you can edit your bone’s position, rotation… (Check the live example in the doc)

[hestud]

Thanks. That works. I can change the bone “Bone002” with it, but the problem is that the other bones then don’t play along properly. Somehow the movements of the other bones are not taken into account. The inverse kinematics of arm01, or the damped tracking of Rotor, i.e. all movement restrictions are not taken into account at all.
Do I have to define all these bones again in the code, or can I somehow take over exactly the functionality from Blender for three js?
I really need help.

[hestud]

Here you can see what it looks like when I only rotate the bone “Bone002”.

Bone002 rotation angle of 10 degrees:

Bone002 rotation angle of 35 degrees:

and this is how it has to be:

Bone002 rotation angle of 10 degrees:

Bone002 rotation angle of 35 degrees

So the other bones are not right. Is there a possibility to take over this movement correctly with three js?

[Fennec]

You’ll probably need some third party library to handle the inverse Kinematics, a quick search got me this interesting library, kinematics:

kinematics.js on GitHub - robot demo

Since we’ve shifted to a different problem. I suggest starting a new thread! You’re likely to get more accurate guidance from others who are well-versed in this area.

Edit: Blender handle this kind of interactions with its internal physic engine, and it’s not exported with GLTF. AFAIK the only way to export it from blender is to convert it to an animation, then you can handle the animation with Three.js.

[prisoner849]

Another IK solver: three.js docs