Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

626501e

verified ·

1 Parent(s): f6f9e61

Update index.html

Browse files

Files changed (1) hide show

index.html +321 -356

index.html CHANGED Viewed

@@ -3,11 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Arctic Mineral Water - 3D Презентация</title>
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> <!-- Для поддержки pointer events -->
     <style>
         html, body {
             overflow: hidden;
@@ -16,422 +12,391 @@
             margin: 0;
             padding: 0;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #000; /* Фон на случай медленной загрузки */
-            color: #fff;
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Важно для PEP */
-        }
-        #loadingScreen {
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #1a237e; /* Глубокий синий */
-            color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 2em;
-            z-index: 100;
-            transition: opacity 1s ease-out;
         }
-         #loadingScreen.hidden {
             opacity: 0;
-            pointer-events: none;
         }
-        #ui-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 15px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: center; /* Центрируем кнопки навигации */
-            align-items: center;
-            z-index: 10;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
-            flex-wrap: wrap; /* Перенос кнопок на мобильных */
-            gap: 10px; /* Расстояние между кнопками */
         }
-        .nav-button {
-            padding: 10px 15px;
-            background-color: rgba(25, 118, 210, 0.8); /* Синий с прозрачностью */
-            color: white;
-            border: 1px solid rgba(255, 255, 255, 0.5);
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 0.9em;
-            transition: background-color 0.3s ease, transform 0.1s ease;
-            text-align: center;
         }
-        .nav-button:hover, .nav-button:focus {
-            background-color: rgba(13, 71, 161, 0.9); /* Темнее при наведении */
-            outline: none;
         }
-         .nav-button:active {
-            transform: scale(0.95);
-         }
-        #content-display {
             position: absolute;
-            top: 20px;
             left: 50%;
             transform: translateX(-50%);
-            width: 80%;
-            max-width: 600px;
-            background-color: rgba(0, 20, 50, 0.85); /* Темно-синий фон */
-            padding: 20px;
-            border-radius: 8px;
-            border: 1px solid rgba(100, 181, 246, 0.7); /* Светло-голубая рамка */
-            z-index: 5;
-            opacity: 0;
-            transition: opacity 0.8s ease-in-out;
-            pointer-events: none; /* Не мешает взаимодействию с 3D если нужно */
-            text-align: center;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-        }
-        #content-display.visible {
-            opacity: 1;
         }
-        #content-display h2 {
-            margin-top: 0;
-            color: #e3f2fd; /* Очень светлый голубой */
-            border-bottom: 1px solid rgba(100, 181, 246, 0.5);
-            padding-bottom: 10px;
-            margin-bottom: 15px;
-        }
-        #content-display p {
-            margin-bottom: 0;
-            color: #bbdefb; /* Светло-голубой */
-            line-height: 1.6;
-        }
-         /* Стилизация логотипа (опционально) */
-         #logo {
-             position: absolute;
-             top: 15px;
-             left: 15px;
-             font-size: 1.5em;
-             font-weight: bold;
-             color: #fff;
-             z-index: 11;
-             text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
          }
     </style>
 </head>
 <body>
-    <div id="loadingScreen">
-        <div>Загрузка Arctic 3D...</div>
     </div>
-    <canvas id="renderCanvas"></canvas>
-    <div id="logo">Arctic</div>
-    <div id="ui-overlay">
-        <button class="nav-button" data-target="welcome">Главная</button>
-        <button class="nav-button" data-target="source">Источник</button>
-        <button class="nav-button" data-target="product">Наш Продукт</button>
-        <button class="nav-button" data-target="purity">Чистота</button>
     </div>
-    <div id="content-display">
-        <h2></h2>
-        <p></p>
     </div>
