Update index.html

index.html

@@ -4,6 +4,10 @@
     <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;
@@ -11,409 +15,423 @@
             height: 100%;
             margin: 0;
             padding: 0;
-            font-family: Arial, sans-serif;
-            background-color: #000; /* Фон на случай долгой загрузки */
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #000; /* Фон на случай медленной загрузки */
+            color: #fff;
         }
 
         #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Важно для Babylon.js на мобильных */
+            touch-action: none; /* Важно для PEP */
         }
 
-        /* Стили для информационных блоков */
-        .info-overlay {
+        #loadingScreen {
             position: absolute;
-            top: 15%;
-            left: 50%;
-            transform: translateX(-50%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #1a237e; /* Глубокий синий */
             color: white;
-            background-color: rgba(0, 20, 50, 0.7);
-            padding: 15px 25px;
-            border-radius: 10px;
-            text-align: center;
-            max-width: 80%;
-            box-shadow: 0 0 15px rgba(100, 150, 255, 0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 2em;
+            z-index: 100;
+            transition: opacity 1s ease-out;
+        }
+         #loadingScreen.hidden {
             opacity: 0;
-            transition: opacity 0.5s ease-in-out;
-            pointer-events: none; /* Чтобы не мешать взаимодействию с canvas */
+            pointer-events: none;
         }
 
-        .info-overlay.visible {
-            opacity: 1;
+        #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; /* Расстояние между кнопками */
         }
 
-        .info-overlay h2 {
-            margin-top: 0;
-            margin-bottom: 10px;
-            font-size: 1.5em;
-            color: #cceeff;
+        .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;
         }
 
-        .info-overlay p {
-            margin-bottom: 0;
-            font-size: 1em;
+        .nav-button:hover, .nav-button:focus {
+            background-color: rgba(13, 71, 161, 0.9); /* Темнее при наведении */
+            outline: none;
         }
+         .nav-button:active {
+            transform: scale(0.95);
+         }
 
-        /* Стили для кнопок навигации */
-        #navigation {
+        #content-display {
             position: absolute;
-            bottom: 20px;
+            top: 20px;
             left: 50%;
             transform: translateX(-50%);
-            display: flex;
-            gap: 15px;
-            z-index: 10;
+            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);
         }
 
-        #navigation button {
-            padding: 12px 20px;
-            font-size: 1em;
-            color: white;
-            background-color: rgba(0, 50, 100, 0.8);
-            border: 1px solid #cceeff;
-            border-radius: 25px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.1s ease;
-            box-shadow: 0 0 10px rgba(100, 150, 255, 0.4);
+        #content-display.visible {
+            opacity: 1;
         }
 
-         #navigation button:disabled {
-             background-color: rgba(50, 50, 50, 0.6);
-             color: #aaa;
-             cursor: not-allowed;
-             border-color: #777;
-         }
+        #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;
+        }
 
-        #navigation button:not(:disabled):active {
-             transform: scale(0.95);
+         /* Стилизация логотипа (опционально) */
+         #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);
          }
 
-        #loadingScreen {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #05101f;
-            color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.5em;
-            z-index: 100;
-            transition: opacity 1s ease-out;
-        }
     </style>
-    <!-- Подключение Babylon.js -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- Опционально: для загрузки моделей GLTF/GLB -->
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <!-- Опционально: для удобных материалов -->
-    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-
 </head>
 <body>
 
-    <div id="loadingScreen">Загрузка арктической среды...</div>
+    <div id="loadingScreen">
+        <div>Загрузка Arctic 3D...</div>
+    </div>
 
     <canvas id="renderCanvas"></canvas>
 
-    <!-- Информационные блоки (скрыты по умолчанию) -->
-    <div id="info-welcome" class="info-overlay">
-        <h2>Arctic</h2>
-        <p>Чистота северных ледников в каждой капле.</p>
-    </div>
-    <div id="info-source" class="info-overlay">
-        <h2>Источник</h2>
-        <p>Добывается из реликтового подземного озера под вечной мерзлотой.</p>
-    </div>
-    <div id="info-purity" class="info-overlay">
-        <h2>Кристальная Чистота</h2>
-        <p>Многоступенчатая природная фильтрация сквозь горные породы.</p>
-    </div>
-    <div id="info-bottle" class="info-overlay">
-        <h2>Уникальный Дизайн</h2>
-        <p>Бутылка, вдохновленная формой айсберга.</p>
+    <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="navigation">
-        <button id="prevBtn" disabled>Назад</button>
-        <button id="nextBtn">Далее</button>
+    <div id="content-display">
+        <h2></h2>
+        <p></p>
     </div>
 
     <script>
