// Galaxy background - moonlit terrain with floating stars (function initGalaxy(){ console.clear(); var ww = window.innerWidth, wh = window.innerHeight; var renderer = new THREE.WebGLRenderer({ antialias: true, canvas: document.querySelector('#galaxy-canvas') }); renderer.setSize(ww, wh); renderer.setClearColor(0x001a2d); var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x001a2d, 80, 140); var camera = new THREE.PerspectiveCamera(45, ww/wh, 0.1, 200); camera.position.x = 70; camera.position.y = 30; camera.position.z = 5; camera.lookAt(new THREE.Vector3()); /* LIGHTS */ var moonLight = new THREE.PointLight(0xffffff, 2, 150); scene.add(moonLight); var moon; function createMoon() { var geometry = new THREE.SphereGeometry(8, 32, 32); var material = new THREE.MeshPhongMaterial({ color: 0x26fdd9, shininess: 15, emissive: 0x2bb2e6, emissiveIntensity: 0.8 }); moon = new THREE.Mesh(geometry, material); moon.position.x = -9; moon.position.z = -6.5; moon.position.y = 1; moon.rotation.y = -1; scene.add(moon); moonLight.position.copy(moon.position); moonLight.position.y += 4; var moonLight2 = new THREE.PointLight(0xffffff, 0.6, 150); scene.add(moonLight2); moonLight2.position.x += 20; moonLight2.position.y -= 20; moonLight2.position.z -= 25; } // Initialize simplex noise var noise = new SimplexNoise(); function createTerrain() { var geometry = new THREE.PlaneGeometry(150, 150, 120, 120); var m = new THREE.Matrix4(); m.makeRotationX(Math.PI * -0.5); geometry.applyMatrix4(m); var positions = geometry.attributes.position; for(var i = 0; i < positions.count; i++) { var x = positions.getX(i); var z = positions.getZ(i); var ratio = noise.noise3D(x * 0.03, z * 0.03, 0); positions.setY(i, ratio * 10); } positions.needsUpdate = true; geometry.computeVertexNormals(); var material = new THREE.MeshPhongMaterial({ color: 0x198257, emissive: 0x032f50 }); var plane = new THREE.Mesh(geometry, material); scene.add(plane); } var stars = new THREE.Group(); scene.add(stars); var starsLights = new THREE.Group(); scene.add(starsLights); var starsAmount = 20; function createStars() { var geometry = new THREE.SphereGeometry(0.3, 16, 16); var material = new THREE.MeshBasicMaterial({color: 0xffffff}); for(var i = 0; i < starsAmount; i++) { var star = new THREE.Mesh(geometry, material); star.position.x = (Math.random() - 0.5) * 150; star.position.z = (Math.random() - 0.5) * 150; var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0); star.position.y = ratio * 10 + 0.3; stars.add(star); var velX = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1); var velY = (Math.random() + 0.1) * 0.1 * (Math.random() < 0.5 ? -1 : 1); star.vel = new THREE.Vector2(velX, velY); var starLight = new THREE.PointLight(0xffffff, 0.8, 3); starLight.position.copy(star.position); starLight.position.y += 0.5; starsLights.add(starLight); } } function updateStar(star, index) { if(star.position.x < -75) { star.position.x = 75; } if(star.position.x > 75) { star.position.x = -75; } if(star.position.z < -75) { star.position.z = 75; } if(star.position.z > 75) { star.position.z = -75; } star.position.x += star.vel.x; star.position.z += star.vel.y; var ratio = noise.noise3D(star.position.x * 0.03, star.position.z * 0.03, 0); star.position.y = ratio * 10 + 0.3; starsLights.children[index].position.copy(star.position); starsLights.children[index].position.y += 0.5; } function render(a) { requestAnimationFrame(render); for(var i = 0; i < starsAmount; i++) { updateStar(stars.children[i], i); } renderer.render(scene, camera); } function onResize() { ww = window.innerWidth; wh = window.innerHeight; camera.aspect = ww / wh; camera.updateProjectionMatrix(); renderer.setSize(ww, wh); } createMoon(); createTerrain(); createStars(); requestAnimationFrame(render); window.addEventListener('resize', onResize); })();