解决用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) {
                // 这里混合器只混合了一个mesh
                const 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();