javascript - Three.js - 在动画期间获取当前骨骼骨骼位置

Question

我有一个正在播放动画的 Three.js 项目，我想在不同时间找到骨骼骨骼的位置。

例如，如果我去:https://modelviewer.dev/examples/animation/index.html 并找到 Three.js 场景:

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

然后我可以访问例如 LowerArmR 的位置，在这种情况下它是动画的:

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

如果我这样做，在动画的不同点，我总是得到相同的位置:

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

如何在动画期间访问当前骨骼位置？

如果我在人形化身动画上执行此过程，然后尝试绘制骨骼的位置，我只会得到 T 形姿势，而不是每个给定时间的实际位置:

来自 here我可以看到:

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.

我正在寻找解决方法或规范的方法来做到这一点。

Answer 1

骨骼动画(或“蒙皮”)应用于 GPU 上的各个网格顶点¹，因为顶点通常比骨骼多得多，并且在 CPU 上全部更新它们会计算量大。

但是，骨骼本身的转换是在 three.js 中的 CPU 上计算的。此处可能不明显的区别是:

1. 骨骼的.position属性，继承自THREE.Object3D's .position属性，是一个本地位置，相对于其父级的位置，其父级等等。
2. 大多数骨骼动画都是通过旋转而不是平移个别骨骼来运作的。例如，肩部的旋转将具有平移和旋转该骨骼的后代(即 ARM 的其余部分)的效果。

将所有这些放在一起，您想要找到的是世界位置，而不是特定骨骼的局部位置。 Object3D 父类有一个方法可以帮助解决这个问题，object.getWorldPosition :

const position = new THREE.Vector3();

bone.getWorldPosition( position );

请注意，此方法会产生一些性能开销，因为它在计算当前世界位置之前首先更新骨骼的世界矩阵——遍历其祖先。如果您需要许多骨骼的位置，或世界旋转和缩放等其他属性，最好确保所有全局变换都更新一次(scene.updateMatrixWorld()，如果需要)然后分解对象的 .matrixWorld:

const position = new THREE.Vector3();

position.setFromMatrixPosition( bone.matrixWorld );

---

¹ 如果您确实需要计算特定顶点在 CPU 上的位置，three.js SkinnedMesh 类有一个帮助方法:.boneTransform() .