Andrea/cubelight.html

## cubelight.html
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js webgl - materials - shaders [Fresnel]</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				background:#ccc;
				padding:0;
				margin:0;
				font-weight: bold;
				overflow:hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				z-index:1000;
			}

			a {
				color: #ffffff;
			}
			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }

			#oldie a { color:#0b0 }
		</style>
	</head>

	<body>
		<pre id="log"></pre>

        <div id="container"></div>


		<script type="text/javascript" src="three_js/build/Three.js"></script>
	<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>

		<script type="text/javascript">

	        var camera, scene, renderer, particle1, particle2, particle2, light1, light2, light3, sphere, geometry, mesh, material;

            init();
            animate();

            function init() {

                var container = document.getElementById( 'container' );

                camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 100;

                scene = new THREE.Scene();

                scene.addLight( new THREE.AmbientLight( 0x00020 ) );


                light1 = new THREE.PointLight( 0xff0040, 1, 50 );
                scene.addLight( light1 );

                light2 = new THREE.PointLight( 0x0040ff, 1, 50 );
                scene.addLight( light2 );

                light3 = new THREE.PointLight( 0x80ff80, 1, 50 );
                scene.addLight( light3 );


                var PI2 = Math.PI * 2;
                var program = function ( context ) {

                    context.beginPath();
                    context.arc( 0, 0, 1, 0, PI2, true );
                    context.closePath();
                    context.fill();

                }

                particle1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xff0040, program: program } ) );
                particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
                scene.addObject( particle1 );

                particle2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x0040ff, program: program } ) );
                particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
                scene.addObject( particle2 );

                particle3 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
                particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
                scene.addObject( particle3 );

                mesh = new THREE.Mesh( new THREE.Cube( 20, 20, 20 ), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
                mesh.overdraw = true;
                scene.addObject( mesh );

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

            }

            //

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

                var time = new Date().getTime() * 0.0005;

                mesh.rotation.y -= 0.01;

                particle1.position.x = Math.sin( time * 0.7 ) * 30;
                particle1.position.y = Math.cos( time * 0.5 ) * 40;
                particle1.position.z = Math.cos( time * 0.3 ) * 30;

                light1.position.x = particle1.position.x;
                light1.position.y = particle1.position.y;
                light1.position.z = particle1.position.z;

                particle2.position.x = Math.cos( time * 0.3 ) * 30;
                particle2.position.y = Math.sin( time * 0.5 ) * 40;
                particle2.position.z = Math.sin( time * 0.7 ) * 30;

                light2.position.x = particle2.position.x;
                light2.position.y = particle2.position.y;
                light2.position.z = particle2.position.z;

                particle3.position.x = Math.sin( time * 0.7 ) * 30;
                particle3.position.y = Math.cos( time * 0.3 ) * 40;
                particle3.position.z = Math.sin( time * 0.5 ) * 30;

                light3.position.x = particle3.position.x;
                light3.position.y = particle3.position.y;
                light3.position.z = particle3.position.z;

                renderer.render( scene, camera );

            }

		</script>

	</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>three.js webgl - materials - shaders [Fresnel]</title>
	<meta charset="utf-8">
	<style type="text/css">
	body {
	background:#ccc;
	padding:0;
	margin:0;
	font-weight: bold;
	overflow:hidden;
	}

	#info {
	position: absolute;
	top: 0px; width: 100%;
	color: #ffffff;
	padding: 5px;
	font-family:Monospace;
	font-size:13px;
	text-align:center;
	z-index:1000;
	}

	a {
	color: #ffffff;
	}
	#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }

	#oldie a { color:#0b0 }
	</style>
	</head>

	<body>
	<pre id="log"></pre>

	<div id="container"></div>


	<script type="text/javascript" src="three_js/build/Three.js"></script>
	<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>

	<script type="text/javascript">

	var camera, scene, renderer, particle1, particle2, particle2, light1, light2, light3, sphere, geometry, mesh, material;

	init();
	animate();

	function init() {

	var container = document.getElementById( 'container' );

	camera = new THREE.Camera( 65, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.z = 100;

	scene = new THREE.Scene();

	scene.addLight( new THREE.AmbientLight( 0x00020 ) );


	light1 = new THREE.PointLight( 0xff0040, 1, 50 );
	scene.addLight( light1 );

	light2 = new THREE.PointLight( 0x0040ff, 1, 50 );
	scene.addLight( light2 );

	light3 = new THREE.PointLight( 0x80ff80, 1, 50 );
	scene.addLight( light3 );



	var PI2 = Math.PI * 2;
	var program = function ( context ) {

	context.beginPath();
	context.arc( 0, 0, 1, 0, PI2, true );
	context.closePath();
	context.fill();

	}

	particle1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xff0040, program: program } ) );
	particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
	scene.addObject( particle1 );

	particle2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x0040ff, program: program } ) );
	particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
	scene.addObject( particle2 );

	particle3 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
	particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
	scene.addObject( particle3 );

	mesh = new THREE.Mesh( new THREE.Cube( 20, 20, 20 ), new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ) );
	mesh.overdraw = true;
	scene.addObject( mesh );

	renderer = new THREE.CanvasRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );

	}

	//

	function animate() {

	requestAnimationFrame( animate );
	render();

	}

	function render() {

	var time = new Date().getTime() * 0.0005;

	mesh.rotation.y -= 0.01;

	particle1.position.x = Math.sin( time * 0.7 ) * 30;
	particle1.position.y = Math.cos( time * 0.5 ) * 40;
	particle1.position.z = Math.cos( time * 0.3 ) * 30;

	light1.position.x = particle1.position.x;
	light1.position.y = particle1.position.y;
	light1.position.z = particle1.position.z;

	particle2.position.x = Math.cos( time * 0.3 ) * 30;
	particle2.position.y = Math.sin( time * 0.5 ) * 40;
	particle2.position.z = Math.sin( time * 0.7 ) * 30;

	light2.position.x = particle2.position.x;
	light2.position.y = particle2.position.y;
	light2.position.z = particle2.position.z;

	particle3.position.x = Math.sin( time * 0.7 ) * 30;
	particle3.position.y = Math.cos( time * 0.3 ) * 40;
	particle3.position.z = Math.sin( time * 0.5 ) * 30;

	light3.position.x = particle3.position.x;
	light3.position.y = particle3.position.y;
	light3.position.z = particle3.position.z;

	renderer.render( scene, camera );

	}

	</script>

	</body>
	</html>