This repository was archived by the owner on Jan 24, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
executable file
·226 lines (195 loc) · 6.34 KB
/
index.html
1
<!doctype html><html> <head> <meta charset="utf-8" /> <title>Galaxy in Three.js</title> <style> #container { background: #000; width: 400px; height: 300px; } </style> </head> <body> <div id="container"></div> </body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="three.js"></script> <script type="text/javascript"> // @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/ window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { window.setTimeout(callback, 1000 / 60); }; })(); var cameraWidth = 800, cameraHeight = 600; var $container = $('#container'); var renderer = new THREE.WebGLRenderer(); var camera = new THREE.Camera(45, cameraWidth / cameraHeight, 0.1, 10000); var scene = new THREE.Scene(); //position the camera far back and a little up for a better perspective camera.position.z = 1000; camera.position.y = 400; renderer.setClearColor(0x000000, 1); renderer.setSize(cameraWidth, cameraHeight); $container.append(renderer.domElement); // create the particle geometries and materials var outerRing = new THREE.Geometry(); var outerClouds = new THREE.Geometry(); var innerRing = new THREE.Geometry(); var innerClouds = new THREE.Geometry(); var outerStars = new THREE.Geometry(); var starMaterial = new THREE.ParticleBasicMaterial({ size: 20, map: THREE.ImageUtils.loadTexture( "star.png" ), blending: THREE.AdditiveBlending, vertexColors: true, transparent: true, depthTest: false }); starMaterial.color.setHSV(1.0, 0.0, 1.0); var cloudMaterial = new THREE.ParticleBasicMaterial({ size: 300, map: THREE.ImageUtils.loadTexture( "cloud.png" ), blending: THREE.AdditiveBlending, vertexColors: true, transparent: true, depthTest: false }); // now create the individual particles var color = []; for(var p = 0; p < 1800; p++) { var angle = Math.random() * Math.PI * 2; var radius = Math.random() * 200 + 400; var pX = Math.cos(angle) * radius, pY = Math.random() * 70 - 35, pZ = Math.sin(angle) * radius, particle = new THREE.Vertex( new THREE.Vector3(pX, pY, pZ) ); outerRing.vertices.push(particle); var h = Math.random() * (291 - 185) + 185, s = Math.random() * (66 - 34) + 34, v = Math.random() * (100 - 72) + 72; color[p] = new THREE.Color(0xffffff); color[p].setHSV(h / 360, s / 100, v / 100); } outerRing.colors = color; color = []; for (var p = 0; p < 5000; p++) { var angle = Math.random() * Math.PI * 2; var radius = Math.random() * 350 + 1; var pX = Math.cos(angle) * radius, pY = Math.random() * 200 * (1 / radius) * (Math.random() > .5 ? 1 : -1), pZ = Math.sin(angle) * radius, particle = new THREE.Vertex( new THREE.Vector3(pX, pY, pZ) ); innerRing.vertices.push(particle); var h = Math.random() * (291 - 185) + 185, s = Math.random() * (66 - 34) + 34, v = Math.random() * (100 - 72) + 72; color[p] = new THREE.Color(0xffffff); color[p].setHSV(h / 360, s / 100, v / 100); } innerRing.colors = color; color = []; for (var p = 0; p < 200; p++) { var angle = Math.random() * Math.PI * 2; var radius = Math.random() * 350 + 1; var pX = Math.cos(angle) * radius, pY = Math.random() * 200 * (1 / radius) * (Math.random() > .5 ? 1 : -1), pZ = Math.sin(angle) * radius, particle = new THREE.Vertex( new THREE.Vector3(pX, pY, pZ) ); innerClouds.vertices.push(particle); var h = Math.random() * (291 - 185) + 185, s = Math.random() * (66 - 34) + 34, v = Math.random() * (100 - 72) + 72; color[p] = new THREE.Color(0xffffff); color[p].setHSV(h / 360, s / 100, v / 100); } innerClouds.colors = color; color = []; for(var p = 0; p < 200; p++) { var angle = Math.random() * Math.PI * 2; var radius = Math.random() * 200 + 400; var pX = Math.cos(angle) * radius, pY = Math.random() * 70 - 35, pZ = Math.sin(angle) * radius, particle = new THREE.Vertex( new THREE.Vector3(pX, pY, pZ) ); outerClouds.vertices.push(particle); var h = Math.random() * (291 - 185) + 185, s = Math.random() * (66 - 34) + 34, v = Math.random() * (100 - 72) + 72; color[p] = new THREE.Color(0xffffff); color[p].setHSV(h / 360, s / 100, v / 100); } outerClouds.colors = color; color = []; for(var p = 0; p < 1000; p++) { var radius = Math.random() * 1000 + 1000; var z = Math.random() * (2 * radius) - radius; var phi = Math.random() * Math.PI * 2; var theta = Math.asin(z / radius); var pX = Math.cos(theta) * Math.cos(phi) * radius, pY = Math.cos(theta) * Math.sin(phi) * radius, pZ = z, particle = new THREE.Vertex( new THREE.Vector3(pX, pY, pZ) ); outerStars.vertices.push(particle); color[p] = new THREE.Color(0xffffff); } outerStars.colors = color; // create the particle systems var outerSystem = new THREE.ParticleSystem(outerRing, starMaterial); var innerSystem = new THREE.ParticleSystem(innerRing, starMaterial); var cloudSystem = new THREE.ParticleSystem(innerClouds, cloudMaterial); var cloudSystem2 = new THREE.ParticleSystem(outerClouds, cloudMaterial); var starSystem = new THREE.ParticleSystem(outerStars, starMaterial); outerSystem.sortParticles = true; innerSystem.sortParticles = true; cloudSystem.sortParticles = true; cloudSystem2.sortParticles = true; starSystem.sortParticles = true; // systems to the scene scene.addChild(outerSystem); scene.addChild(innerSystem); scene.addChild(cloudSystem); scene.addChild(cloudSystem2); scene.addChild(starSystem); function update() { // add some rotation to the systems outerSystem.rotation.y += 0.0007; //outerSystem.rotation.z = 0.3513; //outerSystem.rotation.z += 0.0013; cloudSystem2.rotation.y += 0.0005; //cloudSystem2.rotation.z = 0.3513; //cloudSystem2.rotation.z += 0.0013; innerSystem.rotation.y += 0.0011; innerSystem.rotation.z = 0.3513; //innerSystem.rotation.z += 0.0013; cloudSystem.rotation.y += 0.0011; cloudSystem.rotation.z = 0.3513; starSystem.rotation.y += 0.0005; //cloudSystem.rotation.z += 0.0013; renderer.render(scene, camera); requestAnimFrame(update); } requestAnimFrame(update); </script></html>