See raw JS.
//http://planetpixelemporium.com/planets.html = planet textures const PLANETS = new Array(8); const MAXSTEPS = 1000; const SCREENSHOT_STEP = 50; var counter = 0; const MAXPOS = 3000 ; const startRadiusConst = MAXPOS * 2 ; const maxRadiusConst = MAXPOS * 5 ; const INNERPOS = 2000; const SKYCOLOR = 0x000000; var SPINSPEED = 0.3; const MIN_DISTANCE = 1000 * 3 ; var clock = new THREE.Clock(); const CLOCKTICK = 100; var earth, sun, pluto, venus, jupiter, mars, neptune, mercury; var timer = new THREE.Clock(); var particleSystem, particleCount, particles; var redCount, reds, redMaterial, redParticles; var messages = new Array(4); // will store answer values var end = false; function initPlanets() { /* need to add light in order to use MeshPhongMaterial */ var light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 0, 1, 1 ).normalize(); threeworld.scene.add(light); var earth_geometry = new THREE.SphereGeometry(1000, 32, 32); var earth_material = new THREE.MeshPhongMaterial(); earth_material.map = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthmaterial.jpg"); earth_material.bumpMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthbump.jpg"); earth_material.bumpScale = 100; earth_material.specularMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/earthspec.jpg"); earth = new THREE.Mesh(earth_geometry, earth_material); PLANETS[counter] = earth; counter++; sun = new THREE.Mesh( new THREE.SphereGeometry(1000, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/sunmap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = sun; counter++; mars = new THREE.Mesh( new THREE.SphereGeometry(1000, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/marsmap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = mars; counter++; mercury = new THREE.Mesh( new THREE.SphereGeometry(900, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/mercurymap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = mercury; counter++; venus = new THREE.Mesh( new THREE.SphereGeometry(1500, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/venusmap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = venus; counter++; var pluto_geometry = new THREE.SphereGeometry(900, 32, 32); var pluto_material = new THREE.MeshPhongMaterial(); pluto_material.map = THREE.ImageUtils.loadTexture("/uploads/aravicl2/plutomap.jpg"); pluto_material.bumpMap = THREE.ImageUtils.loadTexture("/uploads/aravicl2/plutobump.jpg"); pluto_material.bumpScale = 100; pluto = new THREE.Mesh(pluto_geometry, pluto_material); PLANETS[counter] = pluto; counter++; jupiter = new THREE.Mesh( new THREE.SphereGeometry(1500, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/jupitermap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = jupiter; counter++; neptune = new THREE.Mesh( new THREE.SphereGeometry(500, 32, 32), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/neptunemap.jpg"), side: THREE.BackSide }) ); PLANETS[counter] = neptune; counter++; } function addBackground() { var background = new THREE.Mesh( new THREE.SphereGeometry(9000, 64, 64), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/galaxy.png"), side: THREE.BackSide }) ); threeworld.scene.add(background); } function randomisePositions() { for (var i = 0 ; i < counter; i++) { var proposedLocation; do { proposedLocation = new THREE.Vector3(randomintAtoB(-INNERPOS, INNERPOS), randomintAtoB(-INNERPOS, INNERPOS), randomintAtoB(-INNERPOS, INNERPOS)); } while (collision(proposedLocation, i)); PLANETS[i].position.copy(proposedLocation); } } function collision (proposedMove, p) { for (var i = 0 ; i < counter; i++) { if (i != p) { var d = dist (proposedMove, i); if (d < MIN_DISTANCE) { return true; } } } return false; } function dist(proposedMove, i) { return ((PLANETS[i].position).distanceTo (proposedMove)); } function drawPlanets() { for(var i = 0; i < counter; i++) { threeworld.scene.add(PLANETS[i]); } randomisePositions(); } function spin() // spin the planets { var time = clock.getElapsedTime(); for(var i = 0; i < counter; i++) { PLANETS[i].rotation.set((time * SPINSPEED), (time * SPINSPEED), (time * SPINSPEED)); } } function randomfloatAtoB ( A, B ) { return ( A + ( Math.random() * (B-A) ) ); } function randomintAtoB ( A, B ) { return ( Math.round ( randomfloatAtoB ( A, B ) ) ); } function initParticles() { particleCount = 1000; particles = new THREE.Geometry(); pMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 100, blending: THREE.AdditiveBlending, map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/star.png"), transparent: true }); for(var i = 0; i < particleCount; i++) { var x = randomintAtoB(-5000, 5000); var y = randomintAtoB(-5000, 5000); var z = randomintAtoB(-5000, 5000); particle = new THREE.Vector3(x, y, z); particles.vertices.push(particle); } particleSystem = new THREE.Points(particles, pMaterial); particleSystem.sortParticles = true; threeworld.scene.add(particleSystem); } function initRedStars() { redCount = randomintAtoB(0, 15); redParticles = new THREE.Geometry(); redMaterial = new THREE.PointsMaterial({color: 0xffffff, size: 700, map: THREE.ImageUtils.loadTexture("/uploads/aravicl2/redstar.jpg"), blending: THREE.AdditiveBlending, transparent: true }); for(var i = 0; i < redCount; i++) { var x = randomintAtoB(-5000, 5000); var y = randomintAtoB(-5000, 5000); var z = randomintAtoB(-5000, 5000); var redStar = new THREE.Vector3(x, y, z); redParticles.vertices.push(redStar); } reds = new THREE.Points(redParticles, redMaterial); reds.sortParticles = true; threeworld.scene.add(reds); } function moveParticles() { particleSystem.rotation.y += 0.01; var pCount = particleCount; while(pCount--) { var particle = particles.vertices[pCount]; particle.y -= randomintAtoB(-5000, 5000); particle.x -= randomintAtoB(-5000, 5000); particle.y -= randomintAtoB(-5000, 5000); } } function moveRedStars() { reds.rotation.y += 0.2; var pCount = redCount; while(pCount--) { var particle = redParticles.vertices[pCount]; particle.y -= randomintAtoB(-5000, 5000); particle.x -= randomintAtoB(-5000, 5000); particle.y -= randomintAtoB(-5000, 5000); } } function writeInstructions() { var instructions = "<font size=5>Quick! Count the <font color=red>red</font> stars. <br>You have 10 seconds</font><br><font size=5>Timer: " + Math.round(timer.getElapsedTime()) +"</font>"; $("#user_span3").html(instructions); } function options() { /* place random numbers and answers into option for user */ messages = new Array(4); messages[randomintAtoB(0,3)] = redCount; for(var i = 0; i < messages.length; i++) { // make sure there is no duplication var random = randomintAtoB(0, 15); if(messages[i] == null && random != redCount) messages[i] = random; } var message = "<font size=5>How many red stars did you see?<br> <B> A)</B> " + messages[0] + "<br><B> B)</B> " + messages[1] + "<br><B> C)</B> " + messages[2] + "<br><B> D)</B> " + messages[3] + "</font>"; $("#user_span3").html(message); } function takeAnswer(event) { var code = event.keyCode; if(code == 65) { if(messages[0] == redCount) { win(); } else loose(); } if(code == 66) { if(messages[1] == redCount) { win(); } else loose(); } if(code == 67) { if(messages[2] == redCount) { win(); } else loose(); } if(code == 68) { if(messages[3] == redCount) { win(); } else loose(); } } function startClock() { timer.start(); } function win() { var message = "<font color=green size=5> <B>Wooohooooo. You won. <br></B></font>The answer was: " + redCount; $("#user_span3").html(message); // put music element in one of the spans var x = "<audio id=theaudio src=/uploads/aravicl2/yay.mp3 autoplay loop> </audio>" ; $("#user_span1").html( x ); } function loose() { var message = "<font color=red size=5> <B>Booohooo. You lost. <br></B></font>The answer was: " + redCount; $("#user_span3").html(message); var x = "<audio id=theaudio src=/uploads/aravicl2/boo.mp3 autoplay loop> </audio>" ; $("#user_span1").html( x ); } function World() { this.endCondition; this.newRun = function() { this.endCondition = false; if(true) { threeworld.init3d ( startRadiusConst, maxRadiusConst, SKYCOLOR ); initPlanets(); addBackground(); drawPlanets(); initParticles(); writeInstructions(); initRedStars(); startClock(); initMusic(); } }; this.getState = function() { return ( null ); }; this.nextStep = function() { var a = 4; spin(); musicPlay(); document.addEventListener( 'keyup', takeAnswer); if(true) { moveParticles(); moveRedStars(); writeInstructions(); } if(timer.getElapsedTime() > 10) { this.endCondition = true; threeworld.scene.remove(reds); musicPause(); timer.stop(); options(); } }; this.endRun = function() { }; this.getScore = function() { return 0; }; } function initMusic() { // put music element in one of the spans var x = "<audio id=theaudio src=/uploads/aravicl2/countdown.mp3 autoplay loop> </audio>" ; $("#user_span1").html( x ); } function musicPlay() { // jQuery does not seem to parse pause() etc. so find the element the old way: document.getElementById('theaudio').play(); } function musicPause() { document.getElementById('theaudio').pause(); } function stopMusic() { document.getElementById('theaudio').stop(); }