diff --git a/index.js b/index.js index 70a5553..0a9aa93 100644 --- a/index.js +++ b/index.js @@ -1,85 +1,169 @@ import * as THREE from "three"; + import { OrbitControls } from 'jsm/controls/OrbitControls.js'; + + import getStarfield from "./src/getStarfield.js"; + import { getFresnelMat } from "./src/getFresnelMat.js"; + + const w = window.innerWidth; + const h = window.innerHeight; + const scene = new THREE.Scene(); + const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); + camera.position.z = 5; + const renderer = new THREE.WebGLRenderer({ antialias: true }); + renderer.setSize(w, h); + document.body.appendChild(renderer.domElement); + // THREE.ColorManagement.enabled = true; + renderer.toneMapping = THREE.ACESFilmicToneMapping; + renderer.outputColorSpace = THREE.LinearSRGBColorSpace; + + const earthGroup = new THREE.Group(); + earthGroup.rotation.z = -23.4 * Math.PI / 180; + scene.add(earthGroup); + new OrbitControls(camera, renderer.domElement); + const detail = 12; + const loader = new THREE.TextureLoader(); + const geometry = new THREE.IcosahedronGeometry(1, detail); + const material = new THREE.MeshPhongMaterial({ + map: loader.load("./textures/00_earthmap1k.jpg"), + specularMap: loader.load("./textures/02_earthspec1k.jpg"), + bumpMap: loader.load("./textures/01_earthbump1k.jpg"), + bumpScale: 0.04, + }); + // material.map.colorSpace = THREE.SRGBColorSpace; + const earthMesh = new THREE.Mesh(geometry, material); + earthGroup.add(earthMesh); + + const lightsMat = new THREE.MeshBasicMaterial({ + map: loader.load("./textures/03_earthlights1k.jpg"), + blending: THREE.AdditiveBlending, + }); + const lightsMesh = new THREE.Mesh(geometry, lightsMat); + earthGroup.add(lightsMesh); + + const cloudsMat = new THREE.MeshStandardMaterial({ + map: loader.load("./textures/04_earthcloudmap.jpg"), + transparent: true, + opacity: 0.8, + blending: THREE.AdditiveBlending, + alphaMap: loader.load('./textures/05_earthcloudmaptrans.jpg'), + // alphaTest: 0.3, + }); + const cloudsMesh = new THREE.Mesh(geometry, cloudsMat); + cloudsMesh.scale.setScalar(1.003); + earthGroup.add(cloudsMesh); + + const fresnelMat = getFresnelMat(); + const glowMesh = new THREE.Mesh(geometry, fresnelMat); + glowMesh.scale.setScalar(1.01); + earthGroup.add(glowMesh); + + const stars = getStarfield({numStars: 2000}); + scene.add(stars); + + const sunLight = new THREE.DirectionalLight(0xffffff, 2.0); + sunLight.position.set(-2, 0.5, 1.5); + scene.add(sunLight); + + function animate() { + requestAnimationFrame(animate); + + earthMesh.rotation.y += 0.002; + lightsMesh.rotation.y += 0.002; + cloudsMesh.rotation.y += 0.0023; + glowMesh.rotation.y += 0.002; + stars.rotation.y -= 0.0002; + renderer.render(scene, camera); + } + + animate(); + + function handleWindowResize () { + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + renderer.setSize(window.innerWidth, window.innerHeight); + } -window.addEventListener('resize', handleWindowResize, false); \ No newline at end of file + +window.addEventListener('resize', handleWindowResize, false);