three.js实现下雨、下雪天气模拟

three.js版本："three": "^0.136.0"

1.初始化场景、相机、渲染器

// 创建场景、相机、渲染器this.scene = new THREE.Scene();this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(1000,500, 5560);this.renderer = new THREE.WebGLRenderer({alpha: true,antialias: true,//是否执行抗锯齿。默认为false.});this.renderer.compile(scene, camera)this.renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( this.renderer.domElement );

2.使用控制器

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';this.controls = new OrbitControls(this.camera, renderer.domElement);

3.天气效果

3.1 下雨效果

要创建下雨效果，你可以使用Three.js的例子系统来模拟雨滴。你可以创建一个包含很多雨滴的粒子系统，并使其沿着场景的Z轴方向下落。下面是一个简单的例子，使用Three.js实现下雨效果：

雨滴和雪花图片

this.geom =null;
this.drops = 20000; //雨滴数量
this.raindropSpeed=5 //雨滴下落速度
this.group= new THREE.Group();
//
createRain(){//加载雨滴图片let rain = require('@/assets/2Dthumbnail/rain.png')const texture = new THREE.TextureLoader().load(rain)// 定义顶点数据const positions = new Float32Array(this.drops * 3);const velocities = new Float32Array(this.drops * 3);this.geom = new THREE.BufferGeometry()// 生成雨滴位置for(let i = 0; i < this.drops; i++){positions[i * 3] = (Math.random() - 0.5) * 16000; // xpositions[i * 3 + 1] = Math.random() * 5000; // ypositions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z//雨滴位移速度velocities[i * 3] = 0; // xvelocities[i * 3 + 1] = -this.raindropSpeed; // yvelocities[i * 3 + 2] = 0; // z}this.geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));this.geom.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));
// 创建雨滴材质const rainMaterial = new THREE.PointsMaterial({//color: 0xffffff,size: 10,map: texture,transparent: true,blending: THREE.AdditiveBlending, // 融合模式depthTest: false, // 可以去掉texture的黑色背景});let Points = new THREE.Points(this.geom, rainMaterial)return  Points
}
this.group.name="下雨"
this.group.add(this.createRain())
this.scene.add(this.group) //添加到场景中

3.2 下雪效果

要模拟下雪，可以使用类似模拟下雨的方法，但需要将雨滴替换成雪花，并使它们在飘落时随机飘散，以模拟雪花的自然运动

createSnow(){...... //大部分代码与下雨效果都是一样的for(let i = 0; i < this.drops; i++){positions[i * 3] = (Math.random() - 0.5) * 16000; // xpositions[i * 3 + 1] = Math.random() * 5000; // ypositions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z// 修改雪花坠落位置数据，使其x、z方向上可以晃动飘落；修改dropSpeed坠落速度，雪花的速度会慢一些velocities[i * 3] = (Math.random() - 0.5) / 3*this.dropSpeed; // xvelocities[i * 3 + 1] = -this.dropSpeed+ (Math.random() / 5*this.dropSpeed); // yvelocities[i * 3 + 2] = (Math.random() - 0.5) / 3*this.dropSpeed; // z// 雪花的随机旋转角度snowflakeRotations[i * 3] = Math.random() * 2 * Math.PI;snowflakeRotations[i * 3 + 1] = Math.random() * 2 * Math.PI;snowflakeRotations[i * 3 + 2] = Math.random() * 2 * Math.PI;}this.geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));this.geom.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));this.geom.setAttribute('rotation', new THREE.BufferAttribute(snowflakeRotations, 1     ));
}

4.更新帧动画

我们使用requestAnimationFrame函数来每秒更新画面，并使用renderer对象来渲染场景。

render() {requestAnimationFrame( this.render );this.updateDrops();this.renderer.render( this.scene, this.camera );
}

 updateDrops() {const positions = this.geom.attributes.position.array;const velocities = this.geom.attributes.velocity.array;for(let i=0; i<this.drops;i++){ //change Y// 更新雨滴位置positions[i * 3] += velocities[i * 3];positions[i * 3 + 1] += velocities[i * 3 + 1];positions[i * 3 + 2] += velocities[i * 3 + 2];// 如果雨滴落到了地面，重新回到顶部if (positions[i * 3 + 1] < -500) {positions[i * 3] = (Math.random() - 0.5) * 16000; // xpositions[i * 3 + 1] = Math.random() * 5000; // ypositions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z}}this.geom.attributes.position.needsUpdate = truethis.group.position.copy( this.camera.position ); //不管放大还是缩小 雨滴不会改变}

this.group.position.copy( this.camera.position ); 这句话很重要，将效果模型放在摄像机前面，避免出现放大缩小场景时天气效果无法覆盖整个场景的情况

three.js实现下雨、下雪天气模拟相关推荐

canvas 让你呼风唤雨，下雨下雪效果
前端如何呼风唤雨 Canvas 等于什么? = html5 =js = 取代flash = 你可以即见即所得向别人装逼!没错进入 canvas 的权力游戏吧! 起初我创造了canvas . 我 ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
sizzle.js学习笔记利用闭包模拟实现数据结构：字典（Map）
sizzle.js学习笔记利用闭包模拟实现数据结构:字典(Map) 这几天学习和查看了jQuery和Property这两个很流行的前端库的御用选择器组件Sizzle.js的源代码,收获还是相对多的!之 ...
three.js精灵模型-下雨场景效果模拟
详情进入:Three.js零基础入门教程(郭隆邦) 通过足够多的精灵模型构成一个粒子系统,然后每一个雨滴按照在一定空间内随机分布,每个精灵模型都使用一个背景透明的雨滴rain.png作为纹理贴图. 效 ...
skycons.js 基于canvas的天气动态图标小插件
skycons是什么 skycons.js是一个开源的javascript天气动画图标渲染器.(特点就是动态的图标,敲黑板) skycons CDN地址:https://www.bootcdn.cn/ ...
cesium，实现下雨下雪效果切换
honey们,一起来学习cesium天气效果吧^^ 本篇文章实现的是简单的HTML页面在线显示,用其他框架的改一下就可以啦 1.CDN引入 <script src='https://cdn.bo ...
js画布实现下雪效果
之前使用css实现了下雪效果,也对比了前端多种实现动画的方法(链接见文末) 下面使用js和canvas的方法配合requestAnimationFrame实现一个简单的下雪效果,代码十分精简. 代码 ...
js拖动窗口用层模拟可移动的小窗口
用层模拟可移动的小窗口 <style type='text/css'>  </style> ...
【2021-01-05】JS逆向之B站模拟登入（含极验点选）
文章目录前言一.页面分析 1.1 模拟页面请求二.参数破解 2.1 登入参数password解密 2.2 验证码参数w破解三.实现模拟登入四.总结前言这次算是我自己的一次小突破吧,毕竟之 ...