three.js/snow.html at master · rkweb/three.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threejs snow</title>
    <script src="js/three.min.js"></script>
    <style>
        body{margin:0;background-color: #9B1518;}
    </style>
</head>
<body>

<script>
	var container, camera, scene, renderer, particles = [], material, map, textureLoader;
	var halfX = window.innerWidth / 2;
	var halfY = window.innerHeight / 2;
	var mouseX = 0,
		mouseY = 0;
	var fallSpeen = 2;
	var amount = 1000;

	function randomRange(min, max) {
		return ((Math.random() * (max - min)) + min);
	}

    function init(){
		container = document.createElement('div');
		document.body.appendChild(container);

		camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
		camera.position.z = 100;

		scene = new THREE.Scene();

		textureLoader = new THREE.TextureLoader();
		map  = textureLoader.load('img/snow-32.png');
		material = new THREE.SpriteMaterial({map: map});

		for ( i = 0; i < amount; i ++ ){
			var particle = new THREE.Sprite( material );
			var randomScale = randomRange(10,20)
			particle.position.x = randomRange(-1000, 1000);
			particle.position.y = randomRange(-1000, 1000);
			particle.position.z = randomRange(-1000, 1000);
			particle.scale.x = particle.scale.y = particle.scale.z = randomScale;
			particle.v = new THREE.Vector3(0, -fallSpeen, 0);
			particle.v.z = (1 * randomRange(-1, 1));
			particle.v.x = (1 * randomRange(-1, 1));
			particles.push(particle);
			scene.add( particle );
		}
		renderer = new THREE.WebGLRenderer({ alpha: true });
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		container.appendChild( renderer.domElement );

        document.addEventListener('mousemove', mouseHandler, false);
        document.addEventListener('touchstart', touchHandler, false);
        document.addEventListener('touchmove', touchHandler, false);
        animate();
    }

    function mouseHandler(e){
        mouseX = e.clientX - halfX;
        mouseY = e.clientY - halfY;
    }

    function touchHandler(e){
        e.preventDefault();
        mouseX = e.touches[0].pageX - halfX;
        mouseY = e.touches[0].pageY - halfY;
    }

	function animate() {
		requestAnimationFrame(animate);
		render();
	}

	function render() {
		for(var i = 0; i < particles.length; i++){
			var particle = particles[i];
			var pp = particle.position;
			pp.add(particle.v);
			if(pp.y < -1000) pp.y = 1000;
			if(pp.x > 1000) pp.x = -1000;
			else if(pp.x < -1000) pp.x = 1000;
			if(pp.z > 1000) pp.z=-1000;
			else if(pp.z < -1000) pp.z = 1000;
		}
		camera.position.x += (mouseX - camera.position.x) * 0.0005;
		camera.position.y += (-mouseY - camera.position.y) * 0.0005;
		camera.lookAt(scene.position);

		renderer.render( scene, camera );
	}

    init();
</script>
</body>
</html>