长安做外贸网站,网址模板建站,莱芜梆子网站,网站建设管理及维护前言
参考这篇文章ThreeJSChatGPT 实现前端3D数字人AI互动#xff0c;前面搭后端、训练模型组内小伙伴都没有什么问题#xff0c;到前端的时候#xff0c;脸部就出问题了。看我是怎么解决的。 好文章啊#xff0c;可惜百度前几个都找不到#xff0c;o(╥﹏╥)o 问题情况 …前言
参考这篇文章ThreeJSChatGPT 实现前端3D数字人AI互动前面搭后端、训练模型组内小伙伴都没有什么问题到前端的时候脸部就出问题了。看我是怎么解决的。 好文章啊可惜百度前几个都找不到o(╥﹏╥)o 问题情况
展示到页面上是这么个效果模型动作有夸大部分 这样的 《眉飞色舞》 这样的 《流连赏目》 这样 《目无全牛》 这样 眼角我不感动 以及这样 嘴巴该配合你演出的我演视而不见 很明显这整个脸就没打算一起好好动。 解决方法
原因
出现这个问题是因为你的网格分开了但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(); 效果展示
当当当当~ 不好意思搞错了再来 效果还不错的赶脚~ 后记
网上这方面的资料太少了这次真就是自己在脑子里构思一个个方案做出一小步一小步的修改最终给我试出来是这个毛病了……不容易啊不容易o(╥﹏╥)o
希望本文能给其他用Threejs的小伙伴带来帮助不要放下你敲代码的热情总有前人在为你们探路中~(✿◠‿◠) 参考
ThreeJSChatGPT 实现前端3D数字人AI互动
偷偷告诉你这种开源社区大佬的实现项目不是一般人能随便搜到的哦
