WebGL snow

some nice random snow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

CSS

html {
  overflow: hidden;
}

body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0xffffff
});

var maxSpace = 10;
var minSpace = -20;
var scale = 0.1;

var cubes = [];
for (var i = 0; i < 2000; i++) {
  var cube = new THREE.Mesh(geometry, material);
  cube.position.x = Math.random() * (maxSpace - minSpace) + minSpace;
  cube.position.y = Math.random() * (maxSpace - minSpace) + minSpace;
  cube.position.z = Math.random() * (maxSpace - minSpace) + minSpace;
  cube.offset = Math.random() * 5;

  cube.scale.x = scale;
  cube.scale.y = scale;
  cube.scale.z = scale;

	cubes.push(cube);
  scene.add(cube);
}

camera.position.z = 10;

function render() {
	for (var i = 0; i < cubes.length; i++) {
  	var cube = cubes[i];
		cube.position.y -= Math.max(cube.offset * 0.01, 0.01);
    cube.position.x += Math.sin(new Date().getTime() * 0.0005 + cube.offset) * 0.009;
    
    if (cube.position.y < minSpace) {
    	cube.position.y = maxSpace;
    }
  }

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();