Three.js 中具有变形目标的平滑高效的 LipSync

Question

我尝试在 ThreeJS 中对 ReadyPlayer.me 头像执行 LipSync。木偶已经有了 Viseme Face Rigged Morph Target。我正在使用 Microsoft Speech SDK 检索音频和 Viseme 值（时间码/ID）并正确映射它。

演示（第一部分）：https://www.youtube.com/watch?v=vLbQ2arXzRk

这是我的算法/工作流程：

• 开始播放音频
• 将 N-1 MorphTargetInfluence 重置为 0
• 更新 MorphTargetInfluence

  head.morphTargetInfluences[ viseme.id ] = 0.7

• 等到下一个偏移

  setTimeout(...)

• 在动画循环中我调用

  renderer.render( scene, camera );

疑问与问题

• 变形不平滑，如何将平滑动画设置为0到0.7？
• 我应该将之前的 morphTarget 重置为 0 吗？ （我想是的）
• 在 这个论坛中，他们使用 TWEEN 但我认为每 50 毫秒创建一个对象效率不高？动画应该持续多长时间可能低于 100 或 200 毫秒，这不相关？

谢谢，我是 Three.js 的新手

Answer 1

变形不平滑，如何将平滑动画设置为0到0.7？

这取决于您的用例。可以使用 GSAP 或 Tween.js 等动画库将变形目标影响从一个值设置为另一个值。但是，从变形目标序列设置动画剪辑，然后使用

three.js

的标准动画系统来播放该剪辑，性能可能会更高。剪辑本身可以通过静态工厂方法 AnimationClip.CreateFromMorphTargetSequence().

生成

我应该将之前的 morphTarget 重置为 0 吗？

一组变形目标代表特定状态下的几何体。您通常希望将所有变形目标的

morphTargetInfluences

条目设置为 0，这样不会影响 3D 对象。这也意味着您想要将列表中的“前一个”变形目标从其当前影响值设置回 0。

在这个论坛中，他们使用 TWEEN，但我认为每 50 毫秒创建一个对象效率不高？动画应该持续多长时间可能低于 100 或 200 毫秒，这不相关？

请参阅我的第一个答案。如果每帧创建太多对象，可能会导致性能问题。如果内置动画系统适合您，您的用例可能不需要第三方动画库。

Answer 2

我也在这里发布了我的疑问，请查看。

链接