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

山楂树の

于 2024-04-16 08:59:44 发布

阅读量776

点赞数 9

CC 4.0 BY-SA版权

分类专栏： Shader WebGL进阶文章标签： webgl 线性代数

本文链接：https://blog.youkuaiyun.com/dabaooooq/article/details/137800295

本文介绍了如何加载模型并使用粒子系统进行动态渲染，包括粒子模型的构建、顶点处理、动画计算（考虑帧率影响），以及粒子的上下运动控制。通过计算delta确保动画平滑，实现粒子从地面下落、还原到初始位置的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

粒子

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