Photorealistische 3D-Erdsimulation mit Three.js
Von Wikiprompt, der freien Prompt-Enzyklopädie
10. Juli 2025
Photorealistische 3D-Erdsimulation mit Three.js Ein detaillierter Prompt zur Erzeugung einer interaktiven 3D-Erdsimulation mit Tag-/Nacht-Texturen, Wolken, Sternenfeld und OrbitControls in einer einzigen HTML-Datei.
Prompt-InhaltSpeichern
🌐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earth Simulation</title>
<style>
body { margin: 0; overflow: hidden; background-color: black; }
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-family: Arial, sans-serif;
font-size: 14px;
background: rgba(0,0,0,0.7);
padding: 10px 20px;
border-radius: 5px;
pointer-events: none;
user-select: none;
}
</style>
</head>
<body>
<div id="info">Earth Simulation - Drag to rotate, scroll to zoom</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();
scene.background = new THREE.Color(0x000000);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 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;
document.body.appendChild(renderer.domElement);
// --- Controls ---
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
controls.zoomSpeed = 1.0;
controls.panSpeed = 0.5;
controls.minDistance = 2.5;
controls.maxDistance = 15;
controls.target.set(0, 0, 0);
// --- Lighting ---
// Ambient light for base illumination
const ambientLight = new THREE.AmbientLight(0x404060);
scene.add(ambientLight);
// Main directional light (sun)
const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
sunLight.position.set(5, 3, 5);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 1024;
sunLight.shadow.mapSize.height = 1024;
const d = 10;
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 = 15;
scene.add(sunLight);
// Fill light from opposite side
const fillLight = new THREE.DirectionalLight(0x446688, 0.3);
fillLight.position.set(-5, -2, -5);
scene.add(fillLight);
// --- Texture Loader ---
const textureLoader = new THREE.TextureLoader();
// --- Earth Group ---
const earthGroup = new THREE.Group();
scene.add(earthGroup);
// --- Earth Sphere ---
const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
// Load textures
const dayTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
const nightTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_lights_2048.png');
const specularTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
const cloudTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png');
const earthMaterial = new THREE.MeshPhongMaterial({
map: dayTexture,
specularMap: specularTexture,
specular: new THREE.Color('grey'),
shininess: 10,
emissiveMap: nightTexture,
emissive: new THREE.Color(0xffff88),
emissiveIntensity: 0.8
});
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.4,
blending: THREE.AdditiveBlending,
side: THREE.DoubleSide
});
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
clouds.castShadow = false;
clouds.receiveShadow = false;
earthGroup.add(clouds);
// --- Starfield Background ---
const starGeometry = new THREE.SphereGeometry(500, 64, 64);
const starCanvas = document.createElement('canvas');
starCanvas.width = 2048;
starCanvas.height = 1024;
const ctx = starCanvas.getContext('2d');
// Fill with black
ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, starCanvas.width, starCanvas.height);
// Draw random stars
for (let i = 0; i < 8000; i++) {
const x = Math.random() * starCanvas.width;
const y = Math.random() * starCanvas.height;
const radius = Math.random() * 2.5 + 0.5;
const brightness = Math.random() * 200 + 55;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgb(${brightness}, ${brightness}, ${brightness})`;
ctx.fill();
}
// Add some colored stars
for (let i = 0; i < 500; i++) {
const x = Math.random() * starCanvas.width;
const y = Math.random() * starCanvas.height;
const radius = Math.random() * 2 + 1;
const colorType = Math.random();
let r, g, b;
if (colorType < 0.33) {
r = 200 + Math.random() * 55;
g = 150 + Math.random() * 50;
b = 100 + Math.random() * 50;
} else if (colorType < 0.66) {
r = 100 + Math.random() * 50;
g = 150 + Math.random() * 50;
b = 200 + Math.random() * 55;
} else {
r = 200 + Math.random() * 55;
g = 200 + Math.random() * 55;
b = 200 + Math.random() * 55;
}
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`;
ctx.fill();
}
const starTexture = new THREE.CanvasTexture(starCanvas);
const starMaterial = new THREE.MeshBasicMaterial({
map: starTexture,
side: THREE.BackSide
});
const starField = new THREE.Mesh(starGeometry, starMaterial);
scene.add(starField);
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// Rotate Earth and clouds
earth.rotation.y += 0.001;
clouds.rotation.y += 0.0015; // Clouds rotate slightly faster
controls.update();
renderer.render(scene, camera);
}
animate();
// --- Window Resize Handler ---
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// --- Initial rotation for better view ---
earth.rotation.x = 0.2;
clouds.rotation.x = 0.2;
</script>
</body>
</html>
Melde dich an, um den vollständigen Prompt zu sehen
Weiter mit:
Mit der Anmeldung akzeptierst du unsere Nutzungsbedingungen und Datenschutz
Verwendung
Dieser Prompt ist für die Verwendung mit coding gedacht. Kopiere den Inhalt oben und füge ihn in dein bevorzugtes KI-Tool ein.
Für beste Ergebnisse passe die Platzhalter (eckige Klammern oder Großbuchstaben) an deine Anforderungen an.
Referenzen
- Kategorie: coding-Prompts
- Quelle: https://x.com/itsPaulAi/status/1943435127239118961
Diskussion
0 Kommentare