红包打赏的网站怎么做,为什么公司要做网站,贵港市建设局网站,网页设计与制作背景图片粒子 首先#xff0c;加载模型#xff0c;这是万千粒子的前身#xff0c;模型对象由很多面构成#xff0c;这些面又是由各个点构成的#xff0c;所以可以将模型的几何体对象geometry赋给粒子对象#xff0c;粒子物体用Points方式渲染 bloader.load(obj/female02/Fe… 粒子 首先加载模型这是万千粒子的前身模型对象由很多面构成这些面又是由各个点构成的所以可以将模型的几何体对象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;
