虚拟现实技术及应用three.js实验五粒子系统的实现.pdf

《虚拟现实技术及应用three.js实验五粒子系统的实现.pdf》由会员分享，可在线阅读，更多相关《虚拟现实技术及应用three.js实验五粒子系统的实现.pdf（4页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、大 学 实 验 报 告 2018 年 10 月 22 日 课程名称：虚拟现实技术及应用 实验名称：实验五：粒子系统的实现 班级及学号：姓名：同组人：签名：指导教师：指导教师评定：一、实验目的和要求 1.实验前须复习的课程内容：实验之前要复习：1）延时光照的相关知识。2）光照与材质之间的关系。2.实验预习报告要求：实验预习报告要求有实验目的，实验内容，实验步骤。3.实验要求：1）对预习报告中的知识，完成实验指导书中全部实验要求内容。2）写出实验报告。报告要求：有实验目的，实验内容，实验步骤，实验小结，回答问题。3）通过对粒子系统的实现，理解多种粒子特效如：火焰、烟雾、烟花等的制作思路。二、实验内

2、容和步骤 1.实验内容：1.设计并掌握粒子属性的设置；2.设计并掌握粒子系统创建的基本技术点。2.实验具体步骤：（1）最终效果要求：1.喷泉效果（环形出射、斜向上初速度）2.水柱效果（横向初速度）3.洒水车效果（初始位置设置为线段、xoz 平面上随机方向初速度）（2）具体实现代码：1.喷泉效果 var range=50;for(var i=0;i 60|v.y0)v.x=10;v.y=0;v.velocityX=(Math.random()*3-1.5)/8;v.velocityY=0.1+Math.random();v.velocityZ=(Math.random()*3-1.5)/5;);

3、2.水柱效果 var range=40;for(var i=0;i 2000;i+)var particle=new THREE.Vector3(20+3*Math.random(),/设置水滴 x 的出生点 0,0);particle.velocityY=0.0;/设置 y 初速度为 0 particle.velocityX=0.5;/设置 x 方向初速度 0.5 geom.vertices.push(particle);cloud=new THREE.ParticleSystem(geom,material);cloud.sortParticles=true;scene.add(cloud

4、);function render()/在此设置重力加速度 stats.update();var vertices=cloud.geometry.vertices;vertices.forEach(function(v)v.velocityY+=0.02;/使 y 方向速度逐渐增加 v.y=v.y-(v.velocityY);v.x=v.x-(v.velocityX);if(v.y=0)/若超出范围，则设置水滴从原位置重新开始 v.y=20+3*Math.random();v.x=0;v.velocityY=0.0;v.velocityX=0.5;);3.洒水车效果 var range=40;

5、for(var i=0;i 5000;i+)var particle=new THREE.Vector3(20+10*Math.random(),0,0);particle.velocityY=1.8*(Math.random()-0.5);particle.velocityX=0.5;geom.vertices.push(particle);cloud=new THREE.ParticleSystem(geom,material);cloud.sortParticles=true;scene.add(cloud);function render()/在此设置重力加速度 stats.updat

6、e();var vertices=cloud.geometry.vertices;vertices.forEach(function(v)v.velocityY+=0.02;v.y=v.y-(v.velocityY);v.x=v.x-(v.velocityX);if(v.y=0)v.y=20+10*Math.random();v.x=0;v.velocityY=1.8*(Math.random()-0.5);v.velocityX=0.5;);（3）实验效果图：实验效果图见另一张纸上！三、实验小结 1.制作喷泉效果时，刚开始水始终只能出现一次就没出现了，后来发现是render()函数里的if 条件考虑不到位。完善 if 条件后，终于可以重复出现水。2.水柱和洒水车的制作非常相似。在水柱实验中，水的 y 方向上速度为 0，x 方向上一个固定速度，给水一个重力加速度即可出现水柱的效果。而在洒水车的实验中，只需更改 y 的速度不为 0，并相应增大 y 方向上的速度即可出现“洒水车”的效果。3.本次实验关键理解粒子的绘制及懂得粒子如何出现的设置，调整好相应的参数大小，随机函数Math.random()的应用在这里也至关重要。截图效果如下所示：喷泉 水柱 洒水车