Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 16 days ago

Commit

6c5795b

verified ·

1 Parent(s): dbc4d00

Update index.html

Browse files

Files changed (1) hide show

index.html +176 -110

index.html CHANGED Viewed

@@ -1,118 +1,184 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>Вода — Симуляция</title>
-  <style>
-    html, body {
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      background: #0e0f1b;
-    }
-    canvas {
-      display: block;
-      background: linear-gradient(#0f2027, #203a43, #2c5364);
-    }
-  </style>
 </head>
 <body>
-<canvas id="water"></canvas>
-<script>
-  const canvas = document.getElementById('water');
-  const ctx = canvas.getContext('2d');
-  let width = window.innerWidth;
-  let height = window.innerHeight;
-  canvas.width = width;
-  canvas.height = height;
-  const waveCount = 200;
-  const damping = 0.03;
-  const tension = 0.025;
-  const waves = [];
-  for (let i = 0; i < waveCount; i++) {
-    waves[i] = {
-      x: (i / (waveCount - 1)) * width,
-      y: height / 2,
-      vy: 0,
-      targetY: height / 2
-    };
-  }
-  function update() {
-    for (let i = 0; i < waveCount; i++) {
-      const point = waves[i];
-      const dy = point.y - point.targetY;
-      point.vy -= dy * tension;
-      point.vy *= 1 - damping;
-      point.y += point.vy;
-    }
-    // propagate waves
-    const leftDeltas = [], rightDeltas = [];
-    for (let j = 0; j < 8; j++) {
-      for (let i = 0; i < waveCount; i++) {
-        if (i > 0) {
-          leftDeltas[i] = 0.25 * (waves[i].y - waves[i - 1].y);
-          waves[i - 1].vy += leftDeltas[i];
         }
-        if (i < waveCount - 1) {
-          rightDeltas[i] = 0.25 * (waves[i].y - waves[i + 1].y);
-          waves[i + 1].vy += rightDeltas[i];
         }
-      }
-    }
-  }
-  function draw() {
-    ctx.clearRect(0, 0, width, height);
-    ctx.beginPath();
-    ctx.moveTo(0, height);
-    ctx.lineTo(waves[0].x, waves[0].y);
-    for (let i = 1; i < waveCount; i++) {
-      ctx.lineTo(waves[i].x, waves[i].y);
-    }
-    ctx.lineTo(width, height);
-    ctx.closePath();
-    const gradient = ctx.createLinearGradient(0, height / 2, 0, height);
-    gradient.addColorStop(0, '#4facfe');
-    gradient.addColorStop(1, '#00f2fe');
-    ctx.fillStyle = gradient;
-    ctx.fill();
-  }
-  function loop() {
-    update();
-    draw();
-    requestAnimationFrame(loop);
-  }
-  loop();
-  canvas.addEventListener('mousemove', (e) => {
-    const mouseX = e.clientX;
-    const index = Math.floor((mouseX / width) * waveCount);
-    if (index >= 0 && index < waveCount) {
-      waves[index].vy = -5;
-    }
-  });
-  window.addEventListener('resize', () => {
-    width = window.innerWidth;
-    height = window.innerHeight;
-    canvas.width = width;
-    canvas.height = height;
-    for (let i = 0; i < waveCount; i++) {
-      waves[i].x = (i / (waveCount - 1)) * width;
-      waves[i].y = height / 2;
-      waves[i].targetY = height / 2;
-    }
-  });
-</script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="ru">
 <head>
+    <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>