ThreeJs-083D动画系统详解

news/2024/12/25 23:39:29/文章来源:https://www.cnblogs.com/heymar/p/18631662

一.动画原理和应用

three的动画大概就是通过不同时间的关键帧来实现

加载一个手机模型

image-20241212221732540

在这个对象里面,注意后期都是直接通过可视化软件Blender编辑好关键帧就能实现动画,这也是个已经编辑好的动画模型,在这个对象里面有一个animations就是动画集,也就是这个物体可以有很多个动画

其中animationclip表示剪辑动画,duration表示动画时长,tracks轨道表示各种关键帧,比如第一个关键帧里面,name什么group1 2 3等等都是一个部位,最后position表示这个关键帧是移动了位置,times表示时间,values是顶点,三维向量,一个时间对应values三个向量也就是一个顶点,表示这个时间段0.03999999910593033秒,第一个点移动到了-0.009195199236273766, -0.021173708140850067, -0.05099957436323166这个位置,所以times x3 等于values

image-20241212222453057

当然你要看物体也可以在children属性里面看到

image-20241212222621020

编辑好后拿到模型此时是静态的,还需要将动画播放起来

image-20241212222854525

此时还要注意,我们要不断更新动画,那就在animate函数里面,并且创建一个时间,作为参数,要让动画知道时间是什么

image-20241212223135001

GIF

1.1 代码实现keyframme关键帧动画

简单创建一个立方体

image-20241212225048222

GIF

1.2 四元数与欧拉角转换设置关键帧

主要就是旋转动画,刚才是位移动画,旋转动画就要用到QuaternionKeyframeTrack

四元数就是利用一系列公式算出角度可以避免旋转过程中轴心偏向的问题

当然这个three已经帮我们处理好了,我们不用去算直接用她的一个数学库来解决

image-20241212225754896

image-20241212230821934

GIF

除此之外,四元数还支持欧拉角的方式来设置角度,三个参数分别表示x轴角度y轴z轴

image-20241212231005456

1.3 布尔关键帧动画

就是控制显示隐藏,类似于星星闪烁效果

image-20241216223401567

GIF

如果要对模型使用,注意模型的名字可以通过children属性查找里面的name

image-20241216224216777

GIF

1.4 颜色关键帧

可以根据时间设置不同的颜色

注意颜色支持rgb但是是0-1的写法

而且是对材质设置

image-20241216224947012

GIF

4.5 数值关键帧

就是想对这个3D物体某些属性进行数值上的单独修改可以用这个

比如透明度

注意要找到模型的材质,可以一直往这个gltf.scene的children下面找,找到最后一级会有mesh此时就带有材质

image-20241216230249032

GIF

二.混合器

混合器就是可以对动画进行一些设置,比如时间多少,快慢,暂停启动等

image-20241216231118768

GIF

三.人物多动作丝滑切换

加载模型进来,可以看到这是一个已经做好动画的模型

image-20241218224523258

image-20241218224640414

随便取几个代表性的动画出来

image-20241218225630353

注意:这些动画不能一股脑一次性播放不然会变得很鬼畜

image-20241218225730300

首先来一个站着不动呼吸的动画

其他效果类似

image-20241218231151726

GIF

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/858920.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day1——伙伴匹配学习笔记

了解了一些Java8特性lambda语法 (parameters) -> expression (parameters) -> { statements; }相当于是函数的另一种写法,更优雅。stream()用法以及和parallelStream()的一些对比 详见博客 java8新特性-流-stream()和parallelStream() 求求你们了,别再乱用 parallelStr…

如何获取局域网内所有IP

cmd命令: ipconfig/ALL 这时会在cmd命令窗口看见自己电脑的IP地址,记下来cmd命令窗口输入 for /L %i IN (1,1,254) DO ping -w 2 -n 1 192.168.0.%i (注意:我这里的192.168.0.*是根据自己电脑的ip网段来填写的) 待几分钟后 命令处理完成,然后在cmd命令窗口输入 arp -a第七步…

对话 Project Astra 研究主管:打造通用 AI 助理,主动视频交互和全双工对话是未来重点

Project Astra 愿景之一:「系统不仅能在你说话时做出回应,还能在持续的过程中帮助你。」近期,Google DeepMind 的 YouTube 频道采访了 Google DeepMind 研究主管格雷格韦恩 (Greg Wayne)。格雷格韦恩的研究工作为 DeepMind 的诸多突破性成果做出了重要贡献,涵盖强化学习、神…

3 三角翼

3 三角翼 概念 在很大程度上,基于二维流动和高展弦比无后掠三维翼型流动的证据,流动分离一直被视为应不惜一切代价避免的现象。 然而,人们发现,高速飞行所需的低展弦比、高度后掠的机翼,尽管其上表面已经发生了分离流动,但随着迎角的增加,升力也会增加。 剪切层由机翼跨…

基于遗传优化模糊控制器的水箱水位控制系统simulink建模与仿真

1.课题概述基于遗传优化模糊控制器的水箱水位控制系统simulink建模与仿真。对比模糊控制器和基于遗传优化的模糊控制器。2.系统仿真结果 遗传算法迭代过程:遗传优化模糊控制和模糊控制的控制器输出对比:3.核心程序与模型 版本:MATLAB2022amatlab部分:Areas = []; % FIS = a…

基于EO平衡优化器算法的目标函数最优值求解matlab仿真

1.程序功能描述 基于EO平衡优化器算法的目标函数最优值求解matlab仿真。提供九个测试函数,分别对九个测试函数仿真输出最优解以及对应的优化收敛曲线。 2.测试软件版本以及运行结果展示MATLAB2022A版本运行3.核心程序while j2<Niters% 主循环进行迭代% 时间衰减参数计…

蓝桥杯 第 24 场 强者挑战赛 题解上(1-3题)

原题链接 https://www.lanqiao.cn/oj-contest/senior-24/ 标记名字【算法赛】一条横幅,在1/N,2/N, 3/N(N-1)/N的地方标记一次,若之前标记过这则不用再标记,求f(N)=此时新标记的个数。上思路读懂题后,重点在于确定该题的思考方向,也就是,新标记的点分子和分母有什么特点…

python通过内存映射在父子进程间共享数据

代码:import mmap import osmm = mmap.mmap(-1, 13) mm.write(b"pid:") mm.write(str(os.getpid()).encode(utf-8))pid = os.fork()if pid == 0: #子进程,这个fork和php的很像mm.seek(0)print(mm.readline().decode(utf-8))print(id:%s % os.getpid())mm.close() …

wordpress如何使用SMTP发送邮件?

安装之后进行简单的设置,即可实现使用第三方邮箱账户发送邮件的目的。 SMTP邮件发送设置 文章来自 www.koheng.com如何使用SMTP发送邮件?

jenkins集成自定义shell脚本

在jenkins工作空间中动态生成shell脚本shell语法cat > h5build.sh <<EOFcurrent=\`date "+%Y-%m-%d %H:%M:%S"\`timeStamp=\`date -d "\$current" +%s\` currentTimeStamp=\$((timeStamp*1000+\`date "+%N"\`/1000000))echo \`cat ve…