function lizi3d() {
	var container,camera,scene,renderer;
	var separation=100,amountX=30,amountY=20;
	var particles=[],particle,count=0;
	var mouseX = 0,mouseY = 0;

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

	if(window.innerWidth>=1200){
		liziinit();
		animate();
	}

	function liziinit(){
		container = document.getElementById("canvasRoom");
		scene = new THREE.Scene();
		camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);
		camera.position.z = 1000;
		var material = new THREE.SpriteCanvasMaterial({
			color: '#787878',
			//opacity: 0.5,
			program: function(context) {
				context.beginPath();
				context.arc(0, 0, 0.5, 0, Math.PI * 2, true);
				context.fill();
			}
		});
		for (var ix = 0,iy = 0; ix < amountX; ix++) {
			for (var iz = 0; iz < amountY; iz++) {
				particle = particles[iy++] = new THREE.Particle(material);
				particle.position.x = ix * separation - ((amountX * separation) / 2);
				particle.position.z = iz * separation - ((amountY * separation) / 2);
				scene.add(particle);
			}
		}
		renderer = new THREE.CanvasRenderer({antialias: true, alpha: true });
		renderer.setClearColor("rgba(255,255,255,1)", 0);
		renderer.setSize(window.innerWidth, window.innerHeight);
		container.appendChild(renderer.domElement);


		//document.addEventListener( 'mousemove', onDocumentMouseMove, false );
		//document.addEventListener( 'touchstart', onDocumentTouchStart, false );
		//document.addEventListener( 'touchmove', onDocumentTouchMove, false );
		window.addEventListener( 'resize', onWindowResize, false );
	}


	if (!window.requestAnimationFrame) {requestAnimationFrame = function(fn) {setTimeout(fn, 17); }; }


	function onWindowResize() {
		
		windowHalfX = window.innerWidth / 2;
		windowHalfY = window.innerHeight / 2;
	
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
	
		renderer.setSize( window.innerWidth, window.innerHeight );
	
	}
		
	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 animate() {
		render();
		requestAnimationFrame(animate);
	}
	function render() {
		camera.position.x += (mouseX - camera.position.x) * 0.05;
		//camera.position.y += (-mouseY - camera.position.y) * 0.05;
		camera.position.y=200;
		camera.lookAt(scene.position);
		var iall = 0;
		for (var ix = 0; ix < amountX; ix++) {
			for (var iz = 0; iz < amountY; iz++) {
				particle = particles[iall++];
				particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iz + count) * 0.4) * 50);
				particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iz + count) * 0.4) + 1) * 2
			}
		}
		renderer.render(scene, camera);
		count += 0.1;
	}
}

var lizi3dflag = false;


function liziGo(){
	if(lizi3dflag) return;
	if($('#canvasRoom').length>0){
		var windowSTop = $(window).scrollTop();
		var windowSBottom = windowSTop + $(window).height();
		var pageQ1 = $('#canvasRoom').offset().top;

		if( pageQ1 <= windowSBottom ){
			lizi3dflag = true;
			lizi3d();
		}
	}
}

$(function(){
	liziGo();
	$(window).scroll(liziGo);	
})