Three.js를 사용한 포토리얼리스틱 3D 지구 시뮬레이션

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Earth Simulation - Photorealistic</title> <style> body { margin: 0; overflow: hidden; background-color: black; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #info { position: absolute; bottom: 20px; left: 20px; color: rgba(255, 255, 255, 0.7); font-size: 14px; background: rgba(0, 0, 0, 0.5); padding: 8px 16px; border-radius: 20px; backdrop-filter: blur(4px); pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: 0.5px; } #info i { opacity: 0.8; margin-right: 8px; } .controls-hint { position: absolute; bottom: 20px; right: 20px; color: rgba(255, 255, 255, 0.5); font-size: 12px; background: rgba(0, 0, 0, 0.4); padding: 6px 12px; border-radius: 16px; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); pointer-events: none; font-weight: 300; } .controls-hint span { background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 4px; margin: 0 4px; font-family: monospace; } </style> </head> <body> <div id="info">🌍 Photorealistic Earth - Day/Night & Clouds</div> <div class="controls-hint"><span>🖱</span> Drag to rotate | <span>Scroll</span> zoom | <span>Right-drag</span> pan</div> <!-- Three.js core and OrbitControls --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> <script> (function() { // --- Configuration --- const CONFIG = { earthRadius: 1.0, cloudRadius: 1.02, cloudRotationSpeed: 0.002, // independent rotation earthRotationSpeed: 0.0008, starFieldRadius: 50.0, sunIntensity: 1.8, ambientLightColor: new THREE.Color(0x223344), sunDirection: new THREE.Vector3(5, 2, 3).normalize() // directional light }; // --- Scene setup --- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200.0); camera.position.set(0, 0.5, 3.2); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1.0); renderer.shadowMapEnabled = false; // we use custom lighting document.body.appendChild(renderer.domElement); // --- Controls --- const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.1; controls.rotateSpeed = 0.8; controls.zoomSpeed = 1.0; controls.panSpeed = 0.8; controls.enableZoom = true; controls.enablePan = true; controls.autoRotate = false; controls.minDistance = 1.5; controls.maxDistance = 8.0; // --- Lights --- // Directional sun light (parallel rays) const sunLight = new THREE.DirectionalLight(0xffffff, CONFIG.sunIntensity); sunLight.position = CONFIG.sunDirection.clone().multiplyScalar(10); // far away sunLight.target = new THREE.Vector3(0, 0, 0); scene.addLight(sunLight); // Ambient fill light (soft blue) const ambientLight = new THREE.AmbientLight(0x445566, 0.35); scene.addLight(ambientLight); // --- Helper to load texture with fallback (using built-in textures from Three.js examples) --- function loadTexture(url, fallbackColor) { const loader = new THREE.TextureLoader(); const tex = loader.load(url); if (tex) return tex; // fallback: create a solid color texture console.warn('Texture load failed, using fallback color', url); return new THREE.Texture(new THREE.Color(fallbackColor)); } // --- Earth Group --- const earthGroup = new THREE.Group(); scene.add(earthGroup); // 1. Earth sphere with high-res textures (day, night, specular) const earthGeo = new THREE.SphereGeometry(CONFIG.earthRadius, 64, 64); // Day texture (high-res from Three.js examples) const dayTex = loadTexture('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg', 0x2288ff); // Night lights texture (city lights) const nightTex = loadTexture('https://threejs.org/examples/textures/planets/earth_lights_2048.png', 0x000000); // Specular map for oceans (using a simple grayscale map - we'll use a cloud-free ocean mask) // We'll use a standard specular map from a public source, but to keep self-contained, we generate a simple one. // For realism, we'll use a texture that highlights oceans: we can use a blue-mask texture. // Since we cannot guarantee external URL, we create a procedural specular map: use a texture with ocean highlights. // We'll use a texture from Three.js examples: earth_specular_2048.jpg (if exists) else fallback. const specTex = loadTexture('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg', 0x333333); // Material: custom to combine day/night and specular const earthMaterial = new THREE.Material( new THREE.Color(0xffffff), // base new THREE.Color(0xffffff), // ambient new THREE.Color(0xffffff), // diffuse new THREE.Color(0xffffff), // specular 0.3, // shininess 0.0, // transparency dayTex, nightTex, specTex ); // We need to set flags for using night and specular maps earthMaterial.nightMap = nightTex; earthMaterial.specularMap = specTex; earthMaterial.dayMap = dayTex; earthMaterial.useNightMap = true; earthMaterial.useSpecularMap = true; const earthMesh = new THREE.Mesh(earthGeo, earthMaterial); earthMesh.castShadow = true; earthMesh.receiveShadow = true; earthGroup.add(earthMesh); // 2. Cloud layer (semi-transparent, independent rotation) const cloudGeo = new THREE.SphereGeometry(CONFIG.cloudRadius, 48, 48); const cloudTex = loadTexture('https://threejs.org/examples/textures/planets/earth_clouds_1024.png', 0xffffff); // Make material transparent const cloudMaterial = new THREE.Material( new THREE.Color(0xffffff), new THREE.Color(0xffffff), new THREE.Color(0xffffff), new THREE.Color(0xffffff), 0.1, // low shininess 0.35, // transparency (alpha) cloudTex, null, null ); cloudMaterial.transparent = true; cloudMaterial.opacity = 0.35; cloudMaterial.diffuseMap = cloudTex; const cloudMesh = new THREE.Mesh(cloudGeo, cloudMaterial); cloudMesh.castShadow = false; // clouds don't cast strong shadows cloudMesh.receiveShadow = true; // Slight offset to avoid clipping cloudMesh.scale(1.0, 1.0, 1.0); earthGroup.add(cloudMesh); // 3. Starfield background (sphere with inside texture) const starGeo = new THREE.SphereGeometry(CONFIG.starFieldRadius, 32, 32); // Use a star texture from Three.js examples (milky way) const starTex = loadTexture('https://threejs.org/examples/textures/planets/stars_milky_way.jpg', 0x000000); const starMaterial = new THREE.Material( new THREE.Color(0xffffff), new THREE.Color(0xffffff), new THREE.Color(0xffffff), new THREE.Color(0xffffff), 0.0, 0.0, starTex, null, null ); const starSphere = new THREE.Mesh(starGeo, starMaterial); // Invert normals to see inside starSphere.scale(-1, -1, -1); starSphere.castShadow = false; starSphere.receiveShadow = false; scene.add(starSphere); // --- Animation state --- let earthAngle = 0.0; let cloudAngle = 0.0; // --- Resize handler --- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; renderer.setSize(window.innerWidth, window.innerHeight); }); // --- Main loop --- function animate() { requestAnimationFrame(animate); // Rotate Earth (around Y axis) earthAngle += CONFIG.earthRotationSpeed; earthGroup.rotation.y = earthAngle; // Rotate clouds independently (slightly faster) cloudAngle += CONFIG.cloudRotationSpeed; cloudMesh.rotation.y = cloudAngle; // Update controls controls.update(); // Render renderer.render(scene, camera); } // Start animation animate(); // --- Fallback for texture loading issues: if any texture fails, we still have a decent look // But we already have fallback colors. // Additional polish: set camera far enough to see stars camera.far = 200.0; // Small fix: ensure sun direction is consistent with light position // We already set light position based on direction. // For better visual, adjust ambient light intensity ambientLight.intensity = 0.25; // Ensure clouds are slightly transparent in renderer renderer.transparent = true; // Set background to black (already) console.log('Earth simulation started. Enjoy!'); })(); </script> </body> </html>