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;

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

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

相关文章

PyTorch深度学习入门-2

PyTorch深度学习快速入门教程&#xff08;绝对通俗易懂&#xff01;&#xff09;【小土堆】_哔哩哔哩_bilibili 一、神经网络的基本骨架 --nn.Module Neutral network torch.nn — PyTorch 2.2 documentation * import torch from torch import nnclass xiaofan(nn.Module):…

GAN:对抗生成网络【通俗易懂】

一、概述 对抗生成网络&#xff08;GAN&#xff09;是一种深度学习模型&#xff0c;由两个神经网络组成&#xff1a;生成器G和判别器D。这两个网络被训练来协同工作&#xff0c;以生成接近真实数据的新样本。 生成器的任务是接收一个随机噪声向量&#xff0c;并将其转换为与真…

如何入行产品经理?

转产品经理第一点要先学基础理论知识&#xff0c;学了理论再去实践&#xff0c;转行&#xff0c;跳槽&#xff01; 学理论比较好的就是去报NPDP的系统班&#xff0c;考后也会有面试指导课&#xff0c;跟职场晋升课程&#xff0c;对小白来说非常合适了~&#xff08;可以去哔站找…

氟化氢冷凝回流反应瓶耐高温聚四氟烧瓶可灵活加工PTFE反应釜

四氟烧瓶又叫反应瓶、PTFE反应釜&#xff0c;常用于有HF或者冷凝回流反应等实验中&#xff0c;可作为接收瓶使用&#xff0c;可放入水浴器或油浴器里进行加热&#xff0c;平底稳定性好。相对于圆底烧瓶可直接放置&#xff0c;不需要铁架台等固定。 1.外观纯白不透明&#xff1b…

Jenkins打包app并通过openssh上传到服务器

1、下载安装openssh 网上很多教程&#xff0c;包括开端口的&#xff0c;可以搜下 2、配置openssh根目录 进入C:\ProgramData\ssh打开文件sshd_config&#xff0c;添加配置ChrootDirectory D:\wxs\soft&#xff0c;想改端口的也在这个文件 3、安装Jenkins 参考上一篇 4、新…

UE5 C++ 射线检测

一.声明四个变量 FVector StartLocation;FVector ForwardVector;FVector EndLocation;FHitResult HitResult;二.起点从摄像机&#xff0c;重点为摄像机前9999m。射线检测 使用LineTraceSingleByChannel 射线直线通道检测&#xff0c;所以 void AMyCharacter::Tick(float Delt…

18-Echarts 配置系列之:数据集 dataset

简介&#xff1a; 数据集&#xff08;dataset&#xff09;是专门用来管理数据的组件。简化在每一个系列中设置数据&#xff0c;这一个配置是在Echarts4 中开始支持。 通过数据集配置&#xff0c;避免为每一个系列创建一个数据&#xff0c;避免格式转化的痛苦。 简单举例&…

HarmonyOS开发实例:【分布式数据管理】

介绍 本示例展示了在eTS中分布式数据管理的使用&#xff0c;包括KVManager对象实例的创建和KVStore数据流转的使用。 通过设备管理接口[ohos.distributedDeviceManager]&#xff0c;实现设备之间的kvStore对象的数据传输交互&#xff0c;该对象拥有以下能力 ; 1、注册和解除注…

其它IO合集

其它IO合集 1. 缓冲流1.1 概述1.2 字节缓冲流构造方法效率测试 1.3 字符缓冲流构造方法特有方法 2. 转换流2.1 字符编码和字符集字符编码字符集 2.2 编码引出的问题2.3 InputStreamReader类构造方法指定编码读取 2.4 OutputStreamWriter类构造方法指定编码写出转换流理解图解 3…

Ubuntu 22.04 安装 zabbix

