3D Photorealistic Rotating Earth (No Clouds)

Speed

/* Fullscreen canvas container and simple UI */ html, body { height: 100%; margin: 0; background: #000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #fff; } #container { width: 100%; height: 100%; overflow: hidden; position: fixed; inset: 0; } #ui { position: fixed; left: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,0.35); padding: 8px 10px; border-radius: 8px; backdrop-filter: blur(4px); z-index: 10; } #ui button { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 6px 10px; border-radius: 6px; cursor: pointer; } #ui input[type="range"] { width: 140px; } /** * 3D Photorealistic Rotating Earth (No Clouds) * * Uses three.js (ES modules) from unpkg CDN. * The textures used are the planet maps hosted on threejs.org examples. * * - No cloud layer is added (explicitly omitted). * - The globe auto-rotates; UI allows pausing and changing speed. * * To run: open index.html in a modern browser (no build step required). */ import * as THREE from 'https://unpkg.com/three@0.152.2/build/three.module.js'; import { OrbitControls } from 'https://unpkg.com/three@0.152.2/examples/jsm/controls/OrbitControls.js'; const container = document.getElementById('container'); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.physicallyCorrectLights = true; renderer.outputEncoding = THREE.sRGBEncoding; container.appendChild(renderer.domElement); const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 3.6); // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 1.6; controls.maxDistance = 8; controls.rotateSpeed = 0.6; // Lighting: directional "sun" + subtle fill const sun = new THREE.DirectionalLight(0xffffff, 1.1); sun.position.set(5, 2, 5); scene.add(sun); const fill = new THREE.AmbientLight(0xffffff, 0.25); scene.add(fill); // Create Earth const RADIUS = 1.0; const SEGMENTS = 64; const loader = new THREE.TextureLoader(); // High-quality color, bump and specular maps (no clouds). // You can replace these URLs with higher-res local files if desired. const TEXTURE_URL = 'https://threejs.org/examples/textures/planets/earthmap1k.jpg'; const BUMP_URL = 'https://threejs.org/examples/textures/planets/earthbump1k.jpg'; const SPECULAR_URL = 'https://threejs.org/examples/textures/planets/earthspec1k.jpg'; const [map, bumpMap, specularMap] = await Promise.all([ loader.loadAsync(TEXTURE_URL), loader.loadAsync(BUMP_URL), loader.loadAsync(SPECULAR_URL) ]); map.encoding = THREE.sRGBEncoding; bumpMap.encoding = THREE.LinearEncoding; specularMap.encoding = THREE.LinearEncoding; const geometry = new THREE.SphereGeometry(RADIUS, SEGMENTS, SEGMENTS); const material = new THREE.MeshPhongMaterial({ map: map, bumpMap: bumpMap, bumpScale: 0.03, specularMap: specularMap, specular: new THREE.Color(0x333333), shininess: 8 }); const earth = new THREE.Mesh(geometry, material); scene.add(earth); // Add subtle rim/atmosphere glow (purely visual, not a physical atmosphere) const atmosphereGeometry = new THREE.SphereGeometry(RADIUS * 1.02, SEGMENTS, SEGMENTS); const atmosphereMaterial = new THREE.ShaderMaterial({ vertexShader: ` varying vec3 vNormal; void main(){ vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` varying vec3 vNormal; void main(){ float intensity = pow(0.6 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0); vec3 glow = vec3(0.2, 0.45, 0.9) * intensity; gl_FragColor = vec4(glow, intensity); } `, blending: THREE.AdditiveBlending, side: THREE.BackSide, transparent: true }); const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial); scene.add(atmosphere); // Ensure initially all continents are visible over rotation: camera starts facing a mid-Atlantic view. // Auto-rotation logic: rotates Earth around Y axis. let rotateEnabled = true; let rotationSpeed = 0.2; // radians per second // UI const toggleBtn = document.getElementById('toggle-rotate'); const speedInput = document.getElementById('speed'); toggleBtn.addEventListener('click', () => { rotateEnabled = !rotateEnabled; toggleBtn.textContent = rotateEnabled ? 'Pause' : 'Play'; }); speedInput.addEventListener('input', (e) => { rotationSpeed = parseFloat(e.target.value); }); // Pause auto-rotate briefly when user interacts with controls let userInteracting = false; let lastInteractionTime = 0; const INTERACTION_PAUSE_MS = 2000; controls.addEventListener('start', () => { userInteracting = true; lastInteractionTime = performance.now(); }); controls.addEventListener('end', () => { lastInteractionTime = performance.now(); }); // Render loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); const now = performance.now(); // Resume auto-rotation after a short delay following user interaction if (userInteracting && now - lastInteractionTime > INTERACTION_PAUSE_MS) { userInteracting = false; } if (rotateEnabled && !userInteracting) { earth.rotation.y += rotationSpeed * dt; } // Slight slow tilt to show polar regions periodically (keeps all continents in view while rotating) earth.rotation.x = Math.sin(clock.elapsedTime * 0.05) * 0.05; controls.update(); renderer.render(scene, camera); } animate(); // Handle resizing function onWindowResize() { const w = window.innerWidth; const h = window.innerHeight; camera.aspect = w / h; camera.updateProjectionMatrix(); renderer.setSize(w, h); } window.addEventListener('resize', onWindowResize, false); // Expose simple API in case you want to control from console window.earthApp = { start: () => (rotateEnabled = true), stop: () => (rotateEnabled = false), setSpeed: (v) => { rotationSpeed = v; speedInput.value = v; }, scene, camera, renderer, earth };