雨雪粒子特效（完整可用）

最新推荐文章于 2024-05-23 16:02:52 发布
最新推荐文章于 2024-05-23 16:02:52 发布
阅读量475 收藏 1
点赞数
分类专栏： WEBGL 文章标签： html5 node.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HR_Reborn/article/details/120012486
版权
该博客介绍了一个使用Three.js库实现实时三维雨雪效果的示例。通过加载纹理、创建粒子系统和调整参数，用户可以通过GUI控制雨滴和雪花的大小、速度、方向和透明度，实现交互式的雨雪动画。代码中包含了初始化渲染、相机、场景、光照、模型、性能监控、控制器以及GUI设置等关键部分。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        html, body{
            margin: 0;
            height: 100%;
        }

        canvas{
            display: block;
        }
    </style>
</head>
<body onload="draw();">
</body>
<script src="../build/extension/weather.js"></script>
<script src="../build/three.js"></script>
<script src="../build/three.extension.js"></script>
<script src="../build/extension/TerrainControls.js"></script>
<script src="../node_modules/three/examples/js/Detector.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../THREE.MeshLine/demo/js/dat.gui.min.js"></script>
<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script>
    var renderer;
    var rainSpeed ;  //雨下的速度
    var rainQuaX;    //雨滴X方向
    var rainQuaZ;    //雨滴Z方向
    var rainRange;   //雨滴范围
    var snowSpeed;   //雪花速度
    var snowQuaX; //雪花方向X
    var snowQuaZ; //雪花方向Z
    var snowRange; //雪花范围
    var camPosVec = new THREE.Vector3();

    var enableView = 0;  //场景设置模式，默认0为自由观察下雨下雪场景，1为固定一小块在摄像头前
    function initRender(){
        //this.render = function ( scene, camera, renderTarget, forceClear )
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setClearColor(new THREE.Color(0x000000));
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    }

    var camera;
    function initCamera() {   //初始化相机
        camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,200);
        camera.position.set(0,20,120);
        camPosVec.set(0,0,0);
        camera.lookAt(new THREE.Vector3(0,30,0));
    }

    var scene;
    function initScene() {  //初始化场景
        scene = new THREE.Scene();
    }

    var light;
    function initLight(){  //初始化光
        scene.add(new THREE.AmbientLight(0x404040));
        light = new THREE.DirectionalLight(0xffffff);
        light.position.set(1,1,1);
        scene.add(light)
    }

    function initModel(){  //初始化轴辅助
        var object = new THREE.AxesHelper(500);
        scene.add(object);
    }

    var stats;
    function initStats(){   //初始化性能插件
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    var controls;
    function  initControls() {
        controls = new THREE.OrbitControls(camera,renderer.domElement);
        controls.enableDamping = true;
        controls.enableZoom = true;
        controls.autoRotate = false;
        controls.enablePan = true;
    }

    var rainConGui;
    var snowConGui;
    var cloudRain;
    var cloudSnow;
    var disRain;
    var disSnow;

    function initGuiRain() {  //初始化gui
        rainConGui = {
            "开启下雨" : true,
            "雨滴尺寸" : 2,
            "背景透明" : true,
            "不透明度" : 0.6,
            //"vertexColor" : true,
            "雨滴速度" : 8,
            "雨滴方向X" : 0,
            "雨滴方向Z" : 0,
            "雨滴颜色" : 0Xffffff,
            "雨滴距离" : 90,
            //"sizeAttenuation" : true,
            //"rotateSystem" : false,
            rainRedraw : function () {
                if (cloudRain) {
                    if(enableView ==1 ) {
                        camera.remove(cloudRain);
                    }
                    else{
                        scene.remove(cloudRain);
                    }
                }
                createParticlesRain(rainConGui.开启下雨,rainConGui.雨滴速度, rainConGui.雨滴尺寸, rainConGui.背景透明, rainConGui.不透明度, rainConGui.vertexColors, rainConGui.sizeAttenuation, rainConGui.雨滴方向X, rainConGui.雨滴方向Z, rainConGui.雨滴颜色,rainConGui.雨滴距离);
            }
        };
        var rainDatGui = new dat.GUI();
        //将设置属性添加到 rainConGui当中， rainConGui.add（对象，属性，最小值，最大值）
        rainDatGui.add( rainConGui,'开启下雨').onChange( rainConGui.rainRedraw);
        rainDatGui.add( rainConGui,'雨滴速度',8,20).onChange( rainConGui.rainRedraw);
        //datGui.add( rainConGui,'雨滴尺寸',1,10).onChange( rainConGui.redraw);
        //datGui.add( rainConGui,'背景透明').onChange( rainConGui.redraw);
        //datGui.add( rainConGui,'不透明度',0,1).onChange( rainConGui.redraw);
        //datGui.add( rainConGui,'vertexColor').onChange( rainConGui.redraw);
        rainDatGui.add( rainConGui,'雨滴方向X',-1,1).onChange( rainConGui.rainRedraw);
        rainDatGui.add( rainConGui,'雨滴方向Z',-1,1).onChange( rainConGui.rainRedraw);
        rainDatGui.add( rainConGui,'雨滴距离',50,150).onChange( rainConGui.rainRedraw);
        //datGui.addColor( rainConGui,'雨滴颜色').onChange( rainConGui.redraw);
        //datGui.add( rainConGui,'sizeAttenuation').onChange( rainConGui.redraw);
        //datGui.add( rainConGui,'rotateSystem').onChange( rainConGui.redraw);
        rainConGui.rainRedraw();
    }

    function initGuiSnow() {  //初始化雪gui
        snowConGui = {
            "开启下雪" : true,
            "雪花尺寸" : 2,
            "背景透明" : true,
            "不透明度" : 0.6,
            //"vertexColor" : true,
            "雪花速度" : 0.5,
            "雪花方向X" : 0,
            "雪花方向Z" : 0,
            "雪花颜色" : 0Xffffff,
            "雪花距离" : 90,

            //"sizeAttenuation" : true,
            //"rotateSystem" : false,
            snowRedraw : function () {
                if (cloudSnow) {
                    if(enableView == 1) {
                        camera.remove(cloudSnow);
                    }else
                    {
                        scene.remove(cloudSnow)
                    }
                }
                createParticlesSnow(snowConGui.开启下雪,snowConGui.雪花速度, snowConGui.雪花尺寸, snowConGui.背景透明, snowConGui.不透明度, snowConGui.vertexColors, snowConGui.sizeAttenuation, snowConGui.雪花方向X, snowConGui.雪花方向Z, snowConGui.雪花颜色,snowConGui.雪花距离);
            }
        };

        var snowDatGui = new dat.GUI();
        //将设置属性添加到 snowConGui当中， snowConGui.add（对象，属性，最小值，最大值）
        snowDatGui.add( snowConGui,'开启下雪').onChange( snowConGui.snowRedraw);
        snowDatGui.add( snowConGui,'雪花速度',0.5,10).onChange( snowConGui.snowRedraw);
        //datGui.add( snowConGui,'雪花尺寸',0.1,10).onChange( snowConGui.redraw);
        //datGui.add( snowConGui,'背景透明').onChange( snowConGui.redraw);
        //add( snowConGui,'不透明度',0,1).onChange( snowConGui.redraw);
        //datGui.add( snowConGui,'vertexColor').onChange( snowConGui.redraw);
        snowDatGui.add( snowConGui,'雪花方向X',-1,1).onChange( snowConGui.snowRedraw);
        snowDatGui.add( snowConGui,'雪花方向Z',-1,1).onChange( snowConGui.snowRedraw);
        snowDatGui.add( snowConGui,'雪花距离',50,150).onChange( snowConGui.snowRedraw);

        //datGui.addColor( snowConGui,'雪花颜色').onChange( snowConGui.redraw);
        //datGui.add( snowConGui,'sizeAttenuation').onChange( snowConGui.redraw);
        //datGui.add( snowConGui,'rotateSystem').onChange( snowConGui.redraw);
        snowConGui.snowRedraw();
    }


    //生成雨滴粒子的方法
    function createParticlesRain(enableRain,speed,size, transparent, opacity, vertexColors, sizeAttenuation,quaX, quaZ,color,distanceRain) {
        if(enableRain == true) {
            rainQuaX = quaX * 5;
            rainQuaZ = quaZ * 5;
            var angleRain = Math.acos(rainQuaX / Math.sqrt(rainQuaX * rainQuaX + 0.2795850805518647*0.2795850805518647));
            var textureRain = new THREE.TextureLoader().load("/example/textures/1rain.png");  //加载纹理贴图
            //var texture = new THREE.TextureNode();
            if(quaX||quaZ) {
                textureRain.rotation = 1/angleRain;
                textureRain.center.set(0.5, 0.5);
            }
            var geomRain = new THREE.Geometry();   //几何体;
            var materialRain = new THREE.PointCloudMaterial({    //材质定义为点云
                size: size * 2,
                transparent: transparent,
                opacity: opacity,
                vertexColors: true,
                sizeAttenuation: true,
                color: color,
                map: textureRain,
                depthTest: false, //设置解决透明度有问题的情况

            });
            disRain = distanceRain;
            rainSpeed = speed;

            var range = 120;
            rainRange = range / 2;
            for (var i = 0; i < 1500; i++) {
                //添加顶点坐标
                var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
                particle.velocityY = 0.1 + Math.random() / 5;
                particle.velocityX = (Math.random() - 0.5) / 3;
                particle.velocityZ = 0;
                geomRain.vertices.push(particle);
                var color = new THREE.Color(0Xffffff);
                //color.setHSL(color.getHSL().h,color.getHSL().s,Math.random()* color.getHSL(),l);
                geomRain.colors.push(color);
                //geomRain.lookAt(0,0,0);
                //geomRain.rotateY(Math.PI/6);
                //geomRain.verticesNeedUpdate = true;
            }
            //生成模型，添加到场景当中
            cloudRain = new THREE.Points(geomRain, materialRain);
            //cloudRain.rotation.x= rainQuaX;
            //cloud.position.set(96389.0-466.53, 2690779.0+23.26, 1000);
            cloudRain.verticesNeedUpdate = true;
            if (enableView == 1) {
                camera.add(cloudRain);
                scene.add(camera);
            } else{
                scene.add(cloudRain);
            }
            //geomRain.rotateZ(Math.PI/4);

        }
    }

    //生成雪花粒子的方法
    function createParticlesSnow(enableSnow,speed,size, transparent, opacity, vertexColors, sizeAttenuation,quaX, quaZ,color,distanceSnow) {
        if(enableSnow == true) {
            var textureSnow = new THREE.TextureLoader().load("/example/textures/snow.png");  //加载纹理贴图
            var geomSnow = new THREE.Geometry();   //几何体;
            var materialSnow = new THREE.PointCloudMaterial({    //材质定义为点云
                size: size,
                transparent: transparent,
                opacity: opacity,
                vertexColors: true,
                sizeAttenuation: true,
                color: color,
                map: textureSnow,
                depthTest: false, //设置解决透明度有问题的情况
            });
            disSnow = distanceSnow;
            snowSpeed = speed;
            snowQuaX = quaX;
            snowQuaZ = quaZ;
            var range = 120;
            snowRange = range / 2;
            for (var i = 0; i < 1500; i++) {
                //添加顶点坐标
                var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);
                particle.velocityY = 0.1 + Math.random() / 5;
                particle.velocityX = (Math.random() - 0.5) / 3;
                particle.velocityZ = 0;

                geomSnow.vertices.push(particle);
                var color = new THREE.Color(0Xffffff);
                //color.setHSL(color.getHSL().h,color.getHSL().s,Math.random()* color.getHSL(),l);
                geomSnow.colors.push(color);
            }
            //生成模型，添加到场景当中
            cloudSnow = new THREE.Points(geomSnow, materialSnow);
            //cloud.position.set(96389.0-466.53, 2690779.0+23.26, 1000);
            cloudSnow.verticesNeedUpdate = true;
            if(enableView ==1) {
                camera.add(cloudSnow);
                scene.add(camera);
            }
            else{
                scene.add(cloudSnow);
            }
        }
    }

    function renderRain() {
        //产生雨滴动画效果
        var vertices = cloudRain.geometry.vertices;
        vertices.forEach(function (v) {
            //v.y = v.y - (v.velocityY) * rainSpeed ;//* speed;
            //v.x = v.x - (v.velocityX) *.5;
            //(v.y <= -60)v.y = 60;
            //if(v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -1;
            v.y = v.y - (v.velocityY) * rainSpeed ;
            if(v.y <= -rainRange)v.y = rainRange;
            v.x = v.x-(v.velocityX+rainQuaX)*.5;
            v.z = v.z-v.velocityZ+rainQuaZ;
            if(v.x >= rainRange ) {
                v.x = -rainRange;
            }
            else if(v.x <= -rainRange) {
                v.x = rainRange;
            }
            if(v.z >= rainRange )
                v.z = -rainRange;
            else if(v.z <= -rainRange)
                v.z = rainRange;
        });

        cloudRain.geometry.verticesNeedUpdate = true;
        //distanceCamera = camera.position.distanceTo(camPosVec)
        //cloudRain.position.set(camera.position.x+(camera.position.x-camPosVec.x)*distanceCamera,camera.position.y+(camera.position.y-camPosVec.y)*distanceCamera,camera.position.z+(camera.position.z-camPosVec.z)*distanceCamera);
        //cloudRain.position.set(camera.position.x,camera.position.y,camera.position.z);
        if(enableView ==1) {
            cloudRain.position.set(0, 0, -disRain);
        }
        renderer.render(scene,camera);
    }

    function renderSnow() {
        //产生雪花动画效果
        var vertices = cloudSnow.geometry.vertices;
        vertices.forEach(function (v) {
            //v.y = v.y - (v.velocityY) * snowSpeed ;
            //v.x = v.x - (v.velocityX) *.5;
            //if(v.y <= -60)v.y = 60;
            //if(v.x <= -60 || v.x >= 60) v.velocityX = v.velocityX * -1;
            v.y = v.y - (v.velocityY) * snowSpeed;
            if(v.y <= -snowRange)v.y = snowRange;
            v.x = v.x-(v.velocityX+snowQuaX)*.5;
            v.z = v.z-v.velocityZ+snowQuaZ;
            if(v.x >= snowRange )
                v.x = -snowRange;
            else if(v.x <= -snowRange)
                v.x = snowRange;
            if(v.z >= snowRange )
                v.z = -snowRange;
            else if(v.z <= -snowRange)
                v.z = snowRange;
        });
        cloudSnow.geometry.verticesNeedUpdate = true;
        //cloudSnow.position.set(camera.position.x,camera.position.y,camera.position.z);
        if(enableView ==1) {
            cloudSnow.position.set(0, 0, -disSnow);
        }
        renderer.render(scene,camera);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderRain();
        renderSnow();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }

    function animate() {
        controls.update();
        renderRain();
        renderSnow();
        stats.update();
        requestAnimationFrame(animate);
    }

    function draw(){
        //出口函数
        initRender()
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();
        initGuiRain();
        initGuiSnow();
        animate();
        window.onresize = onWindowResize();
    }
