Sunday, 16 May 2021

Three.js - get current skeleton bones position during animation

I have a Three.js project with an animation going on and I would like to find the skeleton bones position at different times.

If I go for example to: https://modelviewer.dev/examples/animation/index.html and find the Three.js scene:

  const modelViewer = document.querySelector("model-viewer");
  const scene = modelViewer[Object.getOwnPropertySymbols(modelViewer)[14]];

I can then access for example the position of the LowerArmR which is animated in this case:

scene.children[0].children[0].children[0].children[0].children[1].children[0].skeleton.bones.find(b => b.name == "LowerArmR").position

If I do that, at different points of the animation, I always get the same position:

{x: 1.86264503820865e-10, y: 0.00575238140299916, z: -1.02445485428149e-9}

How can I access the current skeletal positions during an animation?

If I perform this process on a humanoid avatar animating, and then try to plot the positions of the bones, I just get the T-pose, but not the actual positions in every given time: enter image description here

From here I can see that:

Skeletal Animations are handled on the GPU so this data is not exactly accessible in js code at runtime.

Perhaps someone knows some workaround, but as far as I am aware there is none.

And I am looking for that workaround or canonical way to do it.



from Three.js - get current skeleton bones position during animation

No comments:

Post a Comment