Photorealistic 3D Earth Simulation avec Three.js
De Wikiprompt, l’encyclopédie libre de prompts
10 juil. 2025
Photorealistic 3D Earth Simulation avec Three.js Invite détaillée pour générer une simulation interactive de la Terre en 3D avec textures jour/nuit, nuages, champ d'étoiles et OrbitControls dans un seul fichier HTML.
Contenu du PromptEnregistrer
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photorealistic Earth Simulation</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.2);
}
#controls-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.5);
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<div id="info">🌍 Earth Simulation - Interactive 3D</div>
<div id="controls-hint">🖱️ Drag to rotate | Scroll to zoom | Right-click to pan</div>
<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>
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3.5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
document.body.appendChild(renderer.domElement);
// OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 1.5;
controls.maxDistance = 10;
controls.autoRotate = false;
controls.enablePan = true;
// Create Earth group for independent rotation
const earthGroup = new THREE.Group();
scene.add(earthGroup);
// Earth sphere
const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
// Load textures
const textureLoader = new THREE.TextureLoader();
// Day texture
const dayTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
// Night texture (city lights)
const nightTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_lights_2048.png');
// Specular map for ocean highlights
const specularMap = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
// Cloud texture
const cloudTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png');
// Star texture
const starTexture = textureLoader.load('https://threejs.org/examples/textures/planets/stars.png');
// Earth material with day/night blending
const earthMaterial = new THREE.MeshPhongMaterial({
map: dayTexture,
specularMap: specularMap,
specular: new THREE.Color(0x333333),
shininess: 25,
emissiveMap: nightTexture,
emissive: new THREE.Color(0xffffff),
emissiveIntensity: 0.0, // Will be controlled by sun direction
});
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.castShadow = true;
earth.receiveShadow = true;
earthGroup.add(earth);
// Cloud layer
const cloudGeometry = new THREE.SphereGeometry(1.01, 64, 64);
const cloudMaterial = new THREE.MeshPhongMaterial({
map: cloudTexture,
transparent: true,
opacity: 0.6,
depthWrite: false,
blending: THREE.AdditiveBlending,
side: THREE.DoubleSide
});
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
clouds.castShadow = false;
clouds.receiveShadow = false;
earthGroup.add(clouds);
// Atmosphere glow effect
const atmosphereGeometry = new THREE.SphereGeometry(1.02, 64, 64);
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.7 - dot(vNormal, vec3(0, 0, 1.0)), 2.0);
gl_FragColor = vec4(0.3, 0.6, 1.0, 1.0) * intensity;
}
`,
blending: THREE.AdditiveBlending,
side: THREE.BackSide,
transparent: true,
depthWrite: false
});
const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
earthGroup.add(atmosphere);
// Starfield background
const starGeometry = new THREE.SphereGeometry(50, 64, 64);
const starMaterial = new THREE.MeshBasicMaterial({
map: starTexture,
side: THREE.BackSide,
depthWrite: false
});
const stars = new THREE.Mesh(starGeometry, starMaterial);
scene.add(stars);
// Sun light (directional)
const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
sunLight.position.set(5, 3, 5);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 2048;
sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.camera.near = 0.5;
sunLight.shadow.camera.far = 15;
sunLight.shadow.camera.left = -3;
sunLight.shadow.camera.right = 3;
sunLight.shadow.camera.top = 3;
sunLight.shadow.camera.bottom = -3;
scene.add(sunLight);
// Ambient light for subtle fill
const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
scene.add(ambientLight);
// Additional point light for night side visibility
const fillLight = new THREE.PointLight(0x4466ff, 0.2, 10);
fillLight.position.set(-5, 0, -5);
scene.add(fillLight);
// Animation variables
let earthRotationSpeed = 0.002;
let cloudRotationSpeed = 0.001;
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate Earth
earth.rotation.y += earthRotationSpeed;
// Rotate clouds independently (slightly faster for parallax effect)
clouds.rotation.y += cloudRotationSpeed;
clouds.rotation.x = 0.01; // Slight tilt for realism
// Update emissive intensity based on sun position relative to camera
// This creates the day/night transition effect
const sunDirection = sunLight.position.clone().normalize();
const cameraDirection = camera.position.clone().normalize();
const dot = sunDirection.dot(cameraDirection);
// Adjust emissive intensity based on angle between sun and camera
// When camera faces the sun, night side is hidden (low emissive)
// When camera faces away from sun, night side is visible (high emissive)
const emissiveIntensity = Math.max(0, 1 - dot) * 0.8;
earthMaterial.emissiveIntensity = emissiveIntensity;
// Update controls
controls.update();
// Render scene
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Start animation
animate();
</script>
</body>
</html>
Connectez-vous pour voir le prompt complet
Continuer avec:
En vous connectant, vous acceptez nos Conditions et Confidentialité
Utilisation
Ce prompt est conçu pour être utilisé avec coding. Copiez le contenu ci-dessus et collez-le dans votre outil d’IA préféré.
Pour de meilleurs résultats, personnalisez les espaces réservés (indiqués par des crochets ou des majuscules) selon vos besoins.
Références
- Catégorie: Prompts coding
- Source: https://x.com/itsPaulAi/status/1943435127239118961
Discussion
0 commentaires