-    <script>
-        const canvas = document.getElementById("renderCanvas");
-        const loadingScreen = document.getElementById('loadingScreen');
-        const contentDisplay = document.getElementById('content-display');
-        const contentTitle = contentDisplay.querySelector('h2');
-        const contentText = contentDisplay.querySelector('p');
-        // --- Контент для секций ---
-        const sectionContent = {
-            welcome: {
-                title: "Добро пожаловать в мир Arctic",
-                text: "Откройте для себя чистоту и свежесть арктических ледников в каждой капле. Наша вода - это дар природы, бережно сохраненный для вас."
-            },
-            source: {
-                title: "Наш Источник",
-                text: "Вода 'Arctic' добывается из реликтового подледного озера в экологически чистом регионе Арктики. Уникальный минеральный состав и природная фильтрация."
-            },
-            product: {
-                title: "Вода Arctic",
-                text: "Идеально сбалансированная минеральная вода. Представлена в уникальной бутылке, напоминающей кристалл льда. Освежает и наполняет энергией."
-            },
-            purity: {
-                title: "Гарантия Чистоты",
-                text: "Современные технологии и строгий контроль качества на каждом этапе производства гарантируют первозданную чистоту и безопасность нашей воды."
-            }
-        };
-        // --- Инициализация Babylon.js ---
         const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
-        engine.displayLoadingUI = function() { /* Отключаем стандартный загрузчик */ };
         let scene;
         let camera;
-        // --- Создание сцены ---
-        function createScene() {
             scene = new BABYLON.Scene(engine);
-            scene.clearColor = new BABYLON.Color3.FromHexString("#051937"); // Т��мно-синий фон
-            // --- Камера ---
-            // Используем UniversalCamera для возможности управления (хотя здесь оно отключено)
-            // и для простоты анимации position/target
-            camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 5, -20), scene);
-            camera.setTarget(BABYLON.Vector3.Zero()); // Смотрим в центр вначале
-            camera.attachControl(canvas, false); // Отключаем стандартное управление камерой
-            camera.speed = 0.5;
-            camera.minZ = 0.5; // Важно для близких объектов и скайбокса
-            // --- Свет ---
-            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
-            light.intensity = 0.8;
-            light.groundColor = new BABYLON.Color3(0.5, 0.7, 1); // Холодный цвет снизу
-            const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 10, -10), scene);
-            pointLight.intensity = 0.5;
-            // --- Скайбокс (Арктическая тема) ---
-            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
             const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-            // Используем текстуру с CDN (замените на свою, если нужно)
-            // Пример текстуры северного сияния:
-             skyboxMaterial.backFaceCulling = false;
-            // Можно использовать CubeTexture с 6 изображениями для лучшего результата
-            // Пример: https://www.babylonjs-playground.com/textures/skybox_nx.jpg и т.д.
-            // Для простоты используем одну текстуру на все стороны
-            skyboxMaterial.reflectionTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/environment.env", scene); // Пример .env текстуры
             skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); // Не нужен цвет, если есть отражение/эмиссия
             skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-            skyboxMaterial.disableLighting = true; // Не зависит от освещения сцены
             skybox.material = skyboxMaterial;
