Existen varias maneras de mostrar con un ejemplo la imagen de la Tierra en órbita en HTML, desde las más sencillas usando imágenes estáticas con animación CSS, hasta las más complejas utilizando bibliotecas 3D como Three.js. Aquí te presento dos ejemplos: uno sencillo con CSS y otro más avanzado con Three.js.
1. Usando CSS (animación 2D):
Este método es el más sencillo y eficiente para animaciones básicas. Usaremos una imagen de la Tierra y la haremos rotar.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tierra en Órbita (CSS)</title>
<style>
body {
background-color: #000; /* Fondo negro para simular el espacio */
overflow: hidden; /* Evita barras de scroll */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.orbita {
width: 400px; /* Ajusta el tamaño de la órbita */
height: 400px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2); /* Órbita tenue */
position: relative;
animation: orbitar 10s linear infinite; /* Animación de la órbita */
}
.tierra {
width: 100px; /* Ajusta el tamaño de la Tierra */
height: 100px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%); /* Centra verticalmente */
border-radius: 50%;
background-image: url('earth.jpg'); /* Reemplaza con la ruta de tu imagen de la Tierra */
background-size: cover;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Brillo */
}
@keyframes orbitar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="orbita">
<div class="tierra"></div>
</div>
</body>
</html>
Explicación:
earth.jpg: Debes reemplazar esto con la ruta a una imagen de la Tierra. Puedes buscar imágenes de la Tierra en formato PNG o JPG, preferiblemente con fondo transparente si quieres un mejor efecto..orbita: Este div crea un círculo que representa la órbita. La animaciónorbitarlo rota..tierra: Este div contiene la imagen de la Tierra y se posiciona dentro de la órbita. Eltransform: translate(-50%, -50%);centra verticalmente la Tierra dentro de la órbita.@keyframes orbitar: Define la animación de rotación.linearhace que la rotación sea a velocidad constante,infinitela repite continuamente.
2. Usando Three.js (animación 3D):
Este método ofrece un resultado mucho más realista, permitiendo la rotación 3D de la Tierra y otros efectos. Requiere incluir la biblioteca Three.js.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tierra en Órbita (Three.js)</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.SphereGeometry( 1, 32, 32 );
const texture = new THREE.TextureLoader().load( 'earth.jpg' ); // Reemplaza con tu imagen
const material = new THREE.MeshBasicMaterial( { map: texture } );
const earth = new THREE.Mesh( geometry, material );
scene.add( earth );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
earth.rotation.y += 0.005; // Velocidad de rotación
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
Explicación
- Se incluye la biblioteca Three.js desde un CDN.
- Se crea una escena, una cámara y un renderizador.
- Se crea una esfera (la Tierra) y se le aplica una textura (tu imagen
earth.jpg). - La función
animatese encarga de renderizar la escena y rotar la Tierra continuamente.
Para usar este código:
- Guarda una imagen de la Tierra: Busca una imagen adecuada y guárdala en el mismo directorio que tu archivo HTML, o proporciona la ruta correcta en el código.
- Crea un archivo HTML: Copia el código HTML que prefieras (CSS o Three.js) y guárdalo como un archivo
.html(por ejemplo,index.html). - Abre el archivo en tu navegador: Abre el archivo
index.htmlcon tu navegador web.
La versión con Three.js ofrece un resultado mucho más profesional y permite añadir más efectos como iluminación, nubes, etc. Sin embargo, requiere un poco más de conocimiento de JavaScript y la biblioteca Three.js.