-        const canvas = document.getElementById('renderCanvas');
-        const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
+        const canvas = document.getElementById("renderCanvas");
         const loadingScreen = document.getElementById('loadingScreen');
-        const infoOverlays = {
-            welcome: document.getElementById('info-welcome'),
-            source: document.getElementById('info-source'),
-            purity: document.getElementById('info-purity'),
-            bottle: document.getElementById('info-bottle')
-        };
-        const prevBtn = document.getElementById('prevBtn');
-        const nextBtn = document.getElementById('nextBtn');
-
-        let currentStage = 0;
-        let scene = null;
-        let camera = null;
-        const animationDuration = 1.5; // Длительность анимации перехода (в секундах)
-
-        // Скрыть лоадер, когда сцена готова
-        engine.loadingScreen = {
-            displayLoadingUI: function() {
-                loadingScreen.style.opacity = '1';
+        const contentDisplay = document.getElementById('content-display');
+        const contentTitle = contentDisplay.querySelector('h2');
+        const contentText = contentDisplay.querySelector('p');
+
+        // --- Контент для секций ---
+        const sectionContent = {
+            welcome: {
+                title: "Добро пожаловать в мир Arctic",
+                text: "Откройте для себя чистоту и свежесть арктических ледников в каждой капле. Наша вода - это дар природы, бережно сохраненный для вас."
             },
-            hideLoadingUI: function() {
-                loadingScreen.style.opacity = '0';
-                // Скрыть после завершения анимации исчезновения
-                setTimeout(() => { loadingScreen.style.display = 'none'; }, 1000);
+            source: {
+                title: "Наш Источник",
+                text: "Вода 'Arctic' добывается из реликтового подледного озера в экологически чистом регионе Арктики. Уникальный минеральный состав и природная фильтрация."
             },
-            loadingUIBackgroundColor: "#05101f",
-            loadingUIText: "Загрузка арктической среды..."
+            product: {
+                title: "Вода Arctic",
+                text: "Идеально сбалансированная минеральная вода. Представлена в уникальной бутылке, напоминающей кристалл льда. Освежает и наполняет энергией."
+            },
+            purity: {
+                title: "Гарантия Чистоты",
+                text: "Современные технологии и строгий контроль качества на каждом этапе производства гарантируют первозданную чистоту и безопасность нашей воды."
+            }
         };
 
-        engine.displayLoadingUI(); // Показать лоадер сразу
+        // --- Инициализация 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(0.1, 0.2, 0.35); // Темно-синий фон
+            scene.clearColor = new BABYLON.Color3.FromHexString("#051937"); // Темно-синий фон
 
             // --- Камера ---
-            // Используем UniversalCamera для лучшего контроля над анимацией
+            // Используем UniversalCamera для возможности управления (хотя здесь оно отключено)
+            // и для простоты анимации position/target
             camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 5, -20), scene);
-            camera.setTarget(new BABYLON.Vector3(0, 2, 0));
-            // camera.attachControl(canvas, true); // Отключаем управление камерой по умолчанию
+            camera.setTarget(BABYLON.Vector3.Zero()); // Смотрим в центр вначале
+            camera.attachControl(canvas, false); // Отключаем стандартное управление камерой
+            camera.speed = 0.5;
+            camera.minZ = 0.5; // Важно для близких объектов и скайбокса
 
-            // --- Освещение ---
-            const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
+            // --- Свет ---
+            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); // Холодный цвет снизу
-            light.specular = BABYLON.Color3.Black(); // Убираем блики от этого света
-
-            const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.8), scene);
-            dirLight.position = new BABYLON.Vector3(20, 40, 30);
-            dirLight.intensity = 0.7;
-            dirLight.shadowMinZ = 1;
-            dirLight.shadowMaxZ = 150;
 
-            // --- Тень ---
-            const shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
-            shadowGenerator.useBlurExponentialShadowMap = true;
-            shadowGenerator.blurKernel = 32;
-            shadowGenerator.darkness = 0.5;
+            const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 10, -10), scene);
+            pointLight.intensity = 0.5;
 
-            // --- Skybox (Арктическое небо) ---
+            // --- Скайбокс (Арктическая тема) ---
             const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
-            const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
-            skyboxMaterial.backFaceCulling = false;
-            // Используем кубическую текстуру. Замените пути на реальные URL текстур неба!
-            // Эти текстуры взяты из примеров BabylonJS Playground
-             skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://playground.babylonjs.com/textures/skybox_ice", scene);
-            // Старые версии использовали:
-            // skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", 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.diffuseColor = new BABYLON.Color3(0, 0, 0); // Не нужен цвет, если есть отражение/эмиссия
             skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+            skyboxMaterial.disableLighting = true; // Не зависит от освещения сцены
             skybox.material = skyboxMaterial;
