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 up

					if (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;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

多线程同步:使用 std::mutex 和 std::unique_lock 保护共享资源

在当今的软件开发中&#xff0c;多线程编程是一项至关重要的技术&#xff0c;它允许程序同时执行多个任务&#xff0c;从而提高应用程序的效率和响应速度。然而&#xff0c;多线程环境也带来了数据安全和一致性的挑战。在多个线程需要访问和修改同一数据资源的情况下&#xff0…

STM32学习和实践笔记(14):按键控制实验

消除抖动有软件和硬件两种方法 软件方法就是在首次检测到低电平时加延时&#xff0c;通常延时5-10ms&#xff0c;让抖动先过去&#xff0c;然后再来检测是否仍为低电平&#xff0c;如果仍然是&#xff0c;说明确实按下。 硬件方法就是加RC滤波电路&#xff0c;硬件方法会增加…

亚马逊---设计弹性架构

一个好的架构师可以做到以下几点&#xff1a; 根据需求设计事件驱动型架构、微服务架构和/或多层架构 确定架构设计中使用的组件的扩展策略 根据要求确定实现松耦合所需的AWS服务 确定何时使用容器 确定何时使用无服务器技术和模式 根据要求推荐合适的计算、存储、联网和数据库…

HarmonyOS NEXT 网格元素交换案例

网格元素交换案例 介绍 直接进行交换和删除元素会给用户带来不好的体验效果&#xff0c;因此需要在此过程中注入一些特色的动画来提升体验效果&#xff0c;本案例通过Grid组件、attributeModifier、以 及animateTo函数实现了拖拽动画和删除动画。 效果图预览 使用说明&#…

【网络】Burpsuite学习笔记

文章目录 1.介绍1.1 正常客户端与服务端通信&BurpSuite代理后1.2 下载激活参考地址1.3 代理设置1.4 Proxy SwitchyOmega 使用1.4.1 新建情景模式1.4.2 设置代理1.4.2 应用选项 1.5 FoxyProxy 使用1.6 安装证书1.6.1 方式一1.6.2 方式二1.6.3 浏览器安装证书1.6.4 或者直接双…

基于改进遗传算法的配电网故障定位(matlab代码)

1 主要内容 该程序复现文章《基于改进遗传算法的配电网故障定位》&#xff0c;将改进的遗传算法应用于配电网故障定位中, 并引入分级处理思想, 利用配电网呈辐射状的特点, 首先把整个配电网划分为主干支路和若干独立区域, 再利用该算法分别对各独立区域进行故障定位, 然后进行…

独立开源版:零点城市社交电商v2.1.2.4

源码介绍 独立版&#xff1a;零点城市社交电商v2.1.2.4 新增首页新增多弹窗 注意&#xff1a;如果没有此完整程序勿下载 全开源解密版代码&#xff0c;后端完全开源&#xff0c;前端是VUE前端&#xff0c;可自行二开自己想要的功能。 独立版零点城市社交电商 小程序致力于…

tcp bbr pacing 的对与错

前面提到 pacing 替代 burst 是大势所趋&#xff0c;核心原因就是摩尔定律逐渐失效&#xff0c;主机带宽追平交换带宽&#xff0c;交换机不再能轻易吸收掉主机突发&#xff0c;且随着视频类流量激增&#xff0c;又不能以大 buffer 做带宽后备。因此&#xff0c;主机必须 pacing…

CentOS的简单介绍及常用命令

1、CentOS 的简单介绍&#xff1a; CentOS是Community Enterprise Operating System的缩写&#xff0c;也叫做社区企业操作系统。是企业Linux发行版领头羊Red Hat Enterprise Linux&#xff08;以下称之为RHEL&#xff09;的再编译版本&#xff08;是一个再发行版本&#xff09…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第五套

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第五套 (共9套&#xff0c;有答案和解析&#xff0c;答案非官方&#xff0c;仅供参考&#xff09;&#xff08;共九套&#xff0c;每套四十个选择题&#xff09; 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadida…

gazebo中vins-fusion在仿真小车上的部署

软件要求&#xff1a;Ubuntu 20.04 ros的noetic版本&#xff0c;我是在虚拟机vitrualbox上运行的 这几天在学ROS&#xff0c;跟着赵虚左老师过了一遍之后&#xff0c;感觉还是有很多不懂的地方&#xff0c;xtdrone上仿真跟着文档走了一遍&#xff0c;好像没学到什么东西&#…

【华为笔试题汇总】2024-04-17-华为春招笔试题-三语言题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f…

【计算机考研】考408,还是不考408,性价比高❓

最近刷了很多帖子都偏向408太难了不要报考 但我的看法是408是计算机的考研趋势&#xff0c;并且择校的选择更多&#xff0c;408只是科目更广泛&#xff0c;与自命题相比其实各有各的难度 如果觉得自己数学基础不太好&#xff0c;时间不太够的同学可以了解一下自命题&#xff…

nodejs模块机制

模块机制 CommonJs规范 模块引用 上下文提供require()方法来引人外部模块var math require(math) 模块定义 exports 对象用于到处当前模块中的方法和变量module代表模块自身 exports.add function() {...}在另一个模块中使用require()方法进行导入。就可以使用 区别和联系 …

电力系统卫星授时信号安全隔离装置防护方案

电力系统是国家关键基础设施&#xff0c; 电力安全关系国计民生&#xff0c; 是国家安全的重要保障&#xff0c; 与政治安全、经济安全、 网络安全、社会安全等诸多领域密切关联。电网运行情况瞬息万变&#xff0c;为了在其发生事故时能够及时得到处理&#xff0c;需要统一的时…

Redis中的事务(二)

事务 一个完整的WATCH事务执行过程 假设当前服务端为c10086&#xff0c;而数据库watched_keys字典的当前状态如图所示&#xff0c;那么当c10086执行以下WATCH命令之后 c10086> WATCH "name" OKwatched_keys字典将更新如图所示的状态。接下来客户端c10086继续向…

[2021最新]Java时间戳和日期时间互转换

代码&#xff1a; import java.text.ParseException; import java.text.SimpleDateFormat;public class MainProcess {public static void main(String[] args) throws ParseException {// 1.set formatSimpleDateFormat timeSmat new SimpleDateFormat("yyyy-MM-dd HH:…

Kubernetes中安装部署ActiveMQ集群(手把手式记录)

目录 1、创建命名空间 nacos-cluster 2、配置文件准备 2.1 activemq0.xml 2.2 activemq1.xml 2.3 activemq2.xml 3、创建configMap cm-activemq 4、创建activemq-cluster.yaml 5、执行命令部署 6、部署成功&#xff0c;查看结果 这里以3个borker的集群为例&#xff0…

Facade 外观

意图 为子系统中的一组接口提供一个一致的界面&#xff0c;Facade模式定义了一个高层接口&#xff0c;这个接口使得这一字系统更加容易使用。 结构 其中&#xff1a; Facade知道哪些子系统负责处理请求&#xff1b;将客户的请求代理给适当的子系统对象。 Subsystem classes…

QGIS插件Geo-SAM使用(基于SAM半自动标注遥感图像)

0.Geo-SAM介绍 Geo-SAM是一个QGIS插件&#xff0c;旨在帮助人们在使用大尺寸地理空间栅格图像时有效地分割、描绘或标记地貌。Segment Anything Model &#xff08;SAM&#xff09; 是一个具有超能力的基础 AI 模型&#xff0c;但模型大小巨大&#xff0c;即使使用现代 GPU&am…