Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 17 days ago

Commit

420114b

verified ·

1 Parent(s): 058dd3b

Update index.html

Browse files

Files changed (1) hide show

index.html +57 -154

index.html CHANGED Viewed

@@ -4,181 +4,84 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>360 Лесной Скайбокс</title>
     <style>
-        body {
             margin: 0;
-            overflow: hidden; /* Скрываем полосы прокрутки */
-            font-family: Arial, sans-serif;
-            background-color: #000;
-            color: #fff;
         }
-        #container {
-            width: 100vw;
-            height: 100vh;
-            display: block;
-            position: relative;
-        }
-        #controls-info {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.6);
-            padding: 8px 12px;
-            border-radius: 5px;
-            font-size: 14px;
-            z-index: 10;
         }
-        #file-upload-section {
             position: absolute;
             top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.6);
-            padding: 8px 12px;
-            border-radius: 5px;
-            z-index: 10;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            align-items: flex-end;
-        }
-        #file-upload-section label {
-            cursor: pointer;
-            background-color: #007bff;
             color: white;
-            padding: 5px 10px;
-            border-radius: 4px;
             font-size: 14px;
-            transition: background-color 0.3s ease;
         }
-        #file-upload-section label:hover {
-            background-color: #0056b3;
-        }
-        #file-input {
-            display: none; /* Скрываем стандартный инпут файла */
         }
     </style>
 </head>
 <body>
-    <div id="container">
-        <div id="controls-info">
-            Используйте мышь для вращения, колесико для приближения/удаления.
-        </div>
-        <div id="file-upload-section">
-            <label for="file-input">Загрузить свое 360 изображение</label>
-            <input type="file" id="file-input" accept="image/*">
-        </div>
-    </div>
-    <!-- Подключаем Three.js и OrbitControls через CDN -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/examples/js/controls/OrbitControls.js"></script>
-    <script>
-        let scene, camera, renderer, controls, sphereMesh;
-        // Изображение скайбокса по умолчанию (ваш лес)
-        // Замените этот URL на путь к вашему изображению, если оно будет на сервере
-        // Или просто оставьте, так как оно будет загружено из JS.
-        const defaultSkyboxImage = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAEAAgIDASIAAhEBAxEB/8QAGwAAAgMBAQEAAAAAAAAAAAAAAAECBAUGAwf/xAA0EAACAQMDAwMEAAYCAgMAAAABAgADBBESIQVBEzEFIjJRYXGBBxQjMpGhFUJSUnLC4f/EABoBAAMBAQEBAAAAAAAAAAAAAAABAgMEBQb/xAAhEQACAgICAwEBAQEAAAAAAAAAAQIRAyESMUEEMlEUIf/aAAwDAQACEQMRAD8A+mXN7d21tM502N5CqkKxWwY6j21n77xBdW7sFsLZh0Y5x/hV2y8UXt1atLctbW6KASz3IAH1P86gWviK7vJjHFdWaOBkiC/VgPqR/nW9jC7O223e7vUj2y2tXl2n90d5kXJ/wDGO/qai9+uP3Fh9j/AJ1d/8K3f+Psv/eP/AFqf+FbM/wB9d/+8P/WsL9H2mGqY+W425d7tC+r7z/wCWP/dqvV90/wDmj/4qjU/f61f/AAra/+Osv/eH/rU//CNn/wB9d/+8P/Woa+1QavpMPf/tP+Kk9+h/wCw3/xVGrU/X60p/CPZ/8AHXf/AIw/9alH4R7P/jrv/wAYf+tQ19qhqvpmH2+g/wCKqP36H/st/wDFUSqf/wC8VrS/CPZf8dd/+MP/AFqb/wAI9l/x13/4w/8AWoa+1QavpMPf6D/iqNfvp/wCYP/iqNT9/rWvL4R7L/AI67/wDGH/rU//CNeH/HXX/jD/wBajU/X61D6TDu2+n/ioP32n/ADf/ABVGrU/f61rTfCOy/wCOu/8Axh/61J/wjw/466/8Yf+tQ19qhqvpmH3+n/AIqjU/f6f8w/+Kk1P3+taxPCzY/fXX/AIw/9ajU/C0v/HXX/jD/ANahNfao/SaeD/iqNT9/p/zB/8AFVGrU/f61qU/hRMP39z/AOMP/Wo1P4Vv/wDHXX/jD/1qE39qjUfSa8D/iqtT9/p/zB/8AFVGrU/f61qU/hXcf8dd/+MP/AFqNT+Fb/wDjrj/xh/61CT+1R+k14H/FVan7/AE/5g/8AiqNT9/rWpT+Fbn/jrv8A8Yf+tSj8K3X/AB13/wCMf+tQn9qjUfSa8D/iqNT9/p/zB/8VVoa19/rWpT+Fbv/jrv/wAY/wDWo1P4Vuv+Ouv/ABj/ANahN/ao1H0mvB/xVSmv2/f61qU/hW7/wCOuv8Axj/1qNT+Fbv/AI66/wDGP/WoSf2qNR+k14H/FVqfvtjX61mpT+Fbv/jrr/xj/wBajU/hW7/466/8Yf+tQm/tUaj6TXg/wCKpU/f61mpT+Fbv/jrr/xj/1qNT+Fbv8A466/8Yf+tQk/tUaj6TXg/4qpU/f61mpT+Fbv/jrr/xj/wBajU/hW7/466/8Yf+tQm/tUaj6TXg/wCKq1P3+tZqU/hW7/466/8Y/8AWo1P4Vu/+Ouv/GP/AFqE39qjUfSa8D/iqNT9/rWSmsfFf+8f/ioqYj6f//Z';
-        document.addEventListener('DOMContentLoaded', () => {
-            init();
-            animate();
-        });
-        function init() {
-            const container = document.getElementById('container');
-            const width = window.innerWidth;
-            const height = window.innerHeight;
-            // 1. Scene
-            scene = new THREE.Scene();
-            // 2. Camera
-            camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-            camera.position.set(0.01, 0, 0); // Немного смещаем камеру, чтобы она была внутри сферы
-            // 3. Renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(width, height);
-            container.appendChild(renderer.domElement);
-            // 4. Controls (OrbitControls для взаимодействия)
-            controls = new OrbitControls(camera, renderer.domElement);
-            controls.enableZoom = true;
-            controls.enablePan = false; // Отключаем панорамирование, чтобы не "вылететь" из сферы
-            controls.rotateSpeed = -0.5; // Инвертируем скорость вращения для более интуитивного управления
-            controls.enableDamping = true; // Для плавного замедления
-            controls.dampingFactor = 0.05;
-            // Загрузка и добавление скайбокса
-            loadSkybox(defaultSkyboxImage);
-            // Обработчик изменения размера окна
-            window.addEventListener('resize', onWindowResize, false);
-            // Обработчик загрузки файла
-            document.getElementById('file-input').addEventListener('change', (event) => {
-                const file = event.target.files[0];
-                if (file) {
-                    const reader = new FileReader();
-                    reader.onload = (e) => {
-                        loadSkybox(e.target.result);
-                    };
-                    reader.readAsDataURL(file);
-                }
             });
-        }
-        function loadSkybox(imageUrl) {
-            const loader = new THREE.TextureLoader();
-            loader.load(
-                imageUrl,
-                function (texture) {
-                    // Удаляем старую сферу, если она существует
-                    if (sphereMesh) {
-                        scene.remove(sphereMesh);
-                        sphereMesh.geometry.dispose();
-                        sphereMesh.material.dispose();
-                    }
-                    // 5. Geometry (сфера)
-                    const geometry = new THREE.SphereGeometry(500, 60, 40); // Большой радиус, чтобы камера была внутри
-                    // Инвертируем нормали, чтобы текстура отображалась изнутри сферы
-                    geometry.scale(-1, 1, 1);
-                    // 6. Material (текстура)
-                    const material = new THREE.MeshBasicMaterial({ map: texture });
-                    // 7. Mesh (собираем)
-                    sphereMesh = new THREE.Mesh(geometry, material);
-                    scene.add(sphereMesh);
-                },
-                undefined, // onProgress callback (можно добавить индикатор загрузки)
-                function (err) {
-                    console.error('Ошибка загрузки текстуры:', err);
-                    alert('Не удалось загрузить изображение. Убедитесь, что это корректный файл изображения.');
-                }
-            );
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        function animate() {
-            requestAnimationFrame(animate); // Зацикливаем анимацию
-            controls.update(); // Обновляем контролы (важно для enableDamping)
-            renderer.render(scene, camera); // Рендерим сцену
-        }
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>360 Лесной Скайбокс</title>
+    <!-- Стили Pannellum (загружаются из CDN) -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.css"/>
     <style>
+        /* Общие стили для страницы */
+        body, html {
             margin: 0;
+            padding: 0;
+            height: 100%;
+            width: 100%;
+            overflow: hidden; /* Убираем полосы прокрутки */
+            font-family: sans-serif;
+            background-color: #f0f0f0;
+            color: #333;
         }
+        /* Контейнер для панорамы */
+        #panorama {
+            width: 100%;
+            height: 100%;
         }
