当前位置: 首页 > 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;下面我就给大家介绍一下内网穿透的原理。…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

day51 python CBAM注意力

目录 一、CBAM 模块简介 二、CBAM 模块的实现 &#xff08;一&#xff09;通道注意力模块 &#xff08;二&#xff09;空间注意力模块 &#xff08;三&#xff09;CBAM 模块的组合 三、CBAM 模块的特性 四、CBAM 模块在 CNN 中的应用 一、CBAM 模块简介 在之前的探索中…...