在Three.js中使用Morph Targets实现平滑高效的唇同步

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(...) - 在 AnimationLoop 中调用 renderer.render( scene, camera ); 问题和问题解决：

- 动画变换不平滑，如何将动画从0到0.7设置为平滑？ - 我应该将先前的morphTarget重置为0吗？ （我认为是） - 在此论坛中使用TWEEN，但我不认为每50ms创建一个对象是有效的？动画可能持续多长时间，可能低于100或200ms，这不重要吗？

感谢，我是Three.js的新手。

- Jean-Philippe Encausse

---

嘿，你最终的方法是什么？ - Anveeg Sinha

你好。我是Tween.js的维护者。你不必每次都创建新的Tween对象。保留它们，并根据需要重复使用。 - trusktr

Answer 1

变形不够平滑，我该如何设置从0到0.7的平滑动画？

这取决于您的使用情况。可以使用动画库（如GSAP或Tween.js）来将变形目标影响从一个值动画到另一个值。但是，更高效的方法可能是从一系列变形目标设置动画剪辑，然后使用three.js的标准动画系统播放剪辑。可以通过静态工厂方法AnimationClip.CreateFromMorphTargetSequence()生成剪辑。

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

单个变形目标集表示特定状态下的几何形状。通常，您希望将所有变形目标的morphTargetInfluences条目设置为0，这不应影响3D对象。这也意味着您要将列表中的“先前”变形目标从其当前影响值动画回0。

在这个论坛中，他们使用TWEEN，但我认为每50毫秒创建一个对象并不高效？动画的持续时间可能少于100或200毫秒，这不重要吗？

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

- Mugen87