-            skybox.infiniteDistance = true; // Фиксируем скайбокс
-
-            // --- Ландшафт (Земля/Снег) ---
-            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 200, height: 200, subdivisions: 50 }, scene);
+            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);
-            // Простая текстура снега из Playground для примера
-            groundMaterial.diffuseTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/snow.jpg", scene);
-            groundMaterial.diffuseTexture.uScale = 10;
-            groundMaterial.diffuseTexture.vScale = 10;
-            groundMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Небольшой блик
-            groundMaterial.freeze(); // Оптимизация
+            // Текстура льда/снега (пример)
+            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.receiveShadows = true;
-
-             // --- Плейсхолдер бутылки ---
-             // !!! ЗАМЕНИТЬ НА РЕАЛЬНУЮ МОДЕЛЬ !!!
-             const bottlePlaceholder = BABYLON.MeshBuilder.CreateCylinder("bottle", { height: 4, diameterTop: 0.8, diameterBottom: 1, tessellation: 24 }, scene);
-             bottlePlaceholder.position = new BABYLON.Vector3(0, 2, 0); // Позиция в центре
-             const bottleMaterial = new BABYLON.StandardMaterial("bottleMat", scene);
-             bottleMaterial.diffuseColor = new BABYLON.Color3(0.6, 0.8, 1.0); // Голубоватый цвет
-             bottleMaterial.alpha = 0.7; // Полупрозрачность
-             bottleMaterial.specularColor = new BABYLON.Color3(0.8, 0.9, 1);
-             bottleMaterial.specularPower = 64;
-             // Добавляем отражение окружения для эффекта стекла/льда
-             bottleMaterial.reflectionTexture = skyboxMaterial.reflectionTexture;
-             bottleMaterial.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-             bottleMaterial.reflectionFresnelParameters.bias = 0.1;
-             bottleMaterial.reflectionFresnelParameters.power = 2;
-             bottlePlaceholder.material = bottleMaterial;
-             shadowGenerator.addShadowCaster(bottlePlaceholder); // Бутылка отбрасывает тень
-
-             // --- Простые элементы окружения (Ледяные глыбы/Горы) ---
-             const iceMaterial = new BABYLON.StandardMaterial("iceMat", scene);
-             iceMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.9, 1.0);
-             iceMaterial.alpha = 0.85;
-             iceMaterial.specularColor = new BABYLON.Color3(1, 1, 1);
-             iceMaterial.reflectionTexture = skyboxMaterial.reflectionTexture; // Отражения
-             iceMaterial.reflectionFresnelParameters = new BABYLON.FresnelParameters();
-             iceMaterial.reflectionFresnelParameters.bias = 0.3;
-             iceMaterial.reflectionFresnelParameters.power = 1.5;
-
-             const mountainPositions = [
-                 new BABYLON.Vector3(-40, 0, 50),
-                 new BABYLON.Vector3(50, 0, 30),
-                 new BABYLON.Vector3(0, 0, 70),
-                 new BABYLON.Vector3(-60, 0, -20),
-                 new BABYLON.Vector3(30, 0, -50),
-             ];
-
-             mountainPositions.forEach((pos, i) => {
-                 const size = 20 + Math.random() * 30;
-                 const mountain = BABYLON.MeshBuilder.CreateSphere(`ice_${i}`, {diameter: size}, scene);
-                 mountain.position = pos;
-                 mountain.scaling.y = 0.8 + Math.random() * 1.2; // Приплюснуть или вытянуть
-                 mountain.scaling.x = 1 + Math.random() * 0.5;
-                 mountain.scaling.z = 1 + Math.random() * 0.5;
-                 mountain.material = iceMaterial;
-                 shadowGenerator.addShadowCaster(mountain);
-                 mountain.receiveShadows = true;
+            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;
              });
 
-             // --- Добавить эффект легкого тумана/дымки ---
-             scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
-             scene.fogDensity = 0.006;
-             scene.fogColor = new BABYLON.Color3(0.5, 0.7, 0.9);
 
             return scene;
         }
 
