Threejs下雨效果

//粒子
import 'babel-polyfill';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import * as  dat from 'dat.gui'
import { AxesHelper } from 'three';


const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
window.camera = camera;
camera.position.set(-35.36881978334946, -150.83434402135708, 158.45363289294562)

scene.add(camera);
const textureLoader = new THREE.TextureLoader();
const pointTexture = textureLoader.load('./textures/rain/smoke.png')

let yunGroup = new THREE.Group();

const createPlan = (x, y, z) => {
    const planGeometry = new THREE.PlaneBufferGeometry(564, 300);
    const material = new THREE.MeshStandardMaterial({ map: pointTexture, alphaMap: pointTexture, transparent: true });
    material.castShadow = true;
    const mesh = new THREE.Mesh(planGeometry, material);
    mesh.position.set(x, y, z)
    mesh.rotation.z = -Math.PI / 2
    yunGroup.add(mesh)
}


for (let i = 0; i < 30; i++) {
    const x = Math.random() * 1000 - 460
    const y = 600;
    const z = Math.random() * 500 - 400;
    createPlan(x, y, z)
}

scene.add(yunGroup);
//下雨
const rainTexture = textureLoader.load('./textures/particles/rain.png')

const pointBuffer = new THREE.BufferGeometry();
const count = 3000;
const options = {
    x: 1100,
    y: 1000,
    z: 500
}
//设置顶点缓冲区位置

const position = [];
for (let i = 0; i <= count; i++) {

    position.push((Math.random() - 0.5) * options.x)
    position.push(Math.random() * options.y)
    position.push(Math.random() * 500 - 400)
}
pointBuffer.setAttribute('position', new THREE.Float32BufferAttribute(position, 3))
const pointMaterila = new THREE.PointsMaterial({ map: rainTexture, alphaMap: rainTexture, transparent: true, size: 10, opacity: 0.7 });
const point = new THREE.Points(pointBuffer, pointMaterila);
scene.add(point)
//加入环境光
const ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight)


const gui = new dat.GUI();

//加入点光源
const lightning = new THREE.PointLight(0x062d89, 30, 500, 1.7);
lightning.position.set(200, 300, 100);
console.log(lightning.power);
scene.add(lightning);
gui.add(lightning, 'power').min(10).max(1000).step(10).name('power')

const pointAxseHelper = new THREE.PointLightHelper(lightning, 1);

scene.add(pointAxseHelper)
const axseHelper = new AxesHelper(500);
// scene.add(axseHelper)
const render = new THREE.WebGLRenderer({ antialias: true });
render.shadowMap.enabled = true;
const fog = new THREE.FogExp2(0x1c1c2a, 0.002)
render.setClearColor(fog.color)
render.setSize(window.innerWidth, window.innerHeight);



const control = new OrbitControls(camera, render.domElement);
control.enableDamping = true;

const renderFun = () => {

    if (Math.random() > 0.92) {
        if (lightning.power < 100) {
            const x = Math.random() * 1000 - 460
            const y = 600;
            const z = Math.random() * 500 - 400;
            lightning.position.set(x, y, z)
        }
        lightning.power = Math.random() * 150
    }
    let positions = pointBuffer.attributes.position.array
    for (let i = 1; i < positions.length; i += 3) {    //改变Y坐标，加速运动
        let y = positions[i];
        y -= 2;
        if (y < -50) {
            pointBuffer.attributes.position.array[i] = options.y;
        } else {
            pointBuffer.attributes.position.array[i] = y;
        }

    }
    pointBuffer.attributes.position.needsUpdate = true

    control.update();

    render.render(scene, camera);
    requestAnimationFrame(renderFun)
}
renderFun();
document.body.appendChild(render.domElement);