-            skybox.infiniteDistance = true; // Фикс для рендеринга
-            // --- Объекты сцены (представляют секции) ---
-            // 1. Приветствие (Центральная точка)
-            const welcomeAnchor = new BABYLON.TransformNode("welcomeAnchor", scene);
-            welcomeAnchor.position = new BABYLON.Vector3(0, 2, 0);
-            // Можно добавить сюда логотип Arctic или абстрактную фигуру
-             const welcomeSphere = BABYLON.MeshBuilder.CreateSphere("welcomeSphere", {diameter: 3}, scene);
-             welcomeSphere.material = new BABYLON.StandardMaterial("welcomeMat", scene);
-             welcomeSphere.material.diffuseColor = new BABYLON.Color3(0.8, 0.9, 1);
-             welcomeSphere.material.alpha = 0.7;
-             welcomeSphere.parent = welcomeAnchor;
-            // 2. Источник (Ледяная пещера / скала - символически)
-            const sourceAnchor = new BABYLON.TransformNode("sourceAnchor", scene);
-            sourceAnchor.position = new BABYLON.Vector3(-15, 3, 5);
-            const sourceShape = BABYLON.MeshBuilder.CreateIcoSphere("sourceShape", {radius: 2.5, subdivisions: 2}, scene);
-            sourceShape.material = new BABYLON.StandardMaterial("sourceMat", scene);
-            sourceShape.material.diffuseColor = new BABYLON.Color3(0.5, 0.7, 0.9);
-            sourceShape.material.wireframe = true; // Эффект кристаллической решетки
-            sourceShape.parent = sourceAnchor;
-            // 3. Продукт (Бутылка - здесь примитив, нужна модель)
-            const productAnchor = new BABYLON.TransformNode("productAnchor", scene);
-            productAnchor.position = new BABYLON.Vector3(15, 2.5, 8);
-            // Имитация бутылки цилиндром
-            const bottle = BABYLON.MeshBuilder.CreateCylinder("bottle", {height: 4, diameterTop: 0.8, diameterBottom: 1.2}, scene);
-            bottle.material = new BABYLON.StandardMaterial("bottleMat", scene);
-            bottle.material.diffuseColor = new BABYLON.Color3(0.7, 0.85, 1.0);
-            bottle.material.alpha = 0.8; // Полупрозрачность
-            bottle.parent = productAnchor;
-             // Добавим эффект "воды" или "чистоты" - частицы
-             const particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);
-             particleSystem.particleTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/flare.png", scene); // Текстура частицы
-             particleSystem.emitter = productAnchor; // Эмиттер - точка у "бутылки"
-             particleSystem.minEmitBox = new BABYLON.Vector3(-0.5, 2, -0.5); // Область старта частиц
-             particleSystem.maxEmitBox = new BABYLON.Vector3(0.5, 2.5, 0.5);
-             particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
-             particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
-             particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);
-             particleSystem.minSize = 0.1;
-             particleSystem.maxSize = 0.3;
-             particleSystem.minLifeTime = 0.5;
-             particleSystem.maxLifeTime = 2.0;
-             particleSystem.emitRate = 300;
-             particleSystem.blendMode = BABYLON.ParticleSystem.BLENDMODE_ONEONE;
-             particleSystem.gravity = new BABYLON.Vector3(0, -1.0, 0); // Легкое падение
-             particleSystem.direction1 = new BABYLON.Vector3(-1, 2, -1);
-             particleSystem.direction2 = new BABYLON.Vector3(1, 2, 1);
-             particleSystem.minAngularSpeed = 0;
-             particleSystem.maxAngularSpeed = Math.PI;
-             particleSystem.targetStopDuration = 0;
-             particleSystem.minEmitPower = 1;
-             particleSystem.maxEmitPower = 3;
-             particleSystem.updateSpeed = 0.01;
-             particleSystem.start();
-            // 4. Чистота (Символическая структура)
-            const purityAnchor = new BABYLON.TransformNode("purityAnchor", scene);
-            purityAnchor.position = new BABYLON.Vector3(0, 4, 20); // Дальше
-             const purityShape = BABYLON.MeshBuilder.CreateTorus("purityShape", {diameter: 4, thickness: 0.3, tessellation: 64}, scene);
-             purityShape.material = new BABYLON.StandardMaterial("purityMat", scene);
-             purityShape.material.diffuseColor = new BABYLON.Color3(1, 1, 1);
-             purityShape.material.emissiveColor = new BABYLON.Color3(0.5, 0.8, 1); // Свечение
-             purityShape.parent = purityAnchor;
-             purityShape.rotation.x = Math.PI / 2; // Повернуть для вида
-            // --- "Земля" или ледяная поверхность ---
-            const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 50, height: 50}, scene);
-            const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
-            // Текстура льда/снега (пример)
-            const groundTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/ground.jpg", scene); // Замените на текстуру льда/снега
-            groundTexture.uScale = 5;
-            groundTexture.vScale = 5;
-            groundMaterial.diffuseTexture = groundTexture;
-            groundMaterial.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2); // Блики льда
-             groundMaterial.reflectionTexture = new BABYLON.MirrorTexture("mirror", 512, scene, true);
-             groundMaterial.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, 0); // Отражение от Y=0
-             groundMaterial.reflectionTexture.renderList = scene.meshes.filter(m => m !== ground && m !== skybox); // Отражать все, кроме земли и скайбокса
-             groundMaterial.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-             groundMaterial.reflectionFresnelParameters.bias = 0.1; // Небольшое отражение
-            ground.material = groundMaterial;
-            ground.position.y = -0.1; // Чуть ниже нуля
-            // --- Анимация и навигация ---
-            const targets = {
-                welcome: { pos: new BABYLON.Vector3(0, 4, -15), target: welcomeAnchor.position },
-                source: { pos: new BABYLON.Vector3(-12, 5, -2), target: sourceAnchor.position },
-                product: { pos: new BABYLON.Vector3(12, 4, 0), target: productAnchor.position },
-                purity: { pos: new BABYLON.Vector3(0, 6, 12), target: purityAnchor.position }
-            };
-            function navigateTo(targetName) {
-                const targetInfo = targets[targetName];
-                if (!targetInfo) return;
-                // Скрываем старый контент
-                contentDisplay.classList.remove('visible');
-                // Плавная анимация камеры
-                const frameRate = 60;
-                const duration = 1.5; // Секунды
-                const camPosAnim = new BABYLON.Animation("camPosAnim", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
-                const camTargetAnim = new BABYLON.Animation("camTargetAnim", "target", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
-                const keysPos = [];
-                keysPos.push({ frame: 0, value: camera.position });
-                keysPos.push({ frame: frameRate * duration, value: targetInfo.pos });
-                camPosAnim.setKeys(keysPos);
-                 // Для UniversalCamera анимируем не target, а rotationQuaternion или rotation
-                 // Проще анимировать сам target Vector3, к которому камера привязана
-                 // Создадим временный анимируемый таргет
-                 const currentTarget = camera.getTarget();
-                 const targetAnimNode = new BABYLON.TransformNode("targetAnimNode", scene);
-                 targetAnimNode.position = currentTarget.clone();
-                 camera.setTarget(targetAnimNode.position); // Привязываем камеру к ноде
-                 const targetPosAnim = new BABYLON.Animation("targetPosAnim", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
-                 const keysTargetPos = [];
-                 keysTargetPos.push({ frame: 0, value: targetAnimNode.position });
-                 keysTargetPos.push({ frame: frameRate * duration, value: targetInfo.target });
-                 targetPosAnim.setKeys(keysTargetPos);
-                // Добавляем Easing Function для плавности
-                const easingFunction = new BABYLON.CubicEase();
-                easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                camPosAnim.setEasingFunction(easingFunction);
-                targetPosAnim.setEasingFunction(easingFunction);
-                 // Запускаем анимации
-                scene.beginDirectAnimation(camera, [camPosAnim], 0, frameRate * duration, false);
-                scene.beginDirectAnimation(targetAnimNode, [targetPosAnim], 0, frameRate * duration, false, () => {
-                     // По завершению анимации показываем новый контент
-                     const content = sectionContent[targetName];
-                     contentTitle.textContent = content.title;
-                     contentText.textContent = content.text;
-                     contentDisplay.classList.add('visible');
-                     // Отвязываем камеру от временной ноды и устанавливаем финальный таргет
-                     // Хотя можно и оставить привязанной, если не планируется другого управления
-                     camera.setTarget(targetInfo.target);
-                     targetAnimNode.dispose(); // Удаляем временную ноду
-                 });
-            }
-            // --- Привязка кнопок ---
-            const buttons = document.querySelectorAll('.nav-button');
-            buttons.forEach(button => {
-                button.addEventListener('click', () => {
-                    const target = button.getAttribute('data-target');
-                    navigateTo(target);
-                });
-                 button.addEventListener('touchstart', (e) => { // Для лучшего отклика на мобильных
-                     e.preventDefault(); // Предотвратить эмуляцию мыши
-                     button.click();
-                 }, { passive: false });
             });
-            // --- Инициализация первого вида ---
-             setTimeout(() => { // Небольшая задержка для показа сцены перед анимацией
-                 navigateTo('welcome');
-             }, 500);
-             // --- Дополнительные эффекты (опционально) ---
-             // Легкое вращение объектов для динамики
-             scene.registerBeforeRender(() => {
-                 if(welcomeSphere) welcomeSphere.rotation.y += 0.002;
-                 if(sourceShape) sourceShape.rotation.x += 0.003;
-                 if(bottle) bottle.rotation.y -= 0.005;
-                 if(purityShape) purityShape.rotation.z += 0.004;
-             });
-            return scene;
-        }
-        // --- Запуск ---
-        scene = createScene();
-        // --- Обработка готовности сцены и скрытие загрузчика ---
-         scene.executeWhenReady(() => {
-             engine.runRenderLoop(function () {
-                 if (scene && scene.activeCamera) {
-                     scene.render();
-                 }
-             });
-             // Плавно скрываем загрузочный экран
-             loadingScreen.classList.add('hidden');
-         });
-        // --- Адаптация под размер окна ---
-        window.addEventListener("resize", function () {
             engine.resize();
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Arctic - Чистейшая Минеральная Вода</title>
     <style>
         html, body {
             overflow: hidden;
             margin: 0;
             padding: 0;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: #fff; /* Белый текст по умолчанию */
+            background-color: #001f3f; /* Темно-синий фон на случай долгой загрузки */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none; /* Отключает стандартные действия браузера при касании (скролл, зум) */
+            display: block; /* Убирает лишний отступ снизу */
             position: absolute;
             top: 0;
             left: 0;
+            z-index: 1;
         }
+        /* Стили для контентных блоков */
+        .content-section {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 2; /* Поверх канваса */
+            background-color: rgba(0, 31, 63, 0.7); /* Полупрозрачный темно-синий фон */
+            padding: 30px;
+            border-radius: 15px;
+            max-width: 80%;
+            width: 500px; /* Или другая ширина */
+            text-align: center;
             opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
+            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
         }
+        .content-section.active {
+            opacity: 1;
+            visibility: visible;
         }
+        .content-section h2 {
+            margin-top: 0;
+            font-size: 2.5em;
+            color: #7FDBFF; /* Светло-голубой акцент */
+            text-shadow: 0 0 10px rgba(127, 219, 255, 0.5);
         }
+        .content-section p {
+            font-size: 1.1em;
+            line-height: 1.6;
         }
+        /* Стили для мобильных контролов */
+        #mobile-controls {
             position: absolute;
+            bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
+            z-index: 3; /* Поверх всего */
+            display: none; /* По умолчанию скрыты, показываем через JS если тачскрин */
+            background-color: rgba(0, 31, 63, 0.8);
+            padding: 10px 20px;
+            border-radius: 25px;
         }
+         #mobile-controls button {
+            background-color: #7FDBFF;
+            color: #001f3f;
+            border: none;
+            padding: 12px 25px;
+            margin: 0 10px;
+            border-radius: 20px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.1s ease;
+         }
+         #mobile-controls button:active {
+             background-color: #ffffff;
+             transform: scale(0.95);
+         }
+         /* Стиль для индикатора загрузки Babylon.js */
+         .babylonLoadingScreenContainer {
+            background-color: #001f3f !important;
+            color: #7FDBFF !important;
+         }
+         .babylonLoadingScreenContainer .babylonLoadingScreenText {
+             font-size: 1.5em !important;
          }
     </style>
+    <!-- Подключение Babylon.js -->
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- Подключение материалов (для WaterMaterial) -->
+    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+    <!-- Подключение загрузчиков (если будете использовать 3D модели) -->
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
 </head>
 <body>
+    <canvas id="renderCanvas"></canvas>
+    <!-- Контентные блоки (скрыты по умолчанию) -->
+    <div id="section-home" class="content-section">
+        <h2>Arctic</h2>
+        <p>Чистота северных ледников в каждой капле. Откройте для себя истинный вкус природы.</p>
     </div>
+    <div id="section-source" class="content-section">
+        <h2>Наш Источник</h2>
+        <p>Вода "Arctic" добывается из реликтового подземного озера, защищенного вечной мерзлотой. Уникальная природная фильтрация дарит ей кристальную чистоту и сбалансированный минеральный состав.</p>
+    </div>
+    <div id="section-purity" class="content-section">
+        <h2>Идеальная Чистота</h2>
+        <p>Современные технологии розлива в сочетании с природной чистотой источника гарантируют сохранение всех полезных свойств воды "Arctic" без добавления консервантов.</p>
+    </div>
+    <div id="section-product" class="content-section">
+        <h2>Наш Продукт</h2>
+        <p>Попробуйте "Arctic" в удобной упаковке: классическая ПЭТ ��утылка 0.5л и 1.5л, а также премиальная стеклянная бутылка 0.75л для особых случаев.</p>
+        <!-- Сюда можно добавить изображения или 3D-превью бутылок -->
     </div>
+    <div id="section-contact" class="content-section">
+        <h2>Связаться с нами</h2>
+        <p>Узнайте больше о воде "Arctic" и условиях сотрудничества. <br> Телефон: +7 (XXX) XXX-XX-XX <br> Email: [email protected]</p>
     </div>
+    <!-- Мобильные кнопки навигации -->
+    <div id="mobile-controls">
+        <button id="prevBtn">< Назад</button>
+        <button id="nextBtn">Далее ></button>
+    </div>
+    <script>
+        const canvas = document.getElementById('renderCanvas');
         const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
+        // --- Настройки сцены ---
         let scene;
         let camera;
+        let waterMaterial;
+        const sectionElements = [
+            document.getElementById('section-home'),
+            document.getElementById('section-source'),
+            document.getElementById('section-purity'),
+            document.getElementById('section-product'),
+            document.getElementById('section-contact')
+        ];
+        const sectionPositions = [
+            new BABYLON.Vector3(0, 5, -10),    // Home (Начальная позиция)
+            new BABYLON.Vector3(0, 5, 50),     // Source
+            new BABYLON.Vector3(50, 5, 100),   // Purity
+            new BABYLON.Vector3(0, 5, 150),    // Product
+            new BABYLON.Vector3(-50, 5, 200)   // Contact
+        ];
+        const cameraLookAtOffsets = [ // Куда смотрит камера для каждой секции (относительно позиции камеры)
+             new BABYLON.Vector3(0, 0, 50), // Home смотрит вперед
+             new BABYLON.Vector3(0, 0, 50), // Source смотрит вперед
+             new BABYLON.Vector3(0, -2, 50),// Purity смотрит чуть вперед и вниз
+             new BABYLON.Vector3(0, 0, 50), // Product смотрит вперед
+             new BABYLON.Vector3(0, 0, 50)  // Contact смотрит вперед
+        ];
+        let currentSectionIndex = 0;
+        let isAnimating = false; // Флаг для предотвращения спама навигации
+        // --- Функция создания сцены ---
+        const createScene = () => {
             scene = new BABYLON.Scene(engine);
+            scene.clearColor = new BABYLON.Color4(0.1, 0.2, 0.4, 1.0); // Глубокий синий цвет фона
+            // Камера
+            // Используем UniversalCamera для более гибкого управления взглядом
+            camera = new BABYLON.UniversalCamera("camera1", sectionPositions[0], scene);
+            camera.setTarget(sectionPositions[0].add(cameraLookAtOffsets[0])); // Устанавливаем начальный взгляд
+            // camera.attachControl(canvas, true); // Отключаем стандартное управление камерой
+            // Свет
+            const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
+            light.intensity = 0.8;
+            const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
+            dirLight.position = new BABYLON.Vector3(20, 40, 20);
+            dirLight.intensity = 0.7;
+            // Вода (Используем WaterMaterial)
+            // Замените 'assets/waterbump.png' на ваш путь к текстуре нормалей воды
+            waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(1024, 1024));
+            waterMaterial.bumpTexture = new BABYLON.Texture("assets/waterbump.png", scene); // Текстура для волн
+            waterMaterial.windForce = -5; // Сила ветра (влияет на скорость волн)
+            waterMaterial.waveHeight = 0.15; // Высота волн
+            waterMaterial.bumpHeight = 0.2; // Интенсивность рельефа
+            waterMaterial.waveLength = 0.1; // Длина волны
+            waterMaterial.waterColor = new BABYLON.Color3(0.1, 0.3, 0.6); // Цвет воды
+            waterMaterial.colorBlendFactor = 0.5; // Смешивание цвета воды и отражений/преломлений
+            waterMaterial.disableClipPlane = true; // Важно для UniversalCamera над водой
+            // Создаем водную поверхность
+            const waterMesh = BABYLON.MeshBuilder.CreateGround("waterMesh", {width: 1000, height: 1000, subdivisions: 32}, scene);
+            waterMesh.material = waterMaterial;
+            waterMesh.position.y = -0.5; // Немного ниже уровня камеры
+            // Skybox (Небо/Окружение)
+            // Замените 'assets/' на ваш путь и имена файлов skybox
+            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
             const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
+            skyboxMaterial.backFaceCulling = false;
+            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene, ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]);
             skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
