TREE.JS点云模拟下雨场景

TREE.JS点云模拟下雨场景

注意：由于新版本的THREE.JS不支持Geomtry（），本篇文章基于r120版本实现。

话不多说，直接进入关键部分代码。
首先创建点云对象，并将雨滴图片作为纹理贴上去。

//创造点云粒子creatPointCloud(1,true,1,THREE.vertexColors,true,0xffffff);function creatPointCloud(size,transparent,opacity,vertexColors,sizeAttenuation,color){let geom=new THREE.Geometry();let imgFileDir="./Source/雨滴.jfif";let texture=THREE.ImageUtils.loadTexture(imgFileDir);let material=new THREE.PointCloudMaterial({size:size,transparent:transparent,opacity:opacity,vertexColors:vertexColors,sizeAttenuation:sizeAttenuation,color:color,map:texture// ,blending:THREE.AdditiveBlending});let range=50;for(let i=0;i<15000;i++){let partical=new THREE.Vector3(Math.random()*s(i)*range,Math.random()*s(i)*range,Math.random()*s(i)*range);//坐标备份partical.xCopy=partical.x;partical.yCopy=partical.y;//定义雨滴下落速度partical.velocityX=0.001;partical.velocityY=(Math.random()/50)+0.01;geom.vertices.push(partical);let color=new THREE.Color(0x00ff00);color.HSL().HSL().HSL().l*Math.random());lors.push(color);}cloud=new THREE.PointCloud(geom,material);scene.add(cloud);}

在这里，为了后续模拟降雨过程，定义了雨滴的下降速度。为了恢复雨滴位置，备份了初始的雨滴坐标。
接下来，实现降雨动画

function rainDown(){ry.vertices.forEach(e=>{if(e.x<=-50||e.x>=50){e.x=e.xCopy;}if(e.y<=-10){e.y=e.yCopy;}e.x-=e.velocityX;e.y-=e.velocityY;})ry.verticesNeedUpdate = true;}

两个判断语句主要是用于确定降雨场景的范围。此处需注意，必须加上最后一句在渲染时才会正确实现降雨效果

 ry.verticesNeedUpdate = true;

最后在动画函数中调用rainDown函数即可实现降雨效果。