How do i add snow to my website?

[ineedateam1]

I have both scripts(Threecanvas.js and Snow.js) in /
How do i run them?
My site: [url]http://www.pawsnclawscomfortkits.com/[/url]

I dont do web codeing or anything so i know nothing - i just want snow

[kingzl3y]

Not going to lie.. I've just copied this right from FPs source code.

<script type="text/javascript" src="js/ThreeCanvas.js"></script>
	<script type="text/javascript" src="js/Snow.js"></script>
	
		<script>

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;
                        var RotTime =0;

			var particle;

			var camera;
			var scene;
			var renderer;

			var mouseX = 0;
			var mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			
			var particles = []; 
			var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
			particleImage.src = 'img/snow.png'; 

		
		
			function initSnow() {
			
				//document.body.appendChild(container);

				camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.z = 400;

				scene = new THREE.Scene();
				scene.add(camera);
					
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
					
				for (var i = 0; i < 200; i++) {

					particle = new Particle3D( material);
					particle.position.x = Math.random() * 1000 - 500;
					particle.position.y = Math.random() * 2000 - 1000;
					particle.position.z = Math.random() * 1000 - 500;
particle.velocity = new THREE.Vector3(0,-1,0);
					particle.scale.x = particle.scale.y =  0.5;

					scene.add( particle );
					
					particles.push(particle); 
				}

				document.body.appendChild( renderer.domElement );

	
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				
				setInterval( loop, 1000 / 25 );
				
			}
			
			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

			//

			function loop() {

			for(var i = 0; i<particles.length; i++)
				{

					var particle = particles[i]; 
					particle.updatePhysics(); 
	
					with(particle.position)
					{
						if(y<-1000) y+=2000; 
						if(x>500) x-=1000; 
						else if(x<-500) x+=1000; 
						if(z>500) z-=1000; 
						else if(z<-500) z+=1000; 
					}				
				}


			RotTime = RotTime + 0.004;
                                camera.position.x = Math.sin( RotTime ) * 400;
                                camera.position.z = Math.cos( RotTime  ) * 400;
				camera.lookAt(scene.position); 

				renderer.render( scene, camera );
			}

$(function() {

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome ) 
{
 initSnow();
}
});

		</script>

Add that right before the </body> tag at the very end of the page.

Try it locally first... wouldn't want to suggest something and then fuck your site up!

[editline]23rd December 2011[/editline]

p.s. make sure that stuff ^ points to the right place.. i.e. put the javascript files in a folder called js OR remove the /js/ from the shit above..

Also make sure you've got the img and the correct image path

[Brodster55]

You need to post it inside the head of the HTML page.

<script src="js/snowstorm.js" type="text/javascript"></script>

Here is an example, replace the src="" with the directory of the javascript file.

[kingzl3y]

Also, I don't know why Garry did it.. but the stuff above only works in Chrome

[ineedateam1]

Im confused do i post Kings or brodster...

Is there anyway to do it without editing every page?

I'd be will to just let you FTP in... I don't understand any of this :U
How does one do test on a local copy?

[Brodster55]

Yes, you will need to paste it into every single page. You can use King's copy if you would like to.

[ineedateam1]

Im just going to use this:
EDIT: I found this - would this work on other browsers too?
[url]http://www.schillmania.com/projects/snowstorm/[/url]

[Chuushajou]

I'll do it for you.

[editline]23rd December[/editline]

Nevermind, you've cracked it.

[jaybuz]

Remove the "is_chrome" check and it works in all modern browsers!