xxxxxxxxxx<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>