解决用Three.js实现嘴型和语音同步时只能播放部分部位的问题 Three.js同时渲染播放多个组件变形动画的方法

前言

参考这篇文章ThreeJS+ChatGPT 实现前端3D数字人AI互动，前面搭后端、训练模型组内小伙伴都没有什么问题，到前端的时候，脸部就出问题了。看我是怎么解决的。

问题情况

展示到页面上，是这么个效果（模型动作有夸大部分）：

这样的：

这样的：

这样：

这样：

以及这样：

很明显，这整个脸就没打算一起好好动。

解决方法

原因

出现这个问题，是因为你的网格分开了，但Threejs的混合器AnimationMixer创建一次只能混合一个网格Mesh。

这样子写，一次就只能混合其中一个Mesh：

...  // 省略了很多地方，只列出了关键的细节
loader.load('path/to/your/model.gltf', function(gltf) {const model = gltf.scene;scene.add(model);model.traverse(o => {...if(o.isMesh) {...if (o.morphTargetDictionary) {// 这里混合器只混合了一个meshconst mixer = new THREE.AnimationMixer(o);  ...}}}
}...const clip = getAnimationClip(msg);  // 调用参考文章中得到动画的方法let action = mixer.clipAction(clip);  // 此时此刻也只有一个mixer的动画
action.play();  // 播放动画function animate() {mixer.update(0.016); // 更新动画混合器requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

其实得一个Mesh一个混合器，最后把所有混合器都播放好。这样就能实现脸部的协调啦~

代码示例

const mixers = []  // 先准备好一个数组，存放mixer们...loader.load('path/to/your/model.gltf', function(gltf) {const model = gltf.scene;scene.add(model);model.traverse(o => {...if(o.isMesh) {...if (o.morphTargetDictionary) {// 不再只混合一个了// const mixer = new THREE.AnimationMixer(o); // 这里把混合了其中一个mesh的混合器给push进数组了mixers.push(new THREE.AnimationMixer(o));...}}}
}...const clip = getAnimationClip(msg);  // 调用参考文章中得到动画切片帧的方法// 播放动画也不能只用一个的了
// let action = mixer.clipAction(clip);
// action.play();for(let i = 0; i < mixers.length; i++) {let action = mixers[i].clipAction(clip); //所有mixer都生成对应的动作action.play();  // 动画全都给播放了
}function animate() {// 这里也记得都要播放哦// mixer.update(0.016); for(let i = 0; i < mixers.length; i++) {mixers[i].update(0.016);  // 更新全部动画混合器}requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();