Three.js - 在动画期间获取当前骨骼骨骼位置 如何在动画过程中访问当前骨骼位置？

如何解决Three.js - 在动画期间获取当前骨骼骨骼位置 如何在动画过程中访问当前骨骼位置？

我有一个带有动画的 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 我可以看到：

骨骼动画是在 GPU 上处理的，因此这些数据不完全是 可以在运行时在 js 代码中访问。

也许有人知道一些解决方法，但据我所知 没有。

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

解决方法

骨骼动画（或“蒙皮”）应用于 GPU¹ 上的单个网格顶点，因为顶点通常比骨骼多得多，并且在 CPU 上更新它们会计算成本高。

然而，骨骼本身的变换是在three.js中的CPU上计算的。这里可能不明显的区别是：

1. 骨骼的 .position 属性，继承自 THREE.Object3D's .position 属性，是一个本地位置，相对于其父级的位置，以及它的父级，依此类推.
2. 大多数骨骼动画都是通过旋转而不是平移单个骨骼来运行的。例如，肩部的旋转会同时平移和旋转该骨骼的后代（即手臂的其余部分）。

将所有这些放在一起，您想要找到的是世界位置，而不是特定骨骼的局部位置。 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()。>