scottwwh/index.html

## index.html
<html>

<head>

<style type="text/css">

body
{
	overflow: hidden;
	background-color: #000;
	margin: 0;
}

</style>

<script type="text/javascript" src="http://mrdoob.github.com/three.js/examples/js/Stats.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/RequestAnimationFrame.js"></script>
<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
</head>

<body>

<script>

	var date;

	var stats;

    var camera, scene, renderer,
    geometry, material;

    var sphere, sphereToon, plane;

    var vy = 0;
    var ay = -1;

    var toonVel = -1;

    init();
    animate();

    function init() {

        // camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.y = 500;
        camera.position.z = 500;

        scene = new THREE.Scene();

        var light = new THREE.SpotLight();
        light.position.set( 250, 1000, 500 );
        light.target.position.set( 0, 0, 0 );
        light.castShadow = true;
        scene.add( light );


        // SPHERE
        geometry = new THREE.SphereGeometry( 50, 16, 12 );
        material = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xFFFFFF, shininess: 50, opacity: 1, wireframe: false } );

        sphere = new THREE.Mesh( geometry, material );
        sphere.castShadow = true;
        sphere.position.set( 150, 500, 150 );
        scene.add( sphere );


        sphereToon = new THREE.Mesh( geometry, material );
        sphereToon.castShadow = true;
        sphereToon.position.set( -150, 500, 150 );
        scene.add( sphereToon );


        /*
        var boxGeometry = new THREE.SphereGeometry( 50, 16, 12 );
        // material = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xFFFFFF, shininess: 50, opacity: 1, wireframe: false } );

        var box = new THREE.Mesh( boxGeometry, material );
        box.castShadow = true;
        box.position.set( 150, 500, 150 );
        scene.add( box );
        */


        // PLANE
        geometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

        material = new THREE.MeshLambertMaterial( { color: 0xffcc55, wireframe: false } );

        plane = new THREE.Mesh( geometry, material );
        plane.rotation.x = -Math.PI / 2;
        plane.position.set( 0, 0, 0 );
        plane.castShadow = false;
        plane.receiveShadow = true;

        scene.add( plane );


        camera.lookAt( plane.position );


        // renderer = new THREE.CanvasRenderer();
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.shadowMapEnabled = true;


        document.body.appendChild( renderer.domElement );


		stats = new Stats();
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		stats.domElement.style.zIndex = 100;
		document.body.appendChild( stats.domElement );
    }

    function animate()
    {
        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
        requestAnimationFrame( animate );
        render();

    }

    function render()
    {
    	// time = new Date().getTime();


    	if ( true )
   		{
        	sphereToon.position.y += toonVel;
        	// trace( sphereToon.position.y );

        	/*
        	sphereToon.scale.y -= 0.001;
        	sphereToon.scale.x += 0.001;
        	sphereToon.scale.z += 0.001;
        	*/

        	if ( sphereToon.position.y < sphereToon.boundRadius )
       		{
        		var height = sphereToon.boundRadius * 2 - ( sphereToon.boundRadius - sphereToon.position.y );
        		var scaleNew = height / ( sphereToon.boundRadius * 2 );
        		trace( scaleNew );
       			sphereToon.scale.y = scaleNew;
       			sphereToon.scale.x = 1 + ( ( 1 - scaleNew ) * 1.5 );
       			sphereToon.scale.z = 1 + ( ( 1 - scaleNew ) * 1.5 );

       			if ( sphereToon.position.y <= 25 )
   				{
   					toonVel *= -1;
   				}
       		}
   		}


    	if ( bounce )
   		{
    		vy += ay;

    		var posY = sphere.position.y + vy;


    		// Bounce or stop
    		if ( posY < sphere.boundRadius )
    		{
    			// var diffY = sphere.boundRadius - posY;
    			sphere.position.y = sphere.boundRadius;
    			vy = vy * 0.75 * -1;

    			if ( vy <= 2 )
   				{
   					vy = 0;
   					ay = 0;
   					bounce = false;
   				}

    			// trace( 'velocity = ' + vy );
    		}


    		sphere.position.y += vy;
   		}


        renderer.render( scene, camera );

        stats.update();
    }


function inspect( obj )
{
    for ( var k in obj )
   	{
   		trace( k + ' = ' + obj[ k ] );
   	}
}

function trace( str )
{
	console.log( str );
}


var bounce = true;

</script>

</body>

