当前位置: 首页 > news >正文

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

前言

参考这篇文章ThreeJS+ChatGPT 实现前端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的小伙伴带来帮助,不要放下你敲代码的热情,总有前人在为你们探路中~(✿◠‿◠)

参考

ThreeJS+ChatGPT 实现前端3D数字人AI互动

(偷偷告诉你,这种开源社区大佬的实现项目,不是一般人能随便搜到的哦)

相关文章:

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

前言 参考这篇文章ThreeJSChatGPT 实现前端3D数字人AI互动&#xff0c;前面搭后端、训练模型组内小伙伴都没有什么问题&#xff0c;到前端的时候&#xff0c;脸部就出问题了。看我是怎么解决的。 好文章啊&#xff0c;可惜百度前几个都找不到&#xff0c;o(╥﹏╥)o 问题情况 …...

阅读笔记:明朝那些事儿太监弄乱的王朝

阅读豆评高分作品《明朝那些事儿太监弄乱的王朝》第三部&#xff0c;截止到今天告一段落了&#xff0c;前两部皇帝&#xff0c;太子相对比较少&#xff0c;了解故事的主线&#xff0c;分支不算多&#xff0c;记忆起来还能应付过来&#xff0c;第三部皇帝&#xff0c;太子更换的…...

算法第六天:力扣第977题有序数组的平方

一、977.有序数组的平方的链接与题目描述 977. 有序数组的平方的链接如下所示&#xff1a;https://leetcode.cn/problems/squares-of-a-sorted-array/description/https://leetcode.cn/problems/squares-of-a-sorted-array/description/ 给你一个按 非递减顺序 排序的整数数组…...

设计模式学习(二)工厂模式——工厂方法模式

设计模式学习&#xff08;二&#xff09;工厂模式——工厂方法模式 前言工厂方法模式简介示例优点缺点使用场景 前言 前一篇文章介绍了简单工厂模式&#xff0c;提到了简单工厂模式的缺点&#xff08;违反开闭原则&#xff0c;扩展困难&#xff09;&#xff0c;本文要介绍的工…...

TCP与UDP案例

udp不会做拆分整合什么的 多大就是多大...

Adaboost集成学习 | Matlab实现基于CNN-LSTM-Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料 效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于CNN-LSTM-Adaboost集成学习时间序列预测&#xff08;股票价格预测&#xff09; 模型设计 融合Adaboost的CNN-LSTM模型的时间序列预测&#xff0c;下面是一个基本的框架。 …...

你焦虑了吗

前段时间&#xff0c;无意间在图书馆看到一本书《认知觉醒》&#xff0c;书中提到了焦虑的相关话题&#xff0c;从焦虑的根源&#xff0c;焦虑的形式&#xff0c;如何破解焦虑给了我点启示&#xff0c;分享给一下。 引语&#xff1a; 焦虑肯定是你的老朋友了&#xff0c;它总像…...

一键分析Bulk转录组数据

我们前面介绍了经典的转录组分析流程&#xff1a;Hisat2 Stringtie&#xff0c;可以帮助用户快速获得基因的表达量矩阵。 云上生信&#xff0c;未来已来 | 转录组标准分析流程重磅上线&#xff01; RNA STAR 也是一款非常流行的转录组数据分析工具。它不仅可以将测序 Reads 比…...

Django DetailView视图

Django的DetailView是一个用于显示单个对象详情的视图。下面是一个使用DetailView来显示单个书籍详情的例子。 1&#xff0c;添加视图 Test/app3/views.py from django.shortcuts import render# Create your views here. from django.views.generic import ListView from .m…...

openGauss学习笔记-300 openGauss AI特性-AI4DB数据库自治运维-DBMind的AI子功能-SQL Rewriter SQL语句改写

文章目录 openGauss学习笔记-300 openGauss AI特性-AI4DB数据库自治运维-DBMind的AI子功能-SQL Rewriter SQL语句改写300.1 概述300.2 使用指导300.2.1 前提条件300.2.2 使用方法示例300.3 获取帮助300.4 命令参考300.5 常见问题处理openGauss学习笔记-300 openGauss AI特性-AI…...