+            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
             skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
             skybox.material = skyboxMaterial;
+            // Добавляем объекты в список рендеринга для воды (отражения/преломления)
+            waterMaterial.addToRenderList(skybox);
+            // Если добавите другие объекты (айсберги, бутылки), их тоже нужно добавить:
+            // waterMaterial.addToRenderList(icebergMesh);
+            // waterMaterial.addToRenderList(bottleModel);
+            // --- Плейсхолдер для 3D модели бутылки (замените на загрузку вашей модели) ---
+             const bottlePlaceholder = BABYLON.MeshBuilder.CreateCylinder("bottle", {height: 4, diameterTop: 0.8, diameterBottom: 1.2}, scene);
+             bottlePlaceholder.position = new BABYLON.Vector3(-5, 2, 155); // Позиция рядом с секцией "Продукт"
+             const bottleMat = new BABYLON.StandardMaterial("bottleMat", scene);
+             bottleMat.diffuseColor = new BABYLON.Color3(0.7, 0.85, 1); // Светло-голубой
+             bottleMat.alpha = 0.8; // Полупрозрачность
+             bottlePlaceholder.material = bottleMat;
+             waterMaterial.addToRenderList(bottlePlaceholder); // Добавить к отражениям воды
+            // Анимация вращения бутылки (опционально)
+            scene.registerBeforeRender(() => {
+                 bottlePlaceholder.rotation.y += 0.01;
             });
