index.html - master - eup/solar_system

index.html
582 строки25 KB
eup
Create: 2k_earth_clouds.jpg, 2k_earth_daymap.jpg, 2k_jupiter.jpg, 2k_mars.jpg, 2k_mercury.jpg, 2k_neptune.jpg, 2k_saturn.jpg, 2k_sun.jpg, 2k_uranus.jpg, 2k_venus_atmosphere.jpg, index.html
07 июн 2026, 12:12
Верифицирован
07 июн 2026, 12:1287595d7
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Интерактивная 3D Солнечная система — Реалистичная (локальные текстуры)</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
        
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
            font-family: 'Inter', sans-serif;
        }
        
        canvas { display: block; }
        
        #info-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 320px;
            background: rgba(0, 0, 0, 0.92);
            border-radius: 16px;
            color: #fff;
            padding: 24px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
            display: none;
            z-index: 1000;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.1);
        }
        
        #info-panel.show {
            display: block;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { transform: translateX(50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        #info-panel h2 {
            margin: 0 0 12px 0;
            font-size: 28px;
            font-weight: 600;
            color: #ffd700;
        }
        
        #info-panel .close {
            position: absolute;
            top: 18px;
            right: 18px;
            font-size: 28px;
            cursor: pointer;
            color: #aaa;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #info-panel .fact {
            margin: 18px 0;
            padding: 14px;
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            font-size: 15px;
        }
        
        #info-panel .fact strong {
            color: #ffd700;
        }
        
        #hud {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 14px;
            z-index: 1000;
            pointer-events: none;
        }
        
        #controls {
            pointer-events: all;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .planet-list {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 12px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 1000;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .planet-btn {
            background: rgba(255,255,255,0.1);
            color: #fff;
            border: none;
            padding: 10px 18px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 15px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .planet-btn:hover {
            background: rgba(255, 215, 0, 0.3);
            transform: translateY(-2px);
        }
        
        .planet-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        #instructions {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            color: #aaa;
            padding: 10px 24px;
            border-radius: 50px;
            font-size: 13px;
            white-space: nowrap;
            z-index: 1000;
            pointer-events: none;
        }
        
        #pause-btn {
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        #pause-btn:hover {
            background: rgba(255, 215, 0, 0.4);
        }
        
        #texture-status {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 255, 100, 0.9);
            color: #000;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            display: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div id="texture-status">✅ Текстуры загружены локально</div>

    <div id="info-panel">
        <div class="close" onclick="hideInfo()">×</div>
        <div id="info-content"></div>
    </div>

    <div class="planet-list" id="planet-list"></div>

    <div id="hud">
        <span>🪐 Реалистичная Солнечная система (локальные текстуры)</span>
        <span style="opacity:0.6">•</span>
        <span id="date">17 апреля 2026</span>
        
        <div id="controls">
            <button id="pause-btn" title="Пауза / Продолжить (пробел)">⏸️</button>
        </div>
        
        <span style="opacity:0.6">•</span>
        <span>Клик на планету</span>
    </div>

    <div id="instructions">
        🖱️ Перетаскивай мышкой • Колёсико — зум • Клик по планете = информация • Пробел = пауза
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script>
        // ===================== НАСТРОЙКИ =====================
        let scene, camera, renderer;
        let sun, planets = [];
        let raycaster = new THREE.Raycaster();
        let mouse = new THREE.Vector2();
        let isDragging = false;
        let previousMouseX = 0, previousMouseY = 0;
        
        let theta = Math.PI * 0.6;
        let phi = Math.PI * 0.45;
        let cameraDistance = 280;
        
        const center = new THREE.Vector3(0, 0, 0);
        
        let paused = false;
        let textureLoader;
        
        // Локальные пути к текстурам (файлы должны лежать в одной папке с index.html)
        const planetData = [
            { 
                name: "Солнце", 
                radius: 18, 
                distance: 0, 
                speed: 0, 
                textureUrl: "./2k_sun.jpg",
                info: `<h2>☀️ Солнце</h2><p><strong>Звезда</strong> — центр Солнечной системы</p><div class="fact"><strong>Диаметр:</strong> 1 392 000 км<br><strong>Температура поверхности:</strong> 5500 °C<br><strong>Масса:</strong> 99,86% всей Солнечной системы<br><strong>Возраст:</strong> ~4,6 млрд лет</div><p>Источник энергии — термоядерный синтез. Без него не было бы жизни на Земле.</p>` 
            },
            { 
                name: "Меркурий", 
                radius: 3.8, 
                distance: 48, 
                speed: 0.024, 
                textureUrl: "./2k_mercury.jpg",
                info: `<h2>☿ Меркурий</h2><p>Самая близкая к Солнцу и самая маленькая планета</p><div class="fact"><strong>Расстояние от Солнца:</strong> 58 млн км<br><strong>Диаметр:</strong> 4 879 км<br><strong>Год:</strong> 88 земных дней<br><strong>Температура:</strong> от −173 °C до +427 °C</div><p>Нет атмосферы и спутников. Поверхность покрыта кратерами.</p>` 
            },
            { 
                name: "Венера", 
                radius: 7.2, 
                distance: 72, 
                speed: 0.013, 
                textureUrl: "./2k_venus_atmosphere.jpg",
                info: `<h2>♀ Венера</h2><p>«Близнец» Земли, но с адской атмосферой</p><div class="fact"><strong>Расстояние от Солнца:</strong> 108 млн км<br><strong>Диаметр:</strong> 12 104 км<br><strong>Год:</strong> 225 земных дней<br><strong>Температура:</strong> +462 °C (постоянно)</div><p>Самая горячая планета. Атмосфера — 96% CO₂ и облака серной кислоты.</p>` 
            },
            { 
                name: "Земля", 
                radius: 7.8, 
                distance: 100, 
                speed: 0.008, 
                textureUrl: "./2k_earth_daymap.jpg",
                info: `<h2>🌍 Земля</h2><p>Единственная планета с жизнью</p><div class="fact"><strong>Расстояние от Солнца:</strong> 150 млн км<br><strong>Диаметр:</strong> 12 742 км<br><strong>Год:</strong> 365,25 дней<br><strong>Спутник:</strong> Луна</div><p>71% поверхности покрыто водой. Идеальное расстояние от Солнца для жизни.</p>` 
            },
            { 
                name: "Марс", 
                radius: 4.9, 
                distance: 135, 
                speed: 0.005, 
                textureUrl: "./2k_mars.jpg",
                info: `<h2>♂ Марс</h2><p>Красная планета</p><div class="fact"><strong>Расстояние от Солнца:</strong> 228 млн км<br><strong>Диаметр:</strong> 6 779 км<br><strong>Год:</strong> 687 земных дней<br><strong>Спутники:</strong> Фобос и Деймос</div><p>Имеет самую высокую гору в Солнечной системе — Олимп (22 км).</p>` 
            },
            { 
                name: "Юпитер", 
                radius: 14, 
                distance: 200, 
                speed: 0.002, 
                textureUrl: "./2k_jupiter.jpg",
                info: `<h2>♃ Юпитер</h2><p>Самая большая планета</p><div class="fact"><strong>Расстояние от Солнца:</strong> 778 млн км<br><strong>Диаметр:</strong> 139 820 км<br><strong>Год:</strong> 12 земных лет<br><strong>Спутников:</strong> 95+</div><p>Большое Красное Пятно — гигантский шторм, существующий сотни лет.</p>` 
            },
            { 
                name: "Сатурн", 
                radius: 11.8, 
                distance: 270, 
                speed: 0.0012, 
                textureUrl: "./2k_saturn.jpg",
                info: `<h2>♄ Сатурн</h2><p>Планета с самыми красивыми кольцами</p><div class="fact"><strong>Расстояние от Солнца:</strong> 1,43 млрд км<br><strong>Диаметр:</strong> 120 536 км<br><strong>Год:</strong> 29,5 земных лет<br><strong>Спутников:</strong> 146+</div><p>Кольца состоят из льда, камня и пыли. Планета легче воды!</p>` 
            },
            { 
                name: "Уран", 
                radius: 9.5, 
                distance: 340, 
                speed: 0.0007, 
                textureUrl: "./2k_uranus.jpg",
                info: `<h2>♅ Уран</h2><p>Ледяной гигант, вращается «лёжа на боку»</p><div class="fact"><strong>Расстояние от Солнца:</strong> 2,87 млрд км<br><strong>Диаметр:</strong> 51 118 км<br><strong>Год:</strong> 84 земных года<br><strong>Спутников:</strong> 28</div><p>Самая холодная атмосфера в Солнечной системе (−224 °C).</p>` 
            },
            { 
                name: "Нептун", 
                radius: 9.3, 
                distance: 400, 
                speed: 0.0004, 
                textureUrl: "./2k_neptune.jpg",
                info: `<h2>♆ Нептун</h2><p>Самая ветреная планета</p><div class="fact"><strong>Расстояние от Солнца:</strong> 4,5 млрд км<br><strong>Диаметр:</strong> 49 528 км<br><strong>Год:</strong> 165 земных лет<br><strong>Спутников:</strong> 16</div><p>Скорость ветра до 2100 км/ч. Открыт в 1846 году «на кончике пера».</p>` 
            }
        ];

        // ===================== ИНИЦИАЛИЗАЦИЯ =====================
        function init() {
            scene = new THREE.Scene();
            textureLoader = new THREE.TextureLoader();
            
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
            updateCameraPosition();
            
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            document.body.appendChild(renderer.domElement);
            
            const ambient = new THREE.AmbientLight(0x404040, 0.6);
            scene.add(ambient);
            
            const sunLight = new THREE.PointLight(0xffeecc, 3.2, 0);
            sunLight.position.set(0, 0, 0);
            scene.add(sunLight);
            
            createStars();
            
            // Солнце
            const sunGeo = new THREE.SphereGeometry(planetData[0].radius, 64, 64);
            const sunMat = new THREE.MeshBasicMaterial({ 
                map: textureLoader.load(planetData[0].textureUrl) 
            });
            sun = new THREE.Mesh(sunGeo, sunMat);
            sun.userData = planetData[0];
            scene.add(sun);
            
            // Планеты
            planets = [];
            const listHTML = document.getElementById('planet-list');
            
            for (let i = 1; i < planetData.length; i++) {
                const data = planetData[i];
                const geo = new THREE.SphereGeometry(data.radius, 64, 64);
                const mat = new THREE.MeshPhongMaterial({
                    map: textureLoader.load(data.textureUrl),
                    shininess: 12,
                    specular: 0x222222
                });
                const mesh = new THREE.Mesh(geo, mat);
                
                const angle = Math.random() * Math.PI * 2;
                mesh.position.x = Math.cos(angle) * data.distance;
                mesh.position.z = Math.sin(angle) * data.distance;
                mesh.userData = { ...data, angle: angle };
                
                scene.add(mesh);
                planets.push(mesh);
                
                // Облака Земли
                if (data.name === "Земля") {
                    const cloudGeo = new THREE.SphereGeometry(data.radius * 1.015, 64, 64);
                    const cloudMat = new THREE.MeshPhongMaterial({
                        map: textureLoader.load("./2k_earth_clouds.jpg"),
                        transparent: true,
                        opacity: 0.85,
                        depthWrite: false
                    });
                    const clouds = new THREE.Mesh(cloudGeo, cloudMat);
                    mesh.add(clouds);
                    mesh.userData.clouds = clouds;
                }
                
                // Кнопка в списке
                const btn = document.createElement('button');
                btn.className = 'planet-btn';
                btn.innerHTML = `<span class="planet-dot" style="background:#${(0xaaaaaa).toString(16).padStart(6,'0')}"></span>${data.name}`;
                btn.onclick = () => showInfoDirect(data);
                listHTML.appendChild(btn);
            }
            
            createSaturnRings();
            createOrbits();
            
            // Показываем статус
            document.getElementById('texture-status').style.display = 'block';
            
            // События
            window.addEventListener('resize', onWindowResize);
            renderer.domElement.addEventListener('mousedown', onMouseDown);
            renderer.domElement.addEventListener('mousemove', onMouseMove);
            renderer.domElement.addEventListener('mouseup', onMouseUp);
            renderer.domElement.addEventListener('mouseleave', onMouseUp);
            renderer.domElement.addEventListener('wheel', onWheel);
            renderer.domElement.addEventListener('click', onClickPlanet);
            
            const pauseBtn = document.getElementById('pause-btn');
            pauseBtn.addEventListener('click', togglePause);
            
            document.addEventListener('keydown', e => {
                if (e.key === " ") {
                    e.preventDefault();
                    togglePause();
                }
            });
            
            animate();
            
            console.log('%c✅ Полная версия с локальными текстурами загружена!', 'color:#0f0; font-size:16px');
        }
        
        function createStars() {
            const vertices = [];
            for (let i = 0; i < 18000; i++) {
                vertices.push(THREE.MathUtils.randFloatSpread(2000), THREE.MathUtils.randFloatSpread(2000), THREE.MathUtils.randFloatSpread(2000));
            }
            const geometry = new THREE.BufferGeometry().setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
            const material = new THREE.PointsMaterial({ size: 1.1, color: 0xffffff, transparent: true, opacity: 0.9 });
            scene.add(new THREE.Points(geometry, material));
        }
        
        function createSaturnRings() {
            const saturn = planets.find(p => p.userData.name === "Сатурн");
            if (!saturn) return;
            const ringGeo = new THREE.RingGeometry(16, 27, 96);
            const ringMat = new THREE.MeshPhongMaterial({ 
                color: 0xe5d5aa, 
                side: THREE.DoubleSide, 
                transparent: true, 
                opacity: 0.85 
            });
            const rings = new THREE.Mesh(ringGeo, ringMat);
            rings.rotation.x = Math.PI / 1.7;
            saturn.add(rings);
        }
        
        function createOrbits() {
            for (let i = 1; i < planetData.length; i++) {
                const data = planetData[i];
                const points = [];
                for (let j = 0; j <= 128; j++) {
                    const a = (j / 128) * Math.PI * 2;
                    points.push(new THREE.Vector3(Math.cos(a) * data.distance, 0, Math.sin(a) * data.distance));
                }
                const geometry = new THREE.BufferGeometry().setFromPoints(points);
                const material = new THREE.LineBasicMaterial({ 
                    color: 0x666688, 
                    transparent: true, 
                    opacity: 0.28 
                });
                scene.add(new THREE.Line(geometry, material));
            }
        }
        
        function togglePause() {
            paused = !paused;
            document.getElementById('pause-btn').innerHTML = paused ? '▶️' : '⏸️';
        }
        
        // ===================== КАМЕРА =====================
        function updateCameraPosition() {
            const x = cameraDistance * Math.sin(phi) * Math.cos(theta);
            const z = cameraDistance * Math.sin(phi) * Math.sin(theta);
            const y = cameraDistance * Math.cos(phi);
            camera.position.set(x, y, z);
            camera.lookAt(center);
        }
        
        // ===================== УПРАВЛЕНИЕ =====================
        function onMouseDown(e) {
            if (e.button === 0) {
                isDragging = true;
                previousMouseX = e.clientX;
                previousMouseY = e.clientY;
            }
        }
        
        function onMouseUp() {
            isDragging = false;
        }
        
        function onMouseMove(e) {
            if (!isDragging) return;
            const deltaX = e.clientX - previousMouseX;
            const deltaY = e.clientY - previousMouseY;
            theta -= deltaX * 0.0035;
            phi += deltaY * 0.0035;
            phi = Math.max(0.15, Math.min(Math.PI - 0.15, phi));
            updateCameraPosition();
            previousMouseX = e.clientX;
            previousMouseY = e.clientY;
        }
        
        function onWheel(e) {
            cameraDistance += e.deltaY * 0.6;
            cameraDistance = Math.max(80, Math.min(650, cameraDistance));
            updateCameraPosition();
        }
        
        // ===================== КЛИК =====================
        function onClickPlanet(e) {
            if (isDragging) return;
            mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            const allMeshes = [sun, ...planets];
            const intersects = raycaster.intersectObjects(allMeshes, true);
            if (intersects.length > 0) {
                let obj = intersects[0].object;
                while (obj && !obj.userData.name) obj = obj.parent;
                if (obj && obj.userData.name) showInfo(obj.userData);
            }
        }
        
        function showInfo(data) {
            const panel = document.getElementById('info-panel');
            document.getElementById('info-content').innerHTML = data.info;
            panel.classList.add('show');
        }
        
        function showInfoDirect(data) {
            const panel = document.getElementById('info-panel');
            document.getElementById('info-content').innerHTML = data.info;
            panel.classList.add('show');
        }
        
        function hideInfo() {
            const panel = document.getElementById('info-panel');
            panel.classList.remove('show');
        }
        
        // ===================== АНИМАЦИЯ =====================
        let time = 0;
        function animate() {
            requestAnimationFrame(animate);
            
            if (!paused) {
                time += 0.016;
                
                // Вращение Солнца
                sun.rotation.y = time * 0.2;
                
                // Планеты
                planets.forEach(planet => {
                    const data = planet.userData;
                    if (data.distance > 0) {
                        data.angle += data.speed * 0.8;
                        planet.position.x = Math.cos(data.angle) * data.distance;
                        planet.position.z = Math.sin(data.angle) * data.distance;
                    }
                    planet.rotation.y += 0.008;
                    
                    // Облака Земли
                    if (planet.userData.clouds) {
                        planet.userData.clouds.rotation.y += 0.0095;
                    }
                });
                
                // Пульсация Солнца
                const pulse = 1 + Math.sin(time * 4) * 0.015;
                sun.scale.setScalar(pulse);
            }
            
            renderer.render(scene, camera);
        }
        
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        // ===================== ЗАПУСК =====================
        window.onload = init;
    </script>
</body>
</html>