threejs-sphere

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		
		<script src="three.min.js"></script>
		<script>

var camera, scene, renderer;
			var geometry, material, mesh;

function setup() {

//set up rendere and camera
				var W = innerWidth, H = innerHeight;

renderer = new THREE.WebGLRenderer();
				renderer.setSize( W, H );
				document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 45, W/H, .1, 10000 );
				camera.position.z = 300;

scene = new THREE.Scene();
				
				
				var sphereMaterial = new THREE.MeshLambertMaterial(
				{
				    color: 0xCC0000
				});

// set up the sphere vars
				var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
				// we will cover the sphereMaterial next!
				sphere = new THREE.Mesh(
				   new THREE.SphereGeometry(radius, segments, rings),
				   sphereMaterial);

// add the sphere to the scene
				scene.add(sphere);

// and the camera
				scene.add(camera);

// create a point light
				var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
				pointLight.position.x = 10;
				pointLight.position.y = 50;
				pointLight.position.z = 130;

// add to the scene
				scene.add(pointLight);
			}

setup()
			draw()

var t = 0
			var startTime = new Date()
			function draw(){
				t = new Date() - startTime;
				s = t % 2000

if (t > 0){
					// create a point light
					var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
					pointLight.position.x = 10 + -Math.random()*100;
					pointLight.position.y = 50 + -Math.random()*100;
					pointLight.position.z = 300;

// add to the scene
					scene.add(pointLight);					
				}

sphere.position.x = s/5 - 250
				sphere.position.y = 50 - (s/10)*s/1000

requestAnimationFrame(draw)
				renderer.render(scene, camera)
			}

</script>
		
	</body>
</html>