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; // x
         positions[i * 3 + 1] = Math.random() * 5000; // y
         positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z
         //雨滴位移速度
         velocities[i * 3] = 0; // x
         velocities[i * 3 + 1] = -this.raindropSpeed; // y
         velocities[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; // x
            positions[i * 3 + 1] = Math.random() * 5000; // y
            positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z

            // 修改雪花坠落位置数据，使其x、z方向上可以晃动飘落；修改dropSpeed坠落速度，雪花的速度会慢一些
            velocities[i * 3] = (Math.random() - 0.5) / 3*this.dropSpeed; // x
            velocities[i * 3 + 1] = -this.dropSpeed+ (Math.random() / 5*this.dropSpeed); // y
            velocities[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; // x
                positions[i * 3 + 1] = Math.random() * 5000; // y
                positions[i * 3 + 2] = (Math.random() - 0.5) * 16000; // z
            }
        }
        this.geom.attributes.position.needsUpdate = true
        this.group.position.copy( this.camera.position ); //不管放大还是缩小 雨滴不会改变
    }

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