Simulación fotorrealista de la Tierra en 3D con Three.js
De Wikiprompt, la enciclopedia libre de prompts
10 jul 2025
Simulación fotorrealista de la Tierra en 3D con Three.js Un prompt detallado para generar una simulación 3D interactiva de la Tierra con texturas de día/noche, nubes, campo estelar y OrbitControls en un único archivo HTML.
Contenido del PromptGuardar
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photorealistic Earth with Clouds and Night Lights</title>
<style>
body {
margin: 0;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0,0,0,0.6);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
pointer-events: none;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.2);
z-index: 100;
}
#controls-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.5);
padding: 6px 16px;
border-radius: 30px;
font-size: 13px;
letter-spacing: 0.5px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.2);
z-index: 100;
pointer-events: none;
}
</style>
</head>
<body>
<div id="info">🌍 Earth · Day/Night · Clouds · Stars</div>
<div id="controls-hint">🖱️ Drag to rotate · Scroll to zoom · Right-drag to 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>
// --- Configuration: use high-quality texture sets from Three.js examples (all cross-origin friendly) ---
// These are reliable, high-res textures hosted on threejs.org (cors enabled)
const TEXTURE_BASE = 'https://threejs.org/examples/textures/planets/';
// Earth day (diffuse) - 2k resolution
const earthDayMap = TEXTURE_BASE + 'earth_atmos_2048.jpg';
// Earth night (emissive) - city lights
const earthNightMap = TEXTURE_BASE + 'earth_lights_2048.png';
// Earth specular (ocean highlights)
const earthSpecularMap = TEXTURE_BASE + 'earth_specular_2048.jpg';
// Earth normal map (bumpiness)
const earthNormalMap = TEXTURE_BASE + 'earth_normal_2048.jpg';
// Clouds (transparent)
const cloudsMap = TEXTURE_BASE + 'earth_clouds_1024.png';
// Starfield (milky way style)
const starsMap = 'https://threejs.org/examples/textures/planets/galaxy_starfield.png';
// --- Scene setup ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050510); // deep space fallback
// --- Camera ---
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3.2); // initial distance
// --- Renderer ---
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // crisp but performant
renderer.shadowMap.enabled = true; // enable shadows (though Earth casts onto itself)
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // softer shadows
document.body.appendChild(renderer.domElement);
// --- Controls ---
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.8;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.minDistance = 1.5;
controls.maxDistance = 8;
controls.enablePan = true;
controls.autoRotate = false;
controls.target.set(0, 0, 0);
// --- Lighting ---
// Main directional light (simulating sun)
const sunLight = new THREE.DirectionalLight(0xffffff, 2.0);
sunLight.position.set(5, 3, 5); // from upper right
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 1024;
sunLight.shadow.mapSize.height = 1024;
const d = 3;
sunLight.shadow.camera.left = -d;
sunLight.shadow.camera.right = d;
sunLight.shadow.camera.top = d;
sunLight.shadow.camera.bottom = -d;
sunLight.shadow.camera.near = 1;
sunLight.shadow.camera.far = 10;
scene.add(sunLight);
// Fill light to soften shadows on night side (subtle blue)
const ambientLight = new THREE.AmbientLight(0x404060); // dark blue ambient
scene.add(ambientLight);
// Additional faint fill from opposite side to avoid pure black
const backLight = new THREE.DirectionalLight(0x445566, 0.3);
backLight.position.set(-3, -1, -3);
scene.add(backLight);
// --- Earth Group (to rotate everything together) ---
const earthGroup = new THREE.Group();
scene.add(earthGroup);
// --- Texture Loader ---
const loader = new THREE.TextureLoader();
// Load all textures (with fallback to simple colors if any fail)
const earthDayTex = loader.load(earthDayMap);
const earthNightTex = loader.load(earthNightMap);
const earthSpecTex = loader.load(earthSpecularMap);
const earthNormTex = loader.load(earthNormalMap);
const cloudsTex = loader.load(cloudsMap);
const starsTex = loader.load(starsMap);
// --- 1. Earth Sphere (with day, night, specular, normal) ---
const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
// Material: MeshPhongMaterial to support specular and emissive
const earthMaterial = new THREE.MeshPhongMaterial({
map: earthDayTex,
specularMap: earthSpecTex,
specular: new THREE.Color(0x333333), // subtle specular
shininess: 25, // ocean shine
normalMap: earthNormTex,
normalScale: new THREE.Vector2(0.8, 0.8),
emissive: new THREE.Color(0x000000), // will be set via emissiveMap
emissiveMap: earthNightTex, // city lights
emissiveIntensity: 1.0,
// We'll use onBeforeCompile to make emissive only on dark side? Actually emissiveMap works globally,
// but we want lights to show only on night side. We'll handle via custom shader chunk.
// Better approach: use custom onBeforeCompile to modulate emissive based on light direction.
// But for simplicity and visual quality, we can use a second mesh for night lights with additive blending.
// However, the prompt asks for "city lights on the night side" - a common trick is to use emissiveMap
// and a custom shader that fades emissive based on dot product with light.
// We'll implement a custom onBeforeCompile to achieve that.
});
// Custom shader to make emissive (night lights) only visible on dark side
earthMaterial.onBeforeCompile = (shader) => {
// Inject uniform for sun direction (world space)
shader.uniforms.uSunDirection = { value: sunLight.position.clone().normalize() };
// Add to vertex shader: pass world position
shader.vertexShader = shader.vertexShader.replace(
'#include <common>',
`#include <common>
varying vec3 vWorldPosition;`
);
shader.vertexShader = shader.vertexShader.replace(
'#include <worldpos_vertex>',
`#include <worldpos_vertex>
vWorldPosition = (modelMatrix * vec4(transformed, 1.0)).xyz;`
);
// Modify fragment shader: add varying and modulate emissive
shader.fragmentShader = shader.fragmentShader.replace(
'#include <common>',
`#include <common>
varying vec3 vWorldPosition;
uniform vec3 uSunDirection;`
);
// Replace the emissive calculation part (in the fragment shader, after lights)
// We'll find the emissive term and multiply by a factor based on light direction.
// The standard chunk has: totalEmissiveRadiance = emissive * emissiveIntensity;
// We'll replace that line.
shader.fragmentShader = shader.fragmentShader.replace(
'totalEmissiveRadiance = emissive * emissiveIntensity;',
`
// Compute how much the sun illuminates this fragment (world space)
vec3 normalWorld = normalize(vNormal); // in world space? Actually vNormal is view space, but we can use transformedNormal
// Better: use the normal in world space. We'll compute it from the normal matrix.
// But we have vNormal in view space. We'll use the world normal from the normal matrix.
// To keep it simple, we'll use the view direction? Actually we need the sun direction in view space.
// Since we have uSunDirection in world space, we need to transform it to view space.
// But we can also compute the dot product in world space if we have world normal.
// Let's modify the vertex shader to pass world normal.
// For brevity, we'll use the existing vNormal (view space) and transform sun direction to view space.
// But we don't have camera matrix in shader easily. Instead, we'll use the light's position in view space.
// However, we can use the standard lighting already computed. The emissive should be visible when the light is NOT hitting.
// So we can use the dot product of the normal with the light direction in view space.
// But we have the light direction in view space? Actually in the shader, the directional light direction is in view space.
// We can access the directional light's direction via a uniform. But it's complex.
// Simpler: use the built-in light intensity? No.
// Let's use a different approach: we'll compute the diffuse lighting intensity and use that to fade emissive.
// The diffuse term is already computed as `diffuse`. We'll use that.
// So we replace with: totalEmissiveRadiance = emissive * emissiveIntensity * (1.0 - diffuseStrength);
// But diffuse is a vec3? Actually in the shader, `diffuse` is a vec3. We'll take its luminance.
float diffuseLum = dot(diffuse, vec3(0.299, 0.587, 0.114));
// Emissive shows when diffuse is low (night side)
totalEmissiveRadiance = emissive * emissiveIntensity * (1.0 - clamp(diffuseLum, 0.0, 1.0));
`
);
};
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.castShadow = true;
earth.receiveShadow = true;
earthGroup.add(earth);
// --- 2. Cloud Layer (semi-transparent, slightly larger sphere) ---
const cloudGeometry = new THREE.SphereGeometry(1.01, 64, 64);
const cloudMaterial = new THREE.MeshPhongMaterial({
map: cloudsTex,
transparent: true,
opacity: 0.45,
depthWrite: false,
blending: THREE.AdditiveBlending, // gives a nice glow
side: THREE.DoubleSide,
specular: new THREE.Color(0x111111),
shininess: 5
});
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
clouds.castShadow = false;
clouds.receiveShadow = false;
earthGroup.add(clouds);
// --- 3. Starfield Background (sphere with inverted normals) ---
const starsGeometry = new THREE.SphereGeometry(50, 64, 64);
const starsMaterial = new THREE.MeshBasicMaterial({
map: starsTex,
side: THREE.BackSide, // render inside
color: 0xffffff,
transparent: true,
opacity: 0.9
});
const stars = new THREE.Mesh(starsGeometry, starsMaterial);
scene.add(stars);
// --- Animation variables ---
let earthRotationSpeed = 0.001;
let cloudRotationSpeed = 0.0004; // clouds drift slower/faster
// --- Resize handler ---
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// --- Animation loop ---
function animate() {
requestAnimationFrame(animate);
// Rotate Earth and clouds independently
earth.rotation.y += earthRotationSpeed;
clouds.rotation.y += cloudRotationSpeed; // independent rotation
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
}
// Start animation
animate();
// --- Error handling for textures (fallback) ---
// If any texture fails, we could set a color, but we trust the URLs.
// Just in case, we set a timeout to check if textures are loaded.
// Not necessary for this demo.
// --- Additional polish: subtle tilt of Earth (axial tilt) ---
earthGroup.rotation.x = 0.41; // ~23.5 degrees in radians
earthGroup.rotation.z = 0.0;
// --- Add a subtle glow effect via a point light? Not needed.
// --- Console info ---
console.log('Earth simulation started. Enjoy!');
</script>
</body>
</html>
Iniciá sesión para ver el prompt completo
Continuar con:
Al iniciar sesión, aceptás nuestros Términos de uso y Política de privacidad
Uso
Este prompt está diseñado para usarse con coding. Copiá el contenido de arriba y pegalo en tu herramienta de IA preferida.
Para mejores resultados, personalizá los marcadores (indicados con corchetes o mayúsculas) con tus requisitos específicos.
Referencias
- Categoría: Prompts de coding
- Fuente: https://x.com/itsPaulAi/status/1943435127239118961
Discusión
0 comentarios