Ubuntu 22.04 安装 zabbix 1&#xff0c;Install Zabbix repository2&#xff0c;安装Zabbix server&#xff0c;Web前端&#xff0c;agent3&#xff0c;安装mysql数据库3.1 创建初始数据库3.2 导入初始架构和数据&#xff0c;系统将提示您输入新创建的密码。3.3 在导入数据库架…

Learn something about front end——颜色

​ 好装的标题啊哈哈哈哈哈哈 最近get了一个学习前端的网站叫FreeCodeCamp 原色&#xff1a;rgb三个值的其中一个值拉满&#xff0c;比如说rgb(255,0,0)是红色这样&#xff0c;三个主色&#xff1a; 红色 rgb(255, 0, 0) #FF0000绿色 rgb(0, 255, 0) #00FF00蓝色 rgb(0, 0, …

1688官方API商品数据采集接口|阿里巴巴中国站获得1688商品详情 API 返回值说明

随着全球经济一体化和电子商务的快速发展&#xff0c;网络购物的需求日益增加。不断涌现的电商企业使得行业的竞争情况愈演愈烈。在这种情况下&#xff0c;企业不仅要加大经营力度&#xff0c;还要在自己的基础设施和技术上持续投入&#xff0c;才能更好的适应市场和消费习惯。…

飞桨Ai(一)基于训练后的模型进行信息提取

基准 本博客基于如下视频&#xff1a; 发票抬头信息抽取之环境搭建 - 基于飞浆开源项目发票抬头信息抽取之数据标准模型训练 - 基于飞浆开源项目 步骤 1、准备工作 下载python&#xff1a;【Python】Windows&#xff1a;Python 3.9.2 下载和安装&#xff08;建议3.9&#…

数通HCIE考试分享:考前心态很重要,心情放松好过一次练习

誉天数通HCIE晚班火热预约中&#xff01;真机实验考前辅导备考资料&#xff0c;名师保驾护航&#xff0c;助你稳定通关&#xff01;识别二维码&#xff0c;即可获取免费试听名额&#xff01; 备考阶段 我是去年10月底完成了笔试考试&#xff0c;在笔试之前就将PY的课程过了一遍…

力扣算法-回溯

递归 104.二叉树的最大深度 回溯 17.电话号码的字母组合 ①子集型回溯 78.子集 (1)选不选 (2)选哪个 131.分割回文串 &#xff08;1593.拆分字符串使唯一子字符串的数目最大 也可以用这个思路解&#xff1a;从结果角度&#xff0c;分割字符串&#xff09; ②组合型回溯…

[leetcode] 55. 跳跃游戏

文章目录 题目描述解题方法模拟java代码复杂度分析 相似题目 题目描述 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 tr…

杀死那个名为360安全的软件

背景 2023年底&#xff0c;闲来没事想起了xjun师傅2021年发的procexp驱动利用帖子时在群里讨论的&#xff0c;通过procexp驱动突破PPL后注入到csrss进程中&#xff0c;再通过csrss来结束那些个安全防护软件。于是在当时就有了如下成果&#xff1a; 这些弄完之后&#xff0c;觉…

冯诺依曼与进程【Linux】

文章目录 冯诺依曼体系结构&#xff08;从硬件的角度描述&#xff09;冯诺依曼体系结构&#xff08;从软件的角度描述&#xff09;操作系统&#xff08;软件&#xff09;理解管理系统调用和库函数进程查看进程的两种方式 通过系统调用获取进程的PID和PPID通过系统调用创建进程-…

C++ Primer是每位C++ coder心中的圣经吗?

首先&#xff0c;C Primer的作者是Stanley B. Lippman、Jos Lajoie和Barbara E. Moo。Stanley B. Lippman是C领域的知名专家&#xff0c;他在C标准委员会中担任过要职&#xff0c;对C语言的发展有深刻的理解。Jos Lajoie和Barbara E. Moo也都是C领域的资深专家&#xff0c;他们…

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现WOA-BP鲸鱼算法优化BP神经网络多变量回归预测&#xff08;完整源码…