WebGl/Three 粒子系统 人物破碎及还原运动

news2025/1/19 23:25:10

粒子

首先,加载模型,这是万千粒子的前身,模型对象由很多面构成,这些面又是由各个点构成的,所以可以将模型的几何体对象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;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

斯坦福发布法律指令数据集LawInstruct,统一17个辖区24种语言

在法律领域&#xff0c;语言模型&#xff08;Language Models, LLMs&#xff09;的发展一直面临着独特的挑战。法律文本的复杂性、专业术语的广泛使用以及对精确性和可靠性的极高要求&#xff0c;使得法律领域的自然语言处理&#xff08;Natural Language Processing, NLP&…

新版周易运势风水测算 宝宝起名改名 公司吉凶测名 八字姻缘爱情算命预测 易经塔罗牌占卜

源码简介&#xff1a; 系统包含八字合婚、流年运势、宝宝起名、塔罗占卜、姓名配对、命中注定、星座运势、八字精批、桃花运姻缘、测终生运、十年大运详批、犯太岁化解、紫薇财运精批、取名改名、算姻缘、婚前合婚、算事业、算财运、姓名详批、塔罗爱情占卜&#xff08;三个月…

Python接口自动化 —— Web接口(2)

1.2.3 HTTP HTTP概念 Hyper Text Transfer Protocal超文本传输协议&#xff0c;基于tcp/ip通信协议来传递数据&#xff0c;属于应用层协议主要特点: 无连接: 每次连接只处理一个请求&#xff0c;服务器处理完请求并受到客户端应答后就断开连接媒体独立。 只要服务器和客…

web项目中jsp页面不识别el表达式

如果使用el表达式出现下图问题 ** 解决办法 ** 这是因为maven创建项目时&#xff0c;web.xml头部声明默认是2.3&#xff0c;这个默认jsp关闭el表达式 修改web.xml文件开头的web-app的版本 <?xml version"1.0" encoding"UTF-8"?> <web-app x…

gpt4.0人工智能网页版

在最新的AI基准测试中&#xff0c;OpenAI几天前刚刚发布的GPT-4-Turbo-2024-04-09版本&#xff0c;大幅超越了Claude3 Opus&#xff0c;重新夺回了全球第一的AI王座。 GPT-4-Turbo-2024-04-09版本是目前国内外最强的大模型&#xff0c;官网需要20美元每月才能使用&#xff0c;…

RUM 最佳实践-视觉稳定性的探索与实践

写在前面的话 在当今数字时代&#xff0c;网页的视觉稳定性对于提供良好的用户体验至关重要。其中一个衡量视觉稳定性的关键指标就是累积布局偏移&#xff08;Cumulative Layout Shift&#xff0c;简称 CLS&#xff09;。CLS 作为 Web Vitals 指标之一&#xff0c;它衡量的是网…

全球半导体排行:台积电登顶,中芯国际第24位

最新发布的《麦克莱恩报告》4月更新揭示了2023年全球前50大半导体供应商的最终排名情况&#xff0c;其中前25强名单尤为引人注目。台积电&#xff08;TSMC&#xff09;凭借强劲的市场表现和业务增长&#xff0c;成功超越其他竞争对手&#xff0c;跃居全球半导体供应商首位。与此…

资料总结分享:《全外显子测序数据的流程和原理》

1外显子与测序&#xff0c;生信流程 1.1 外显子是什么&#xff1f; 外显子是基因组中能够转录组出成熟RNA的部分。一个基因组中所有外显子的集合&#xff0c;即为外显子组。值得注意的是&#xff0c;通常所说的全外显子组测序&#xff0c;是指针对蛋白编码基因的外显子&#x…

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

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

gpt4和chatgpt的区别

模型规模和性能&#xff1a;GPT-4比GPT-3.5更大、更强大。GPT-4拥有更多的参数和更大的训练数据集&#xff0c;因此在各种任务上表现更出色&#xff0c;如语言理解、问题解答和推理能力等。多模态能力&#xff1a;GPT-4支持处理图像等多模态信息&#xff0c;而GPT-3.5主要处理文…