+            // --- Конец плейсхолдера ---
+            // Показать первую секцию сразу
+            showSection(currentSectionIndex);
+            return scene;
+        };
+        // --- Функция отображения нужной секции ---
+        const showSection = (index) => {
+            sectionElements.forEach((el, i) => {
+                if (i === index) {
+                    el.classList.add('active');
+                } else {
+                    el.classList.remove('active');
+                }
+            });
+        };
+        // --- Функция навигации к секции ---
+        const navigateToSection = (index) => {
+            if (isAnimating || index < 0 || index >= sectionPositions.length) {
+                return; // Не анимировать, если уже анимируется или индекс вне диапазона
+            }
+            isAnimating = true;
+            const targetPosition = sectionPositions[index];
+            const targetLookAt = targetPosition.add(cameraLookAtOffsets[index]); // Целевая точка взгляда
+            // Плавный переход текста (начинаем скрывать текущий)
+            sectionElements[currentSectionIndex].classList.remove('active');
+            // Анимация позиции камеры
+            const animCamPos = new BABYLON.Animation(
+                "camPosAnim", "position", 60,
+                BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
+                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
+            );
+            const keysPos = [];
+            keysPos.push({ frame: 0, value: camera.position });
+            keysPos.push({ frame: 100, value: targetPosition }); // 100 кадров анимации
+            animCamPos.setKeys(keysPos);
+            // Анимация цели (взгляда) камеры
+             const animCamTarget = new BABYLON.Animation(
+                "camTargetAnim", "target", 60, // Используем 'target' для UniversalCamera
+                BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
+                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
+            );
+             const keysTarget = [];
+             keysTarget.push({ frame: 0, value: camera.getTarget() });
+             keysTarget.push({ frame: 100, value: targetLookAt });
+             animCamTarget.setKeys(keysTarget);
+            // Добавляем Easing Function для плавности
+            const easingFunction = new BABYLON.QuadraticEase();
+            easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
+            animCamPos.setEasingFunction(easingFunction);
+            animCamTarget.setEasingFunction(easingFunction);
+            // Запускаем анимации
+            scene.beginDirectAnimation(camera, [animCamPos, animCamTarget], 0, 100, false, 1, () => {
+                // По завершении анимации
+                currentSectionIndex = index;
+                showSection(currentSectionIndex); // Показываем новый текст
+                isAnimating = false;
+                // Обновляем кнопки на мобильных
+                updateMobileButtons();
+            });
+        };
+        // --- Обновление состояния кнопок на мобильных ---
+        const updateMobileButtons = () => {
+            const prevBtn = document.getElementById('prevBtn');
+            const nextBtn = document.getElementById('nextBtn');
+            if (!prevBtn || !nextBtn) return;
+            prevBtn.disabled = currentSectionIndex === 0 || isAnimating;
+            nextBtn.disabled = currentSectionIndex === sectionPositions.length - 1 || isAnimating;
+        };
+        // --- Инициализация ---
+        engine.displayLoadingUI(); // Показать экран загрузки
+        scene = createScene();
+        engine.runRenderLoop(() => {
+            if (scene) {
+                scene.render();
+            }
+        });
+        window.addEventListener('resize', () => {
             engine.resize();
         });