</script>
</html>

HR_Reborn
关注
专栏目录
Unity雨，雪粒子特效 Rain&Snow;
06-24
这个资源是基于Unity开发的下雨，下雪的粒子特效，效果还是挺不错的
Three 雪花飘落案例
前端学习杂记，记录学习中的前端知识。
04-22 483
ThreeJS 粒子系统中，THREE.Points是用来创建点的类，也用来批量管理粒子，基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数，geometry(几何体)和material(材质)，几何体参数用来设置粒子的位置坐标，而材质参数用来设置粒子的外观。
基于粒子（Points）模拟雨雪天气效果
永无止境
07-26 1202
three.js模拟雨雪天气效果。
Unity Shader 两个关于下雨的效果分享
游戏入选者的博客
08-28 7361
前一端时间写了一些有关下雨效果的Shader的，感觉实现的效果很不错，所以把它们分享一下，主要参考表面积水效果 RainSurface和Rainy Surface Shader Part 1: Ripples。下面是视频： 一些下雨的效果（Unity Shader） 动图： 大致可分为两个部分，一是地面的水坑和涟漪，二是石板的流水效果。雨滴效果是我用粒子瞎做的。 先来看第一部分，以下是
Three.js - 通过粒子实现下雪效果
ithanmang
08-15 3454
实现下雨的效果，就需要一个雨滴的纹理或者通过canvas绘制的雨滴，这里通过给每个粒子设置纹理贴图来实现雨滴。 示例：http://ithanmang.com/threeJs/home/201808/20180815/02-rainy-scene.html 效果 1、首先，需要加载纹理。 /* 雨滴图片 */ let texture = new THREE.TextureLoader(...
three.js实现下雨、下雪天气模拟
sinat_37885331的博客
04-18 2662
three.js版本："three": "^0.136.0"
雨雪粒子特效插件：Rain and Snow Pack - 1.1
最新发布
10-19
这个资源包包含了在 Unity 中创建逼真雨雪效果所需的一切。这些效果可以作为玩家控制器的子对象，模拟对游戏世界广泛区域的影响，为玩家带来沉浸式体验。资源包内容如下： 1 个测试场景，用于预览效果。 1 个阅读...
unity 雨雪的粒子特效
11-14
这个“Rain Snow Prefabs v3.0.0.unitypackage”文件包含了预设的雨雪粒子效果，预设通常包含了完整的粒子系统组件以及相关的材质、纹理和脚本。用户可以直接将这些预设导入到自己的项目中，通过修改预设的属性，...
Unity粒子特效集合8
03-27
"Unity粒子特效集合8"包含72种不同的粒子特效，通过10个链接分批上传，涵盖各种类型的特效，如火焰、闪电、雨雪、魔法、爆炸等。 1. **旋转纹理特效包 -Spiral Generator**：这个插件允许开发者创建动态的旋转纹理...
雨雪、烟雾、瀑布等特效
04-24
这个名为"雨雪、烟雾等特效.unitypackage"的压缩包，是一个包含了所有这些特效模型的资源包。Unity的`.unitypackage`文件是一种方便分享和导入资源的格式，它将模型、材质、脚本等打包在一起，用户只需在Unity编辑器...
FE中文版雨雪粒子光变等多达近100种视频特效PRAE插件
10-05
FE中文版雨雪粒子光变等多达近100种视频特效PRAE插件
HTML5 javascript调用WebGL实现 下雪闪电打雷下雪天气效果天气现象 太逼真了,这其实就是游戏开发了.zip
01-11
HTML5 javascript调用webgl实现 下雪闪电打雷下雪天气效果天气现象 太逼真了,这其实就是游戏开发了.zip
Unity粒子特效系列-RPG游戏-小白必看-高质量附效果.zip
02-06
学习如何利用这些粒子特效，开发者可以创造出各种各样的视觉奇迹，如华丽的法术释放、逼真的火焰燃烧、雨雪天气效果等。对于初学者来说，了解如何使用Unity的粒子系统，不仅能够提升游戏的视觉品质，也是提升个人...
mapbox threebox 下雨效果 天气特效
AllBluefm的专栏
01-25 1051
使用mapbox为地图容器，结合threebox实现下雨效果。添加custom图层以及创建mesh。
微信小程序集成three.js--4.粒子系统，模拟雨雪天气
3D模型素材库
12-30 1307
微信小程序集成three.js模拟雨雪天气
57 Three.js 使用粒子实现下雪特效
现在学习也不晚
02-01 4521
介绍 由于实现了下雨的效果，实现下雪的效果就简单多了。首先就是更换一张图片，然后在渲染的时候，降低y轴的速度，就实现了下雪的效果。 案例地址：http://www.wjceo.com/blog/threejs/2018-02-12/59.html 案例代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...
Unity3D雨雪粒子特效(Particle System)
心疼你的一切博客
05-23 1058
大家好，我是心疼你的一切，不定时更新Unity开发技巧，觉得有用记得一键三连哦。有时候会用到特效,下雨,下雪…用的时候还需要设置一番非常不方便,所以整一个方便使用的,记录一下博客提示：以下是本篇文章正文内容，下面案例可供参考没有积分的可以私聊评论,发我邮箱即可以上就是下雨下雪的特效积雪shader参考这位博主的shader：https://blog.csdn.net/qq_34697930/article/details/136838789?
『Flutter-绘制篇』实现炫酷的雨雪特效(1)
2401_84132617的博客
04-11 611
自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
Three.js 模型体素化原理及实现
新缸中之脑
05-14 1365
在本文中，我们探索了 3D 模型的体素化过程，重点是使用导入的 glTF 模型创建 3D 像素艺术。本文包括一个最终演示，涵盖了可以使用体素化实现的各种 3D 效果。推荐：用快速搭建可编程3D场景。
cesium 雨雪粒子
09-08
在Cesium中，可以通过粒子系统实现雨雪粒子效果。粒子系统是一种用于创建并控制粒子效果的工具。通过实例化ParticleSystem对象，可以设置粒子的发射速率、生命周期、颜色、大小和运行速度等参数，从而控制单个粒子随...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值