typescript-泛型

typescript-泛型 泛型程序设计是一种编程风格或编程范式&#xff0c;允许在程序中定义形式类型参数&#xff0c;然后再泛型实例化时候使用实际类型参数来替代形式类型参数&#xff0c;通过泛型&#xff0c;可以定义通用的数据结构或类型&#xff0c;这种数据结构或类型仅仅再它…...

应急响应 | 基本技能 | 01-系统排查

系统排查 目录 系统基本信息 Windows系统Linux系统 用户信息 Windows系统 1、命令行方式2、图形界面方法3、注册表方法4、wmic方法 Linux系统 查看所有用户信息分析超级权限账户查看可登录的用户查看用户错误的登录信息查看所有用户最后的登录信息查看用户最近登录信息查看当…...

用c语言实现通讯录

目录 静态简易通讯录 代码&#xff1a; 功能模块展示&#xff1a; 设计思路&#xff1a; 动态简易通讯录&#xff08;本质顺序表&#xff09; 代码&#xff1a; 扩容模块展示&#xff1a; 设计思路&#xff1a; 文件版本通讯录 代码&#xff1a; 文件模块展示&#x…...

AI大模型技术揭秘-参数,Token,上下文和温度

深入理解 AI 大模型:参数、Token、上下文窗口、上下文长度和温度 人工智能技术的飞速发展使AI大模型大放异彩,其中涉及的“参数”、“Token”、“上下文窗口”、“上下文长度”及“温度”等专业术语备受瞩目。这些术语背后究竟蕴含何意?它们如何影响AI大模型的性能?一起揭开…...

攻防世界-fakebook题目__详解

1.打开题目先用dirsearch工具扫描一波&#xff0c;扫出来了robots.php目录&#xff0c;然后访问robots.txt 目录&#xff0c;发现了有一个备份文件 &#xff0c;访问备份文件&#xff0c;下载内容 文件的大致内容如下 里面有一个curl_exec这个函数容易造成ssrf攻击的漏洞 我…...

Ubuntu 18.04下普通用户的一次提权过程

Ubuntu 18.04下普通用户的一次提权过程 一.背景介绍:二.主要调试过程:三.相关命令:1.设置BMC密码,获取BMC IP2.找一台ubuntu搭建TFTP服务,用来替换grub.cfg文件3.从调试服务器的/boot/grub/grub.cfg中提取出recovery mode的配置,简化并生成新的配置文件grub.cfg,放在tftp服务的…...

接口和抽象类:如何使用普通类模拟接口和抽象类

目录 1.引言 2.抽象类和接口的定义与区别 3.抽象类和接口存在的意义 4.模拟实现抽象类和接口 5.抽象类和接口的应用场景 1.引言 在面向对象编程中&#xff0c;抽象类和接口是两个经常被提及的语法概念&#xff0c;也是面向对象编程的四大特性&#xff0c;以及很多设计模式…...

【文档智能】实践:基于Yolo三行代码极简的训练一个版式分析模型

一、数据集 本文以开源的CDLA数据集做为实验&#xff0c;CDLA是一个中文文档版面分析数据集&#xff0c;面向中文文献类&#xff08;论文&#xff09;场景。包含以下10个label&#xff1a; 数据集下载地址&#xff1a;https://github.com/buptlihang/CDLA 数据集是labelme格式…...

聚观早报 | 深蓝G318价格发布;比亚迪方程豹豹3官图发布

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 6月15日消息 深蓝G318价格发布 比亚迪方程豹豹3官图发布 夸克App升级高考AI搜索 iOS 18卫星通信实测 Redmi K70…...

如何实现内网穿透?快解析-免费内网穿透工具

在现如今的ipv4时代&#xff0c;随着上网电脑及其他智能设备越来越多&#xff0c;公网IP地址出现了枯竭的情况。近几年&#xff0c;内网穿透这个词被不断提及&#xff0c;这也是在无公网IP环境下实现异地访问的一种可行办法&#xff0c;下面我就给大家介绍一下内网穿透的原理。…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...