</html>
	<html>

	<head>

	<style type="text/css">

	body
	{
	overflow: hidden;
	background-color: #000;
	margin: 0;
	}

	</style>

	<script type="text/javascript" src="http://mrdoob.github.com/three.js/examples/js/Stats.js"></script>
	<script src="http://mrdoob.github.com/three.js/examples/js/RequestAnimationFrame.js"></script>
	<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
	</head>

	<body>

	<script>

	var date;

	var stats;

	var camera, scene, renderer,
	geometry, material;

	var sphere, sphereToon, plane;

	var vy = 0;
	var ay = -1;

	var toonVel = -1;

	init();
	animate();

	function init() {

	// camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.y = 500;
	camera.position.z = 500;

	scene = new THREE.Scene();

	var light = new THREE.SpotLight();
	light.position.set( 250, 1000, 500 );
	light.target.position.set( 0, 0, 0 );
	light.castShadow = true;
	scene.add( light );



	// SPHERE
	geometry = new THREE.SphereGeometry( 50, 16, 12 );
	material = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xFFFFFF, shininess: 50, opacity: 1, wireframe: false } );

	sphere = new THREE.Mesh( geometry, material );
	sphere.castShadow = true;
	sphere.position.set( 150, 500, 150 );
	scene.add( sphere );


	sphereToon = new THREE.Mesh( geometry, material );
	sphereToon.castShadow = true;
	sphereToon.position.set( -150, 500, 150 );
	scene.add( sphereToon );




	/*
	var boxGeometry = new THREE.SphereGeometry( 50, 16, 12 );
	// material = new THREE.MeshPhongMaterial( { color: 0xff0000, specular: 0xFFFFFF, shininess: 50, opacity: 1, wireframe: false } );

	var box = new THREE.Mesh( boxGeometry, material );
	box.castShadow = true;
	box.position.set( 150, 500, 150 );
	scene.add( box );
	*/



	// PLANE
	geometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

	material = new THREE.MeshLambertMaterial( { color: 0xffcc55, wireframe: false } );

	plane = new THREE.Mesh( geometry, material );
	plane.rotation.x = -Math.PI / 2;
	plane.position.set( 0, 0, 0 );
	plane.castShadow = false;
	plane.receiveShadow = true;

	scene.add( plane );



	camera.lookAt( plane.position );



	// renderer = new THREE.CanvasRenderer();
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.shadowMapEnabled = true;


	document.body.appendChild( renderer.domElement );


	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	document.body.appendChild( stats.domElement );
	}

	function animate()
	{
	// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
	requestAnimationFrame( animate );
	render();

	}

	function render()
	{
	// time = new Date().getTime();




	if ( true )
	{
	sphereToon.position.y += toonVel;
	// trace( sphereToon.position.y );

	/*
	sphereToon.scale.y -= 0.001;
	sphereToon.scale.x += 0.001;
	sphereToon.scale.z += 0.001;
	*/

	if ( sphereToon.position.y < sphereToon.boundRadius )
	{
	var height = sphereToon.boundRadius * 2 - ( sphereToon.boundRadius - sphereToon.position.y );
	var scaleNew = height / ( sphereToon.boundRadius * 2 );
	trace( scaleNew );
	sphereToon.scale.y = scaleNew;
	sphereToon.scale.x = 1 + ( ( 1 - scaleNew ) * 1.5 );
	sphereToon.scale.z = 1 + ( ( 1 - scaleNew ) * 1.5 );

	if ( sphereToon.position.y <= 25 )
	{
	toonVel *= -1;
	}
	}
	}




	if ( bounce )
	{
	vy += ay;

	var posY = sphere.position.y + vy;


	// Bounce or stop
	if ( posY < sphere.boundRadius )
	{
	// var diffY = sphere.boundRadius - posY;
	sphere.position.y = sphere.boundRadius;
	vy = vy * 0.75 * -1;

	if ( vy <= 2 )
	{
	vy = 0;
	ay = 0;
	bounce = false;
	}

	// trace( 'velocity = ' + vy );
	}


	sphere.position.y += vy;
	}


	renderer.render( scene, camera );

	stats.update();
	}



	function inspect( obj )
	{
	for ( var k in obj )
	{
	trace( k + ' = ' + obj[ k ] );
	}
	}

	function trace( str )
	{
	console.log( str );
	}


	var bounce = true;

	</script>

	</body>

	</html>