+        // --- Обработка ввода ---
+        // 1. Скролл мышью для десктопа
+        let scrollTimeout;
+        const handleScroll = (event) => {
+            if (isAnimating) return; // Игнорировать скролл во время анимации
+            // Предотвращаем слишком частое срабатывание
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() => {
+                 const delta = Math.sign(event.deltaY); // Определяем направление скролла
+                 if (delta > 0) { // Скролл вниз
+                     navigateToSection(currentSectionIndex + 1);
+                 } else if (delta < 0) { // Скролл вверх
+                     navigateToSection(currentSectionIndex - 1);
+                 }
+            }, 100); // Небольшая задержка
+        };
+        // 2. Кнопки для мобильных
+        const setupMobileControls = () => {
+             const mobileControlsDiv = document.getElementById('mobile-controls');
+             const prevBtn = document.getElementById('prevBtn');
+             const nextBtn = document.getElementById('nextBtn');
+             // Проверяем, есть ли тач события (простой способ определить мобильное устройство)
+             const isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
+             if (isMobile && mobileControlsDiv && prevBtn && nextBtn) {
+                 mobileControlsDiv.style.display = 'block';
+                 prevBtn.addEventListener('click', () => navigateToSection(currentSectionIndex - 1));
+                 nextBtn.addEventListener('click', () => navigateToSection(currentSectionIndex + 1));
+                 // Обновляем состояние кнопок при загрузке
+                 updateMobileButtons();
+                 // Отключаем скролл мышью на мобильных, чтобы не конфликтовать
+                 canvas.removeEventListener('wheel', handleScroll);
+             } else {
+                 // Если не мобильное, используем скролл
+                 canvas.addEventListener('wheel', handleScroll, { passive: false }); // passive: false чтобы можно было предотвратить стандартный скролл страницы, если понадобится
+             }
+        };
+        // Запускаем настройку контролов после того, как сцена готова
+         scene.executeWhenReady(() => {
+             engine.hideLoadingUI(); // Скрыть экран загрузки
+             setupMobileControls();
+         });
     </script>
 </body>