Simulação Foto-realista de Terra 3D com Three.js
De Wikiprompt, a enciclopédia livre de prompts
10 de jul. de 2025
Simulação Foto-realista de Terra 3D com Three.js Um prompt detalhado para gerar uma simulação interativa 3D da Terra com texturas de dia/noite, nuvens, campo de estrelas e OrbitControls em um único arquivo HTML.
Conteúdo do PromptSalvar
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earth - Photorealistic 3D Simulation</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: 30px;
font-size: 14px;
pointer-events: none;
backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.2);
z-index: 100;
letter-spacing: 0.5px;
}
#controls-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.4);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
backdrop-filter: blur(2px);
border: 1px solid rgba(255,255,255,0.15);
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-click 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>
(function() {
// --- Setup Scene, Camera, Renderer ---
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x050510); // deep space base
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3.5); // initial distance
const renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: false });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // crisp
renderer.shadowMap.enabled = true; // enable shadows (though Earth casts onto itself via lighting)
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.0;
controls.enablePan = true;
controls.autoRotate = false;
controls.target.set(0, 0, 0);
// --- Lighting ---
// Ambient light to softly illuminate the dark side (so it's not pure black)
const ambientLight = new THREE.AmbientLight(0x404060); // subtle blue-ish ambient
scene.add(ambientLight);
// Main directional light (sun)
const sunLight = new THREE.DirectionalLight(0xffeedd, 1.8);
sunLight.position.set(5, 3, 5); // from upper right
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 1024;
sunLight.shadow.mapSize.height = 1024;
// Adjust shadow camera to fit Earth
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);
// Optional fill light from opposite side to slightly reveal night side details
const fillLight = new THREE.DirectionalLight(0x446688, 0.15);
fillLight.position.set(-3, 0, -2);
scene.add(fillLight);
// --- Earth Group (to rotate the planet, clouds rotate separately) ---
const earthGroup = new THREE.Group();
scene.add(earthGroup);
// --- Load Textures ---
// Using high-quality public textures from Three.js examples (or fallback)
const textureLoader = new THREE.TextureLoader();
// Day map (2K resolution for performance and quality)
const dayTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
// Night map (city lights) - using a reliable source
const nightTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_lights_2048.png');
// Specular map (ocean highlights)
const specularTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
// Cloud map (transparent clouds)
const cloudTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png');
// Star background (equirectangular)
const starTexture = textureLoader.load('https://threejs.org/examples/textures/planets/galaxy_starfield.png');
// --- Earth Sphere (Day/Night blending via custom shader or multiple layers) ---
// We'll use a MeshPhongMaterial with emissive map for night lights.
// This gives a nice effect: day map as color, specular map for shininess, emissive map for night side.
// The emissive map will show city lights on the dark side.
const earthMaterial = new THREE.MeshPhongMaterial({
map: dayTexture,
specularMap: specularTexture,
specular: new THREE.Color(0x333333), // subtle specular
shininess: 10,
emissiveMap: nightTexture,
emissive: new THREE.Color(0xffffff), // white to show colors
emissiveIntensity: 0.85, // strong enough to see lights
// normalMap: normalTexture, // optional, but we skip for simplicity
});
const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
earthMesh.castShadow = true;
earthMesh.receiveShadow = true;
earthGroup.add(earthMesh);
// --- Cloud Layer (semi-transparent, slightly larger sphere) ---
const cloudMaterial = new THREE.MeshPhongMaterial({
map: cloudTexture,
transparent: true,
opacity: 0.45,
depthWrite: false, // avoid z-fighting
blending: THREE.AdditiveBlending, // makes clouds glow a bit
side: THREE.DoubleSide,
specular: new THREE.Color(0x111111),
shininess: 5
});
const cloudGeometry = new THREE.SphereGeometry(1.01, 64, 64);
const cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial);
cloudMesh.castShadow = false;
cloudMesh.receiveShadow = false;
earthGroup.add(cloudMesh); // we will rotate cloudMesh independently
// --- Starfield Background (sphere with inverted normals) ---
const starMaterial = new THREE.MeshBasicMaterial({
map: starTexture,
side: THREE.BackSide,
color: 0xffffff,
transparent: false,
depthWrite: false
});
const starGeometry = new THREE.SphereGeometry(50, 64, 64);
const starField = new THREE.Mesh(starGeometry, starMaterial);
scene.add(starField);
// --- Optional: Add a subtle glow/atmosphere effect (using a slightly larger transparent sphere) ---
const atmosphereMaterial = new THREE.MeshPhongMaterial({
color: 0x88aaff,
transparent: true,
opacity: 0.08,
side: THREE.BackSide,
depthWrite: false
});
const atmosphereGeometry = new THREE.SphereGeometry(1.02, 64, 64);
const atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
earthGroup.add(atmosphereMesh);
// --- Animation Variables ---
let earthRotationSpeed = 0.001;
let cloudRotationSpeed = 0.0006; // clouds drift slower
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// Rotate Earth (and atmosphere) - but we rotate the whole group?
// Actually we want clouds to rotate independently, so we rotate earthMesh and atmosphereMesh together,
// and cloudMesh separately.
// But we also want the group to be static relative to camera? No, we want Earth to spin on its axis.
// So we rotate the earthMesh and atmosphereMesh, and cloudMesh at different speeds.
// However, the night side lights should rotate with Earth, so we rotate earthMesh.
// The atmosphere should rotate with Earth, so we rotate it with earthMesh.
// The clouds rotate slightly faster or slower? Usually clouds move faster relative to surface, but we'll do slower for aesthetics.
// Rotate Earth and atmosphere
earthMesh.rotation.y += earthRotationSpeed;
atmosphereMesh.rotation.y += earthRotationSpeed; // same as earth
// Rotate clouds independently (slightly faster to create drift)
cloudMesh.rotation.y += cloudRotationSpeed;
// Update controls
controls.update();
// Render
renderer.render(scene, camera);
}
// --- Handle Window Resize ---
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// --- Start Animation ---
animate();
// --- Small tweak: adjust texture colors for better night visibility ---
// (We can set emissive intensity after load, but we already set it)
// Also, we can set the tone mapping exposure for better HDR feel
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
// --- Add a subtle point light to mimic moonlight? Not needed, but we can add a faint blue light from behind
const backLight = new THREE.PointLight(0x446688, 0.1);
backLight.position.set(-2, -1, -3);
scene.add(backLight);
// --- Ensure textures are properly set (some may need color space) ---
// For r128, we don't need to set encoding, but we can set texture.encoding = THREE.sRGBEncoding for better color
dayTexture.encoding = THREE.sRGBEncoding;
nightTexture.encoding = THREE.sRGBEncoding;
specularTexture.encoding = THREE.sRGBEncoding;
cloudTexture.encoding = THREE.sRGBEncoding;
starTexture.encoding = THREE.sRGBEncoding;
// Update materials after encoding change
earthMaterial.needsUpdate = true;
cloudMaterial.needsUpdate = true;
starMaterial.needsUpdate = true;
// Also, adjust the night texture to be more visible: we can increase emissive intensity a bit
earthMaterial.emissiveIntensity = 1.0; // stronger city lights
// For better cloud look, adjust opacity
cloudMaterial.opacity = 0.5;
console.log('Earth simulation started. Enjoy!');
})();
</script>
</body>
</html>
Entre para ver o prompt completo
Continuar com:
Ao entrar, você concorda com nossos Termos de uso e Política de privacidade
Uso
Este prompt foi projetado para uso com coding. Copie o conteúdo acima e cole na sua ferramenta de IA preferida.
Para melhores resultados, personalize os marcadores (indicados por colchetes ou maiúsculas) com seus requisitos específicos.
Referências
- Categoria: Prompts de coding
- Fonte: https://x.com/itsPaulAi/status/1943435127239118961
Discussão
0 comentários