-        // --- Логика навигации и анимации ---
-
-        // Определяем точки (стадии) обзора
-        const stages = [
-            { // 0: Начальный вид издалека
-                cameraPos: new BABYLON.Vector3(0, 8, -25),
-                cameraTarget: new BABYLON.Vector3(0, 2, 0),
-                infoId: 'welcome'
-            },
-            { // 1: Ближе к источнику (условному)
-                cameraPos: new BABYLON.Vector3(-15, 6, 15),
-                cameraTarget: new BABYLON.Vector3(-5, 1, 5), // Смотрим чуть в сторону
-                infoId: 'source'
-            },
-            { // 2: Вид на "чистоту" ландшафта
-                cameraPos: new BABYLON.Vector3(20, 10, 20),
-                cameraTarget: new BABYLON.Vector3(0, 0, 0), // Смотрим на центр
-                infoId: 'purity'
-            },
-             { // 3: Крупный план бутылки
-                 cameraPos: new BABYLON.Vector3(0, 3.5, -6),
-                 cameraTarget: new BABYLON.Vector3(0, 2, 0), // Смотрим на бутылку
-                 infoId: 'bottle'
-             }
-        ];
-
-        function updateUI(stageIndex) {
-             // Сначала скрыть все инфо-блоки
-             Object.values(infoOverlays).forEach(el => el.classList.remove('visible'));
-
-             // Показать нужный блок
-             const currentInfoId = stages[stageIndex]?.infoId;
-             if (currentInfoId && infoOverlays[currentInfoId]) {
-                 infoOverlays[currentInfoId].classList.add('visible');
-             }
-
-             // Обновить состояние кнопок
-             prevBtn.disabled = stageIndex === 0;
-             nextBtn.disabled = stageIndex === stages.length - 1;
-        }
+        // --- Запуск ---
+        scene = createScene();
 
-        function animateCameraToStage(stageIndex) {
-            const targetStage = stages[stageIndex];
-            if (!targetStage || !camera) return;
-
-            const frameRate = 60;
-            const totalFrames = animationDuration * frameRate;
-
-            // Анимация позиции камеры
-            const camPosAnimation = new BABYLON.Animation(
-                "camPosAnim",
-                "position",
-                frameRate,
-                BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
-                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
-            );
-            const keysPos = [];
-            keysPos.push({ frame: 0, value: camera.position });
-            keysPos.push({ frame: totalFrames, value: targetStage.cameraPos });
-            camPosAnimation.setKeys(keysPos);
-
-             // Добавляем Easing Function для плавности
-             const easingFunction = new BABYLON.QuadraticEase();
-             easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-             camPosAnimation.setEasingFunction(easingFunction);
-
-
-            // Анимация цели (точки, куда смотрит камера)
-             const camTargetAnimation = new BABYLON.Animation(
-                 "camTargetAnim",
-                 "target", // Используем setTarget для UniversalCamera
-                 frameRate,
-                 BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
-                 BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
-             );
-             const keysTarget = [];
-             keysTarget.push({ frame: 0, value: camera.getTarget() }); // Текущая цель
-             keysTarget.push({ frame: totalFrames, value: targetStage.cameraTarget });
-             camTargetAnimation.setKeys(keysTarget);
-             camTargetAnimation.setEasingFunction(easingFunction); // Та же плавность
-
-             // Запускаем обе анимации
-             scene.beginDirectAnimation(camera, [camPosAnimation, camTargetAnimation], 0, totalFrames, false, 1, () => {
-                 // Коллбэк после завершения анимации
-                 camera.setTarget(targetStage.cameraTarget); // Убедимся, что цель установлена точно
-                 updateUI(stageIndex); // Показать UI после завершения перехода
+        // --- Обработка готовности сцены и скрытие загрузчика ---
+         scene.executeWhenReady(() => {
+             engine.runRenderLoop(function () {
+                 if (scene && scene.activeCamera) {
+                     scene.render();
+                 }
              });
-        }
-
-        // --- Инициализация и обработчики событий ---
-        scene = createScene();
+             // Плавно скрываем загрузочный экран
+             loadingScreen.classList.add('hidden');
+         });
 
-        // Начать рендеринг
-        engine.runRenderLoop(function () {
-            if (scene && scene.activeCamera) {
-                scene.render();
-            }
-        });
 
-        // Обработка изменения размера окна
-        window.addEventListener('resize', function () {
+        // --- Адаптация под размер окна ---
+        window.addEventListener("resize", function () {
             engine.resize();
         });
 
-        // Обработчики кнопок
-        nextBtn.addEventListener('click', () => {
-            if (currentStage < stages.length - 1) {
-                currentStage++;
-                animateCameraToStage(currentStage);
-                updateUI(currentStage); // Можно обновить кнопки сразу, не дожидаясь конца анимации
-            }
-        });
-
-        prevBtn.addEventListener('click', () => {
-            if (currentStage > 0) {
-                currentStage--;
-                animateCameraToStage(currentStage);
-                updateUI(currentStage);
-            }
-        });
-
-        // Показать начальный UI после небольшой задержки (когда сцена уже видна)
-         scene.executeWhenReady(() => {
-             engine.hideLoadingUI(); // Скрыть экран загрузки
-             updateUI(currentStage); // Показать первый блок информации
-         });
-
     </script>
 
 </body>