3Dで雪を降らせるJava Script「Snow in 3D」を設置してみた

【この記事を読むのに必要な時間は約 10 分です。】

JavaScriptで雪を降らせる「Snowstorm」をクリスマスシーズンなので、ブログやサイトに雪を降らせるSNOWSTORMを設置してみたで、また、Jqueryプラグインで雪やら色々降らせる「Snowfall」をブログやサイトに雪やら色々降らせるJQUERYプラグイン「Snowfall」の設置で、紹介した。
もう、いいだろうと思ったが、「Snowfall」の時に参考にしたぷらすぶろぐさんの今年は迫力の3Dでワードプレスに雪を降らすで紹介されているJavaScript「Snow in 3D」を、実際に設置してみたので、説明する。

1 「Snow in 3D」のダウンロードとサーバーへのアップロード
- 1.1 必要ファイルのダウンロード
- 1.2 サーバーへのアップロード
2 設置方法-ヘッダー部分への記載
3 注意事項
4 WordPressで特定の記事やカテゴリーだけに適用する方法
5 デモ

「Snow in 3D」のダウンロードとサーバーへのアップロード

必要ファイルのダウンロード

こちらが「JavaScript HTML5 Canvas Snow in 3D」のホームページ。

必要ファイルは、ページなかほどの「available on github」をクリックして、Snow in 3DのGitHubのページからダウンロードする。

必要ファイルは以下の３つ。
jsフォルダ中：Snow.js/ThreeCanvas.js
imgフォルダ中：ParticleSmoke.png
ダウンロードはそれぞれのファイルをクリックして表示されたものを全て選択して、名前を付けて保存する。念のため、2013年12月24日現在のファイルをこちらにおいて置く。
Snow.js
ThreeCanvas.js
ParticleSmoke.png
なお、画像については、上記画像は使用せずに、前回同様、ぷらすぶろぐさんの今年は迫力の3Dでワードプレスに雪を降らすの記事から拝借した。
拝借した画像はこちら：
←こちらです！

サーバーへのアップロード

上記2つのjsファイルと好きなほうの画像をサーバーにアップロードする。

ライブドアブログでのアップロード方法は、当ブログのサイト作成＞ライブドアブログの記事の中にJqueryプラグインファイルや画像ファイルのアップロードについて説明があるので参考にして欲しい。

設置方法-ヘッダー部分への記載

JSファイルの呼び出しのための記載

ヘッダー部分（<head>～</head>の間）に以下のように記載する。


<!-- Snowin3D用js追加 -->
<script type="text/javascript" src="https://......../ThreeCanvas.js"></script>
<script type="text/javascript" src="https://......../Snow.js"></script>
<!-- /Snowin3D用js追加 -->

Snow in 3D用cssの追加

ヘッダー部分（<head>～</head>の間）の上記jsファイルを記載した直前にSnow in 3D用cssとして以下のように記載する。


<!-- Snowin3D用css追加 -->
<style type="text/css">
#snow_canvas{
z-index: 30000000000000;
position: fixed;
top:0;
left: 0;
}
</style>
<!-- /Snowin3D用css追加 -->

Snow in 3Dの設定に関する記載

ヘッダー部分（<head>～</head>の間）の上記jsファイルを記載した直後にSnow in 3D用セッティングとして以下のように記載する。
なお、画像のアップロード先は、自分のアップロード先URLに変更すること。それ以外は、基本コピペで大丈夫。


<!-- Snowin3D用setting追加 -->
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var container;
var particle;
var camera;
var scene;
var renderer;

var mouseX = 0;
var mouseY = 0;
var snownum = 500;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var particles = []; 
var particleImage = new Image();
particleImage.src = 'https://......../snow.png'; //アップロードした画像URLに変更

function init() {
	container = document.createElement('div');
//自動で作成されるdiv要素にid追加（ここから）
	container.id = 'snow_canvas'; 
//自動で作成されるdiv要素にid追加（ここまで）
	document.body.appendChild(container);
	camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
	camera.position.z = 1000;

	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 < snownum; i++) {
		particle = new Particle3D( material);
		particle.position.x = Math.random() * 2000 - 1000;
		particle.position.y = Math.random() * 2000 - 1000;
		particle.position.z = Math.random() * 2000 - 1000;
		particle.scale.x = particle.scale.y =  1;
		scene.add( particle );
		
		particles.push(particle); 
	}

	container.appendChild( renderer.domElement );

//マウスクリックでcanvasを削除するイベント登録（ここから）
	container.addEventListener( 'click', function(){container.parentNode.removeChild(container)}, false );
	container.addEventListener( 'touchstart', function(){container.parentNode.removeChild(container)}, false );
	container.addEventListener( 'mousemove', onDocumentMouseMove, false );
//マウスクリックでcanvasを削除するイベント登録（ここまで）
	container.addEventListener( 'touchstart', onDocumentTouchStart, false );
	container.addEventListener( 'touchmove', onDocumentTouchMove, false );
	setInterval( loop, 1000 / 60 );
	
}

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>1000) x-=2000; 
			else if(x<-1000) x+=2000; 
			if(z>1000) z-=2000; 
			else if(z<-1000) z+=2000; 
		}				
	}

	camera.position.x += ( mouseX - camera.position.x ) * 0.05;
	camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
	camera.lookAt(scene.position); 

	renderer.render( scene, camera );

	
}
//init関数を呼び出す（ここから）
if (window.addEventListener) {
  window.addEventListener("load", init, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", init);
} else  {
  window.onload = init;
}
//init関数を呼び出す（ここまで）

</script>
<!-- /Snowin3D用setting追加 -->

注意事項

これで、雪が降っている。ページ上でクリックすると雪を止めることができる。
なお、ぷらすぶろぐさんの今年は迫力の3Dでワードプレスに雪を降らすで言及されているが、canvasを画面いっぱい被せているため当初は、リンク等のクリックが効かないとの事。そのため画面内でクリックがいったん発生するとcanvasと共に雪は消える。