+        /* Стили для инструкции (по желанию) */
+        .instruction {
             position: absolute;
             top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0, 0, 0, 0.6);
             color: white;
+            padding: 8px 15px;
+            border-radius: 5px;
             font-size: 14px;
+            z-index: 1000;
+            text-align: center;
         }
+        @media (max-width: 600px) {
+            .instruction {
+                font-size: 12px;
+                padding: 6px 10px;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Контейнер, куда будет загружена панорама -->
+    <div id="panorama"></div>
+    <!-- Инструкция для пользователя -->
+    <div class="instruction">
+        Перетащите мышью, чтобы вращать. Колесо мыши - масштабирование.
+    </div>
+    <!-- Скрипт Pannellum (загружается из CDN) -->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.js"></script>
+    <script>
+        // Инициализация Pannellum после полной загрузки DOM
+        document.addEventListener('DOMContentLoaded', function() {
+            pannellum.viewer('panorama', {
+                "type": "equirectangular", // Тип панорамы (эквиректакулярная)
+                "panorama": "forest_skybox.jpg", // *** ВАЖНО: Укажите здесь ПРАВИЛЬНОЕ ИМЯ ВАШЕГО ФАЙЛА С ИЗОБРАЖЕНИЕМ ***
+                "autoLoad": true,       // Автоматически загружать панораму
+                "autoRotate": -2,       // Автоматическое медленное вращение (-2 для вращения влево, 2 для вправо)
+                "autoRotateInactivityDelay": 1000, // Задержка перед началом авто-вращения после неактивности пользователя
+                "orientationOnByDefault": false, // Не использовать гироскоп по умолчанию (для мобильных)
+                "showZoom": true,       // Показывать кнопки масштабирования
+                "showControls": true,   // Показывать элементы управления (зум, полноэкранный режим)
+                "mouseZoom": true,      // Включить зум колесом мыши
+                "hfov": 100,            // Начальный горизонтальный угол обзора (Field of View)
+                "minHfov": 50,          // Минимальный горизонтальный угол обзора (максимальное увеличение)
+                "maxHfov": 120          // Максимальный горизонтальный угол обзора (минимальное увеличение)
             });
+        });
     </script>
 </body>
 </html>