原生实现ajax

1 什么是ajax AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部分网…

雨伞-浅色脚本

渲染参考&#xff1a;明亮/干净/高级 静帧参考 解说 镜头时长 效果参考 中景画面展示3把竖着的浅色的伞 1s / 特写展示伞把手 1s 中景展示雨伞全貌 2s 微观镜头 缝线动画 3s 镜头旋转至伞面微观材质镜头&#xff0c;展现其多层结构 10s 微观镜头 水珠滑动在伞…

18.读取指定目录下的txt文档时,调用另外一个python文件

1.题目 遍历4K_phone和4K_VR目录下的所有txt文件&#xff0c;并将它们的内容合并到一个名为4k_decoding.txt的文件中。 但是&#xff0c;假设你有一个名为another_script.py的Python文件&#xff0c;你想在合并txt文件之前执行它生成要处理的txt文档。 最后统计完原始的txt文件…

python使用uiautomator2操作真机(华为Honor 10)

环境&#xff1a; python3.8.10&#xff0c;华为手机Honor 10(6G,64g)&#xff0c;版本android 9。 之前写过一篇文章&#xff1a; python使用uiautomator2操作真机_python uiautomator2 控制真机-CSDN博客 今天再拿另外一部手机测试。 一、将手机设置为开发者模式 1、设…

编程入门(三)【GPT工具的使用】

读者大大们好呀&#xff01;&#xff01;!☀️☀️☀️ &#x1f525; 欢迎来到我的博客 &#x1f440;期待大大的关注哦❗️❗️❗️ &#x1f680;欢迎收看我的主页文章➡️寻至善的主页 文章目录 前言背景了解GPT工具使用技巧GPT工具在学习和工作中的应用 前言 背景了解 2…

【错题集-编程题】Fibonacci数列(Fib 数列)

题目链接&#xff1a;Fibonacci数列_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 在求斐波那契数列的过程中判断⼀下&#xff1a;何时 n 会在两个 fib 数之间。 二、代码 #include <iostream> using namespace std;int main() {int n;cin >> n;int a 0, b 1, …

离世界模型更近一步!Meta开源OpenEQA,评估AI Agent情景理解能力

Yann LeCun 朝着 “世界模型” 又近了一步。 Meta最新的开源工作OpenEQA&#xff1a;从文字模型到世界模型&#xff0c;可以像人一样记忆、推理的新基准&#xff0c;AI理解物理空间又近了一步。 场景1: 假设你正准备离开家&#xff0c;但找不到你的工牌。 现在&#xff0c;…

【数据结构3-栈和队列】

数据结构3-栈和队列 1 栈-特殊的线性表-先进后出1.1 栈的三个案例 2 队列-与栈相反-先进先出2.1 队列的案例 3 用C实现栈的代码&#xff1a;4 用C实现队列的代码 1 栈-特殊的线性表-先进后出 1.1 栈的三个案例 2 队列-与栈相反-先进先出 2.1 队列的案例 3 用C实现栈的代码&…

MCU最小系统晶振模块设计

单片机的心脏&#xff1a;晶振 晶振模块 单片机有两个心脏&#xff0c;一个是8M的心脏&#xff0c;一个是32.768的心脏 8M的精度较低&#xff0c;所以需要外接一个32.768khz 为什么是8MHZ呢&#xff0c;因为内部自带的 频率越高&#xff0c;精度越高&#xff0c;功耗越大&am…

引导过程与故障修复

一、Linux操作系统引导过程 1、引导过程总览 开机自检 检查硬件设备&#xff0c;检测出第一个能够引导系统的设备&#xff0c;比如硬盘或者光驱 MBR 引导 运行MBR扇区里的主引导程序GRUB 启动GRUB菜单 统读取GRUB配置文件(/boot/grub2/grub.cfg)获取内核的设置和位置&#xf…