WebGl/Three 粒子系统 人物破碎及还原运动
粒子
首先,加载模型,这是万千粒子的前身,模型对象由很多面构成,这些面又是由各个点构成的,所以可以将模型的几何体对象geometry赋给粒子对象,粒子物体用Points方式渲染
bloader.load("obj/female02/Female02_bin.js", function (geometry) {// createMesh创建点对象createMesh(geometry, scene, 4.05, -1000, -350, 0, 0xffdd44, true);});
封装每个粒子模型的数据,结构有 Mesh、顶点数据、缓存顶点、顶点数量、到达地面和原始的顶点数量、速度、运动方向、是否运动以及何时运动等
meshes.push({mesh: mesh,vertices: geometry.vertices,vertices_tmp: vertices_tmp, // 缓存vl: vl, // 物体的顶点数量down: 0, // 顶点 到达地面的个数up: 0, // 顶点 到达原来位置的个数direction: 0, // 运动方向speed: 50, // 速度delay: Math.floor(200 + 200 * Math.random()), // 速度线性值started: false, // 是否在运动start: Math.floor(100 + 200 * Math.random()), // 100 ,300 物体在原始 或 地面 的停留时间dynamic: dynamic // 是否可以运动});
开始动画
注意一点,需要计算两帧之间经过的时间。这段时间delta对于确保流畅和一致的运动至关重要,无论程序运行的系统性能如何。基本上,它有助于使动画和运动独立于帧速率,从而确保在不同设备上显示平滑。也就是要根据帧率不同对运动速度进行线性变换,而不是每帧进来无差异帧运动,比如正常1s运行40帧,1帧运动1m,当性能瓶颈时,1s运行了20帧,同样1帧运动1m时,动画就会较之前慢,突变的感觉会很不自然
function render() {// 计算每一帧的时间delta = clock.getDelta();delta = delta < 2 ? delta : 2; // 执行速率parent.rotation.y += -0.02 * delta;......}
向下运动,循环点模型的每个点,对顶点y分量受控于速度和帧率递减,x和z分量左右和前后自然运动
一个粒子y值降为了0,即到达地面,记录一个顶点完成了向下运动的个数+1
for (var j = 0; j < meshes.length; j++) {data = meshes[j];mesh = data.mesh;vertices = data.vertices;vertices_tmp = data.vertices_tmp;vl = data.vl;// 最开始的时候,没有移动,设置移动,向下if (data.start > 0) {data.start -= 1;} else {// 开始动画if (!data.started) {data.direction = -1;data.started = true;}}for (i = 0; i < vl; i++) {p = vertices[i];vt = vertices_tmp[i]; // 缓存的顶点:x y z down upif (data.direction < 0) {if (p.y > 0) { // 降到0截止p.x += 1.5 * (0.50 - Math.random()) * data.speed * delta;// 向下的概念明显大于向上的概率,所以整个人物总有一个时刻是向下的。p.y += 3.0 * (0.05 - Math.random()) * data.speed * delta;p.z += 1.5 * (0.50 - Math.random()) * data.speed * delta;} else {if (!vt[3]) { // down为 0 表示向下vt[3] = 1;data.down += 1; // 记录一下顶点到达地面的个数}}};}}
直到到达地面的数量等于顶点的数量,停止向下运动状态, 改粒子状态为向上还原运动
if (data.down === vl) { // 下降 顶点运动到地面的数量 == 顶点总数 停止向下的状态if (data.delay === 0) {data.direction = 1; // 下次向上运动data.speed = 10;data.down = 0;data.delay = 300;for (i = 0; i < vl; i++) {vertices_tmp[i][3] = 0; // 缓存的 down归0}} else {data.delay -= 1;}}
向上还原运动,将地面的每个粒子还原到初始的位置,需要每帧计算点坐标与其原始坐标的距离,这里误差算到1以内,也就是两者距离小于1时,默认当前粒子还原到了初始位置,记录完成运动的粒子数。
计算距离的方法 开根号 (newX - oldX)^2 + (newY - oldY) ^2 + (newZ - oldZ)^2
if (data.direction > 0) {// 每帧计算顶点 当前坐标与原始坐标的距离d = Math.abs(p.x - vt[0]) + Math.abs(p.y - vt[1]) + Math.abs(p.z - vt[2]);if (d > 1) { // 线性递减p.x += -(p.x - vt[0]) / d * data.speed * delta * (0.85 - Math.random());p.y += -(p.y - vt[1]) / d * data.speed * delta * (1.5 + Math.random());p.z += -(p.z - vt[2]) / d * data.speed * delta * (0.85 - Math.random());} else { // 小于1 认为运动到了原始位置if (!vt[4]) {vt[4] = 1;data.up += 1;}}}
一个粒子对象完成还原运动,再次改为下降,往复循环
if (data.up === vl) { // 上升 顶点运动到原来位置的数量 == 顶点总数 停止向上的状态if (data.delay === 0) {data.direction = -1; // 下次向下运动data.speed = 10;data.up = 0;data.delay = 300;for (i = 0; i < vl; i++) {vertices_tmp[i][4] = 0;}} else {data.delay -= 1;}}
注意,每次改变geometry的顶点坐标信息,需要指明强制更新,否则GPU执行的还是旧的顶点坐标
mesh.geometry.verticesNeedUpdate = true;
相关文章:
WebGl/Three 粒子系统 人物破碎及还原运动
粒子 首先,加载模型,这是万千粒子的前身,模型对象由很多面构成,这些面又是由各个点构成的,所以可以将模型的几何体对象geometry赋给粒子对象,粒子物体用Points方式渲染 bloader.load("obj/female02/Fe…...
华为OD-C卷-分披萨[100分]
题目描述 "吃货"和"馋嘴"两人到披萨店点了一份铁盘(圆形)披萨,并嘱咐店员将披萨按放射状切成大小相同的偶数个小块。但是粗心的服务员将披萨切成了每块大小都完全不同奇数块,且肉眼能分辨出大小。 由于两人都想吃到最多的披萨,他们商量了一个他们认…...
uniapp 中video标签视频禁止快,拖拽快进
废话不多说,直接上代码 <video id"myVideo" :src"sectionInfo.type_config.video_url" timeupdate"bindtimeupdate"></video> <script>export default {data() {return {historyTime: 0,}},methods:{// 监听播放进…...
网页端HTML使用MQTTJs订阅RabbitMQ数据
最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中,在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。 需求:做一个统一日志系统可以查看日志列表和一个可…...
课题学习(二十一)----姿态更新的四元数算法推导
声明:本人水平有限,博客可能存在部分错误的地方,请广大读者谅解并向本人反馈错误。 最近需要使用AEKF对姿态进行结算,所以又对四元数进了深入的学习,本篇博客仅对四元数进行推导,后续会对基于四元数的…...
NL2SQL进阶系列(5):论文解读业界前沿方案(DIN-SQL、C3-SQL、DAIL-SQL、SQL-PaLM)、新一代数据集BIRD-SQL解读
NL2SQL进阶系列(5):论文解读业界前沿方案(DIN-SQL、C3-SQL、DAIL-SQL)、新一代数据集BIRD-SQL解读 NL2SQL基础系列(1):业界顶尖排行榜、权威测评数据集及LLM大模型(Spider vs BIRD)全面对比优劣分析[Text2…...
双指针运用:删除重复元素、移除元素
26.删除重复元素 题目描述 给你一个 非严格递增排列 的数组 nums ,请你 原地 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元…...
什么是三高架构
三高架构是指在软件系统设计与开发中,注重解决高并发性、高可用性和高性能的架构设计模式。 高并发性:指系统能够处理大量并发请求的能力。在高并发场景下,系统需要具备有效的并发处理机制,以保证系统能够快速、准确地响应大量并…...
Unity 对APK签名
关键代码 PS D:\UnityProject\YueJie> jarsigner -verbose -keystore D:\UnityProject\YueJie\user.keystore -signedjar D:\UnityProject\YueJie\meizuemptyapk-release-signed.apk D:\UnityProject\YueJie\MeizuEmpty-release-unsigned.apk 1 示例 # jarsigner的命令格…...
合成孔径雷达干涉测量InSAR数据处理、地形三维重建、形变信息提取、监测等应用
合成孔径雷达干涉测量(Interferometric Synthetic Aperture Radar, InSAR)技术作为一种新兴的主动式微波遥感技术,凭借其可以穿过大气层,全天时、全天候获取监测目标的形变信息等特性,已在地表形变监测、DEM生成、滑坡…...
QT进阶------------------QPushButton(快速添加按钮与使用)
1、解决如何快速的添加按钮 在qt中,通常我们喜欢一个按钮添加一个信号与槽,但是这样写太过浪费时间。要是多个按钮那不是要写30个信号与槽,说实话,我不太喜欢这样。 在ui中,只要拖动按钮,会自动生成按钮的名…...
Vue项目管理器创建项目
黑马程序员JavaWeb开发教程 文章目录 1、创建新项目2、详情3、预设4、功能5、配置6、是否保存为预设模板7、正在创建项目8、创建完成 1、创建新项目 2、详情 3、预设 选择手动,点击下一步 4、功能 只需要额外选择一项–Router 即可,其余的保持默认&a…...
PHP-extract变量覆盖
[题目信息]: 题目名称题目难度PHP-extract变量覆盖1 [题目考点]: 变量覆盖指的是用我们自定义的参数值替换程序原有的变量值,一般变量覆盖漏洞需要结合程序的其它功能来实现完整的攻击。 经常导致变量覆盖漏洞场景有:$$&#x…...
研究表明,全球互联网流量竟有一半来自机器人
据Cyber News消息,Thales Imperva Bad Bot近期做了一份报告,显示在2023年有49.6%的互联网流量竟来自机器人,比上一年增长 2%,达到自2013年以来观察到的最高水平。 报告称,这一趋势正对企业组织产生负面影响,…...
橡胶衬板的更换与安装
橡胶衬板的更换与安装 橡胶衬板作为一种重要的工业材料,广泛应用于各种设备和机器中,以提供减震、防滑、耐磨等功能。然而,随着时间的推移和使用频率的增加,橡胶衬板可能会磨损或老化,需要及时更换和安装。本文将介绍…...
Compose 简单组件
文章目录 Compose 简单组件TextText属性使用AnnotatedStringSpanStyleParagraphStyle SelectionContainer 和 DisableSelectionClickableText TextFieldTextField属性使用OutlinedTextFieldBasicTextFieldKeyboardOptions 键盘属性KeyboardActions IME动作 ButtonButton属性使用…...
第十一届蓝桥杯省赛真题(C/C++大学B组)
目录 试题A :门牌制作 试题B :既约分数 试题C :蛇形填数 试题D :跑步训练 试题E :七段码 试题F :成绩统计 试题G :回文日期 试题H :字串分值 试题I :平面切分&a…...
Qt 实战(2)搭建开发环境 | 2.1、Windows下安装QT
一、Windows下安装QT 1、QT官网 QT官网:https://download.qt.io/,打开官网地址,如下: 目录结构介绍 目录说明snapshots预览版,最新的开发测试中的 Qt 库和开发工具onlineQt 在线安装源official_releases正式发布版&am…...
校园通用型发生网络安全事件解决方案
已知校园多教学楼、多教学机房、非标网络机房缺乏防护设备、检测设备、安全保护软件(杀软) 切断所有外网,断网理!!!!!!!!!!!…...
数通HCIE考试分享:考前心态很重要,心情放松好过一次练习
誉天数通HCIE晚班火热预约中!真机实验考前辅导备考资料,名师保驾护航,助你稳定通关!识别二维码,即可获取免费试听名额! 备考阶段 我是去年10月底完成了笔试考试,在笔试之前就将PY的课程过了一遍…...
GVRP协议与动态、静态vlan
一、GVRP协议使用场景 1、当实际组网复杂到网络管理员无法短时间内了解网络的拓扑结构,或者是整个网络的VLAN太多时,工作量会非常大,而且非常容易配置错误。在这种情况下,用户可以通过GVRP的VLAN自动注册功能完成VLAN的配置。 2、…...
shell脚本启动jar包
1、启动脚本的命令start.sh # 设置jar包名称 JAR_NAME"ruoyi-admin.jar" # 使用pgrep查找jar包名称的进程,如果存在,返回0(表示找到了进程) if pgrep -f "$JAR_NAME" >/dev/null thenecho "Jar进程已…...
qt 元对象系统及属性系统
Qt元对象系统(QMetaObject) Qt 的元对象系统叫 Meta-Object-System,提供了对象之间通信的信号与槽机制、运行时类型信息和动态属性系统。即使编译器不支持RTTI(RTTI的实现耗费了很大的时间和存储空间,这就会降低程序的性能)&…...
2024年MathorCup数学建模A题移动通信网络中PCI规划问题解题文档与程序
2024年第十四届MathorCup高校数学建模挑战赛 A题 移动通信网络中PCI规划问题 原题再现: 物理小区识别码(PCI)规划是移动通信网络中下行链路层上,对各覆盖小区编号进行合理配置,以避免 PCI 冲突、PCI 混淆以及 PCI 模3 千扰等现象。PCI 规划…...
Learn something about front end——颜色
好装的标题啊哈哈哈哈哈哈 最近get了一个学习前端的网站叫FreeCodeCamp 原色:rgb三个值的其中一个值拉满,比如说rgb(255,0,0)是红色这样,三个主色: 红色 rgb(255, 0, 0) #FF0000绿色 rgb(0, 255, 0) #00FF00蓝色 rgb(0, 0, …...
各大厂都推出鸿蒙APP了,你就一定要学习一下鸿蒙APP测试了!
2023年8月,华为推出鸿蒙4.0,由于其广泛的用户基础和品牌传播力,在短短几个月的时间,使用鸿蒙4.0系统的设备就达到千万级别,并且在9月份发售Mate 6之后,还在装机量的增长更加迅猛。 基于此,11月…...
ppt里的音乐哪里来的?
心血来潮,想照着大神的模板套一个类似于快闪的ppt。 ppt里是有一段音乐的,那段音乐就是从幻灯片第二页开始响起的。 但是我就找不到音乐在哪。 甚至我把ppt里的所有素材都删除了,再看动画窗格,仍然是空无一物,显然&…...
【算法】标签算法及其运作流程
标签算法 1. 标签算法及其运作流程2. 标签算法主要有哪些?3.用python语言举例实现聚类 1. 标签算法及其运作流程 标签算法是一种用于自动为数据或文本内容添加标签或分类的算法。这些标签可以帮助组织、检索和理解数据,是信息管理和数据挖掘中的重要工具…...
【数据结构】习题之链表的回文结构和相交链表
👑个人主页:啊Q闻 🎇收录专栏:《数据结构》 🎉前路漫漫亦灿灿 前言 今日的习题是关于链表的,分别是链表的回文结构和相交链表的判断。 链表的回文结构 题目为:链表的回文结…...
5个常见的前端手写功能:New、call apply bind、防抖和节流、instanceof、ajax
实现New 首先创建一个新的空对象设置原型,将对象的原型设置为函数的prototype对象让函数的this指向这个对象,执行构造函数的代码判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类…...
鸡泽网站建设案例/网站流量统计系统
对于Oracle数据库操作主要使用的是命令行方式,而所有的命令都使用sqlplus完成,对于sqlplus有两种形式。 一种是dos风格的sqlplus:sqlplus.exe;另一种是windows风格的sqlplus:sqlplusw.exe;在Oracle 10g之中主要使用的是sqlplusw命…...
wordpress 分类文章数/网站seo外链
shared_ptr1.内存结构2.与make_shared<>内存结构区别3.使用make_shared的理由4.共享智能指针带来的问题解决方法4.原子操作保证线程安全1.内存结构 2.与make_shared<>内存结构区别 3.使用make_shared的理由 1.减少堆区构建对象的次数 2.提高命中率,使对…...
免费网站程序/域名查询ip爱站网
面向对象的三大特征:1. 封装:属性和方法放到类内部,通过对象访问属性或者方法,隐藏功能的实现细节.当然还可以设置访问权限;2. 继承:子类需要复用父类里面的属性或者方法,当然子类还可以提供自己的属性和方法;3. 多态:同一个方法不…...
李光辉:营销型企业网站建设的指导思想是什么?/东莞谷歌推广公司
1. animate.css animate.css 2. Velocity.js Velocity 3. flip flip-your-animations 4. tweenjs tween.js demo https://jsfiddle.net/user/chrisvfritz/fiddles/ 转载于:https://www.cnblogs.com/lmh2072005/p/6155090.html...
景区网站建设要求/什么是外链
读强一致性支持(待实现)环境准备架构:主:192.168.1.222 从:192.168.1.223 cetus:192.168.1.221数据库对cetus用户授权CREATE database if not exists testdb;create user ‘cetus_app‘‘192.168.1.221‘ identified by ‘cetus12…...
网站建设一般好久到期/seo网站优化培训要多少钱
本教程用途:有IPV4公网IP的企业需要把内网网站,CRM,ERP等服务器能在公网访问。那么什么是端口映射(Port-Forwarding),那么就是要了解一下NAT和NAPT。NAT是网络地址转换。NAPT是网络地址端口转换。NAT是用于…...