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

2024-04-17 23:52

本文主要是介绍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 粒子系统 人物破碎及还原运动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/913214

相关文章

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

Unity3D 运动之Move函数和translate

CharacterController.Move 移动 function Move (motion : Vector3) : CollisionFlags Description描述 A more complex move function taking absolute movement deltas. 一个更加复杂的运动函数,每次都绝对运动。 Attempts to

Three 渲染器(二)

WebGL1Renderer 构造函数 WebGL1Renderer( parameters : Object ) Creates a new WebGL1Renderer. 属性 See the base WebGLRenderer class for common properties. 方法 See the base WebGLRenderer class for common

leetcode#628. Maximum Product of Three Numbers

题目 Given an integer array, find three numbers whose product is maximum and output the maximum product. Example 1: Input: [1,2,3]Output: 6 Example 2: Input: [1,2,3,4]Output: 24 Note: The lengt

运动耳机哪个牌子的质量好?五款口碑绝佳机型安利!

​喜欢户外活动的你,肯定是个有格调的人。想象一下,如果在户外的时候,能戴上一款耳机,不仅跟环境搭,还能让你享受到超棒的音乐,那感觉得多爽!开放式耳机就是为这个目的设计的,它不塞耳朵,戴着更舒服,音质也棒,让你在户外能更好地感受到周围自然的声音。这耳机现在超受欢迎,作为一个既爱户外又爱数码的发烧友,我自己也试过不少款,它们真的给我的户外探险加了不少分。接下来,我会跟大家分享这些耳机的亮点,帮你挑出自

解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘,不能使用手机内置输入法的问题

整整花费了一天时间测试和解决。试验了多个方法,花了不少美刀,最终才发现抖音这个官方文档,哭了: https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capability-adaptation/sc_webgl_keyboa

生命在于运动

程序员和设计师大部分时间都坐在电脑前。有效的锻炼有助于他们更好地工作。 传统的: 当坐在电脑桌前的时候 脚触地。双手在肘部弯曲。打字时手应搁在桌子上。键盘和鼠标应在触手可及的地方。显示屏应在视线水平上,不高不低。光线最好应来自上方。即光线应该从天花板上照下来。每隔20分钟远眺。可降低眼睛长时间盯着近距离物体产生的疲劳。鼠标和手差不多大小。使用全尺寸符合人体工学的键盘。我个人比较喜欢Mi

国内领先线上运动平台:如何借助AI技术实现业务腾飞与用户体验升级

&nbsp;“ 从智能训练到身体分析,再到辅助判决,AI技术正以惊人的速度渗透进体育和健身领域,为运动员和健身爱好者提供了前所未有的个性化体验。 ” AI,运动的智能伴侣 在巴黎奥运会上,AI技术的运用成为了焦点。它不仅为运动员提供了精准的训练指导,还通过对运动员身体状况的实时分析,帮助他们避免潜在的运动伤害,提升竞技状态。 同时,AI在辅助判决上的应用,确保了比赛的公平与

备份还原 本地所有的Docker 镜像并且在另一台机器上还原

备份命令 并且显示进度 backup_docker_images.sh sudo yum install jq chmod +x backup_docker_images.sh sudo ./backup_docker_images.sh #!/bin/bash# 指定备份目录backup_dir="/app/dockerImageBackup/Images"# 创建备份目录,如果不

西游再现!一键部署 Flux 文生图大模型生成西游人物

从花果山的灵石出世,到取经路上的九九八十一难,再到大闹天宫的惊心动魄……这些耳熟能详的西游场景,如今都能通过 Flux 模型,以超乎想象的细节和真实感呈现在你眼前。本次实验在函数计算中内置的 flux.1-dev-fp8 大模型,搭配 Lora 模型, 无需复杂的配置,一键部署,你就能成为这场视觉盛宴的创造者。 诚邀您参与到这场奇妙旅程中来,这不仅是一次技术的探索,更是一场创意的狂欢,在函数计算