首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >three.js动画:骨架/剥皮与变形

three.js动画:骨架/剥皮与变形
EN

Stack Overflow用户
提问于 2014-10-17 10:19:58
回答 1查看 1.3K关注 0票数 0

因此,在对Morph和骨骼动画(从Blender导出)进行了一些实验之后,我发现骨骼文件比变形文件小近10倍。显然,骨骼是更好的选择,但我想知道是否存在使用它的缺点。

具体来说,我怀疑需要更多的处理来动画一个骨架,而不是变形。什么时候一个比另一个好?如果我把100款模型和一款动画相提并论会有什么关系吗?如果骨架确实需要更多的处理,并且我在线托管应用程序,那么(由于小文件大小)带宽的减少是否值得它在运行时需要额外的处理呢?

谢谢你的意见。

EN

回答 1

Stack Overflow用户

发布于 2014-10-17 12:30:43

事实上,骨骼动画需要更多的处理,因为骨骼的矩阵必须在每一个帧中计算(在JS中),然后上传到GPU。当使用变形动画时,所有的插值都可以在GPU端完成.因此,这真的是一个记忆性能的交易。

当你有许多动画在同一时间播放,处理确实会有一些成本。然而,与此同时,几个不同的变形动画将有大的文件大小。

就像你提到的。

所以这取决于案子。有几点你应该注意到:

  • 如果动画不是太快或复杂的话,变形动画可以以每秒减少的帧存储,这样你就会有更小的文件。
  • 骨骼动画有骨头信息,你可以用它把东西附加到你的模型上,例如你有一个士兵模型,你想把不同的枪附加到上面。有了变形动画,你就不能这么做了,所以你必须让士兵和每把枪都有动画效果。
  • 实际上,您可以在同一应用程序中使用两种类型的动画,为每种应用选择最适合的动画。
  • SkinnedMesh-es,与MorphAnimMesh-es相反,目前不支持射线广播.如果你需要光线投射,例如选择对象,你将需要暂时使用变形动画。
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26431117

复制
相关文章
three.js 自制骨骼动画(一)
上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧。在线案例请点击three.js自制骨骼动画。话不多说先上图
郭先生的博客
2020/08/31
3.6K0
three.js 自制骨骼动画(一)
three.js 自制骨骼动画(二)
上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击three.js自制骨骼动画。话不多说先上图
郭先生的博客
2020/08/31
3.3K1
three.js 自制骨骼动画(二)
three.js之初探骨骼动画
今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理,然后一点一点解读官网案例,骨骼动画官网案例
郭先生的博客
2020/08/31
2.6K0
three.js之初探骨骼动画
CSS 3.0实现的加载背景动画(骨架屏)
在做数据据请求时,通常会为要在展示数据前设置一个加载中的背景动画,以达到更好的用户体验,也就是现在比较流行优化用户体验的骨架屏,下面给大家分享一段代码实现这个效果,欢迎大家复制粘贴及吐槽。
越陌度阡
2020/11/26
7980
Three.js camera初探——转场动画实现
郭诗雅
2017/03/31
21.2K7
Three.js camera初探——转场动画实现
iOS手势与变形
这些手势大都继承于UIGestureRecognizer类,(UIScreenEdgePanGestureRecognizer继承于UIPanGestureRecognizer类),
零式的天空
2022/03/22
1.2K0
CSS3变形、渐变、动画的基本使用
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。 转换的效果是让某个元素改变形状,大小和位置。 您可以使用 2D 或 3D 转换来转换您的元素。 2D变换方法: + translate() + rotate() + scale() + skew() 具体的详情描述可以看:菜鸟教程 简单使用代码
不愿意做鱼的小鲸鱼
2022/09/24
1.3K0
CSS3变形、渐变、动画的基本使用
iOS手势与变形
手势在用户交互中有着举足轻重的作用,这篇文字简单的介绍了iOS中的手势,并通过手势对控件进行变形处理。若有错误,或不同的见解,请指正! 手势 ---- iOS手势分为下面这几种: UITapGestureRecognizer(点按) UIPanGestureRecognizer(拖动) UIScreenEdgePanGestureRecognizer (边缘拖动) UIPinchGestureRecognizer(捏合) UIRotationGestureRecognizer(旋转) UILongPr
BY
2018/05/11
1.9K0
『Three.js』几个简单的入门动画(新手篇)
如果对上面的代码还不太理解,可以先看看 《『Three.js』起飞!》 ,坐标轴方面可以看看 《『Three.js』辅助坐标轴》 。
德育处主任
2022/09/09
2.6K0
『Three.js』几个简单的入门动画(新手篇)
关于骨架屏与首屏渲染
参考链接: vue-content-loader page-skeleton-webpack-plugin vue-content-loader vue页面骨架屏
Ewall
2020/04/02
1.1K0
关于骨架屏与首屏渲染
【带着canvas去流浪(11)】Three.js入门学习笔记
官方文档中的新手示例过于简单,所以本节对Three.js中的概念进行一些补充描述:
大史不说话
2019/07/15
3.9K0
【带着canvas去流浪(11)】Three.js入门学习笔记
CSS3的变形transform、过渡transition、动画animation学习
变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作
书童小二
2018/09/03
2.9K0
Three.js 的 3D 粒子动画:群星送福
粒子是指原子、分子等组成物体的最小单位。在 2D 中,这种最小单位是像素,在 3D 中,最小单位是顶点。
神说要有光zxg
2022/03/03
4.6K0
Three.js 的 3D 粒子动画:群星送福
过渡与变形的综合运用
效果图: qq_pic_merged_1585209608066.jpg 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡与变形的综合应用</title> <style type="text/css"> body{ background-color: black; } .box1,.box2,.box3,.box4{ width: 250px; height
王凡汎
2020/03/26
4780
程序员必备狂拽炫酷吊炸天的动效神器
安利一波CSS、JS炫酷动效在线下载网站 # bttn.css 专注分享网页按钮的样式库 # Hover-Buttons 一个可以生成代码的网站 # granim.js 基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。 # micron 可生成炫酷CSS3动画的js动画库插件。通过micron.js插件,你可以为页面的任意DOM元素添加12种炫酷CSS3动画效果。并能通过js代码或html5 data属性来串联各种CSS3动
薛定喵君
2019/11/05
2.9K0
Three.js DEM建模与渲染
在这个教程中,我们将学习如何使用three.js渲染土耳其最高的Ağrı山脉的数字高程模型(DEM)数据,使用的工具包括Three.js、geotiff、webpack和QGIS。
用户5687508
2021/07/20
4.7K0
前端骨架屏方案小结骨架屏
最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家.
用户2356368
2019/04/03
1.6K0
前端骨架屏方案小结骨架屏
连肌肉颤动都清晰可见!3D人体模型自动生成算法,一作来自北大图灵班 | SIGGRAPH
要知道,以前的动画需要繁琐的步骤,比如:搭建骨骼、蒙皮、刷权重等等……动画师往往要为此修炼数年,效果还常常不尽人意。
量子位
2021/06/17
1.4K0
图像骨架提取
算法:图像骨架提取是将一个连通区域细化成一个像素的宽度用于特征提取和目标拓扑表示。
裴来凡
2022/05/29
6400
图像骨架提取
点击加载更多

相似问题

Three.js多骨架动画

10

最小three.js骨架动画?

15

加法骨架动画

10

骨架Python动画

134

变形几何- Three.Js

28
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文