ThreeJs-083D动画系统详解

一.动画原理和应用

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

posted @   Heymar-10  阅读(316)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示