Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

5f69ca1

verified ·

1 Parent(s): 1811dcf

Update index.html

Browse files

Files changed (1) hide show

index.html +369 -288

index.html CHANGED Viewed

@@ -2,16 +2,8 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Прото-Метавселенная Демо (Babylon.js)</title>
-    <meta name="description" content="Демонстрация простого 3D-мира на Babylon.js в одном HTML файле.">
-    <!-- Подключение Babylon.js и его зависимостей из CDN -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> -->
-    <!-- <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script> -->
-    <!-- Раскомментируйте loaders/materials, если будете загружать модели или использовать спец. материалы -->
     <style>
         html, body {
             overflow: hidden;
@@ -26,312 +18,401 @@
         #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Важно для управления камерой на мобильных */
-            outline: none; /* Убирает рамку фокуса */
         }
-        /* Стили для простого индикатора загрузки */
-        #loadingScreen {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #222;
             color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 2em;
-            z-index: 100;
-            transition: opacity 0.5s ease-out;
         }
-         /* Стили для простого виртуального джойстика (пример) */
-        #joystickArea {
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            width: 150px;
-            height: 150px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 50%;
-            display: none; /* Скрыт по умолчанию, можно показать для мобильных */
-            z-index: 10;
-            border: 2px solid rgba(255, 255, 255, 0.4);
         }
-        #joystickThumb {
-            position: absolute;
-            width: 60px;
-            height: 60px;
-            background: rgba(255, 255, 255, 0.5);
-            border-radius: 50%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            cursor: grab;
         }
-         /* Стиль для кнопки действия (пример) */
-        #actionButton {
             position: absolute;
-            bottom: 40px;
-            right: 40px;
-            width: 80px;
-            height: 80px;
-            background: rgba(0, 150, 255, 0.6);
-            border-radius: 50%;
-            display: none; /* Скрыт по умолчанию */
             z-index: 10;
-            border: 2px solid rgba(255, 255, 255, 0.4);
             color: white;
-            font-size: 1.5em;
-            text-align: center;
-            line-height: 80px; /* Центрирование текста по вертикали */
             cursor: pointer;
-            user-select: none; /* Запретить выделение текста */
         }
-        /* Медиа-запрос для отображения мобильных контролов */
-        @media (max-width: 768px) { /* или другое условие для тач-устройств */
-             #joystickArea {
-                 /* display: block; */ /* Пока джойстик не реализован */
-             }
-             #actionButton {
-                 /* display: block; */ /* Пока кнопка не реализована */
-             }
-        }
     </style>
 </head>
 <body>
-    <!-- Элемент Canvas для рендеринга 3D -->
-    <canvas id="renderCanvas"></canvas>
-    <!-- Экран загрузки -->
-    <div id="loadingScreen">Загрузка мира...</div>
-    <!-- Область для виртуального джойстика (упрощенно) -->
-    <div id="joystickArea">
-        <div id="joystickThumb"></div>
     </div>
-    <!-- Кнопка действия (упрощенно) -->
-    <div id="actionButton">A</div>
     <script>
-        // Получаем элементы DOM
         const canvas = document.getElementById('renderCanvas');
         const loadingScreen = document.getElementById('loadingScreen');
-        const joystickArea = document.getElementById('joystickArea');
-        const actionButton = document.getElementById('actionButton');
-        // Проверка поддержки WebGL
-        if (!BABYLON.Engine.isSupported()) {
-            window.alert('Ваш браузер не поддерживает WebGL, необходимый для Babylon.js!');
-        } else {
-            // Создание движка Babylon.js
-            const engine = new BABYLON.Engine(canvas, true, {
-                preserveDrawingBuffer: true, // Для скриншотов, если нужно
-                stencil: true,
-                antialias: true // Включаем сглаживание
-            }, true);
-            // Показываем экран загрузки Babylon по умолчанию
-            engine.displayLoadingUI();
-            // --- Создание сцены ---
-            const createScene = () => {
-                const scene = new BABYLON.Scene(engine);
-                scene.clearColor = new BABYLON.Color3(0.1, 0.1, 0.2); // Темно-синий фон
-                // --- Камера ---
-                // ArcRotateCamera - вращается вокруг цели, хорошо для мобильных и ПК
-                const camera = new BABYLON.ArcRotateCamera("camera",
-                    -Math.PI / 2.5, // Начальный угол (alpha)
-                    Math.PI / 3,   // Начальный угол (beta)
-                    20,            // Начальный радиус (удаление)
-                    new BABYLON.Vector3(0, 1, 0), // Точка, вокруг которой вращаемся
-                    scene);
-                camera.attachControl(canvas, true); // Привязываем управление к canvas (мышь/тач)
-                camera.lowerRadiusLimit = 5;     // Минимальное приближение
-                camera.upperRadiusLimit = 50;    // Максимальное удаление
-                camera.wheelPrecision = 50;      // Чувствительность колеса мыши/pinch-зума
-                // camera.useAutoRotationBehavior = true; // Автоматическое медленное вращение (опционально)
-                // --- Освещение ---
-                // Основной свет (имитация солнца)
-                const light = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, 0.3), scene);
-                light.position = new BABYLON.Vector3(20, 40, 20);
-                light.intensity = 1.0;
-                // Рассеянный свет (подсветка теней)
-                const hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
-                hemiLight.intensity = 0.4;
-                hemiLight.diffuse = new BABYLON.Color3(0.8, 0.85, 1); // Светлый холодный оттенок
-                hemiLight.groundColor = new BABYLON.Color3(0.3, 0.2, 0.1); // Теплый оттенок снизу
-                // --- Окружение ---
-                // Земля (плоскость)
-                const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 50, height: 50}, scene);
-                const groundMaterial = new BABYLON.PBRMetallicRoughnessMaterial("groundMat", scene);
-                groundMaterial.baseColor = new BABYLON.Color3(0.3, 0.5, 0.3); // Зеленоватый цвет
-                groundMaterial.metallic = 0.1; // Почти не металл
-                groundMaterial.roughness = 0.8; // Довольно шероховатая
-                ground.material = groundMaterial;
-                ground.receiveShadows = true; // Земля принимает тени
-                // Скайбокс (небо)
-                const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
-                const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
-                skyboxMaterial.backFaceCulling = false; // Видим внутренние стороны куба
-                // Простой процедурный скайбокс, чтобы не зависеть от внешних текстур
-                 skyboxMaterial.reflectionTexture = new BABYLON.HDRCubeTexture("./textures/environment.env", scene, 512, false, true, false, true); // Замените на реальный путь к .env/.hdr если есть
-                 skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; // Режим скайбокса
-                // Или можно сделать просто цвет:
-                // skyboxMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.8, 1.0); // Голубой
-                // skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // Без бликов
-                skyboxMaterial.disableLighting = true; // Не зависит от освещения сцены
-                skybox.material = skyboxMaterial;
-                skybox.infiniteDistance = true; // Скайбокс всегда далеко
-                // --- Объекты в мире ---
-                // Сфера
-                const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
-                sphere.position.y = 1.5;
-                sphere.position.x = -5;
-                const sphereMaterial = new BABYLON.PBRMetallicRoughnessMaterial("sphereMat", scene);
-                sphereMaterial.baseColor = new BABYLON.Color3(0.8, 0.2, 0.2); // Красный
-                sphereMaterial.metallic = 0.8;
-                sphereMaterial.roughness = 0.2;
-                sphere.material = sphereMaterial;
-                // Куб
-                const box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
-                box.position.y = 1;
-                box.position.x = 0;
-                box.rotation.y = Math.PI / 5; // Немного повернем
-                const boxMaterial = new BABYLON.PBRMetallicRoughnessMaterial("boxMat", scene);
-                boxMaterial.baseColor = new BABYLON.Color3(0.2, 0.3, 0.8); // Синий
-                boxMaterial.metallic = 0.2;
-                boxMaterial.roughness = 0.6;
-                box.material = boxMaterial;
-                // Цилиндр
-                const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: 3, diameter: 1.5}, scene);
-                cylinder.position.y = 1.5;
-                cylinder.position.x = 5;
-                const cylinderMaterial = new BABYLON.PBRMetallicRoughnessMaterial("cylMat", scene);
-                cylinderMaterial.baseColor = new BABYLON.Color3(0.9, 0.9, 0.9); // Белый
-                cylinderMaterial.metallic = 1.0; // Полностью металлический
-                cylinderMaterial.roughness = 0.1; // Очень гладкий
-                cylinder.material = cylinderMaterial;
-                // --- Тени ---
-                const shadowGenerator = new BABYLON.ShadowGenerator(1024, light); // 1024 - размер карты теней
-                shadowGenerator.useExponentialShadowMap = true; // Мягкие тени
-                // Добавляем объекты, отбрасывающие тень
-                shadowGenerator.addShadowCaster(sphere);
-                shadowGenerator.addShadowCaster(box);
-                shadowGenerator.addShadowCaster(cylinder);
-                // Тень от скайбокса не нужна
-                // ground.receiveShadows уже установлено
-                 // --- Простое взаимодействие (клик/тап по объекту) ---
-                 scene.onPointerDown = (evt, pickResult) => {
-                    // Проверяем, кликнули ли мы по какому-то мешу
-                    if (pickResult.hit && pickResult.pickedMesh && pickResult.pickedMesh !== ground && pickResult.pickedMesh !== skybox) {
-                        const pickedMesh = pickResult.pickedMesh;
-                        console.log("Кликнули на:", pickedMesh.name);
-                        // Простая анимация: пульсация размера
-                        const animationScale = new BABYLON.Animation(
-                            "scaleAnim",            // Имя
-                            "scaling",              // Анимируемое свойство
-                            30,                     // FPS
-                            BABYLON.Animation.ANIMATIONTYPE_VECTOR3, // Тип данных
-                            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT // Режим проигрывания
-                        );
-                        const keys = [];
-                        const originalScale = pickedMesh.scaling.clone();
-                        const largeScale = originalScale.multiply(new BABYLON.Vector3(1.3, 1.3, 1.3));
-                        keys.push({ frame: 0, value: originalScale });
-                        keys.push({ frame: 5, value: largeScale }); // Увеличиваем за 5 кадров
-                        keys.push({ frame: 15, value: originalScale }); // Возвращаем за 10 кадров
-                        animationScale.setKeys(keys);
-                        // Добавляем easing для плавности
-                        const easingFunction = new BABYLON.SineEase();
-                        easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-                        animationScale.setEasingFunction(easingFunction);
-                        pickedMesh.animations = []; // Очищаем предыдущие анимации (если есть)
-                        pickedMesh.animations.push(animationScale);
-                        scene.beginAnimation(pickedMesh, 0, 15, false, 1.0); // Запускаем анимацию
-                    }
-                };
-                // --- Оптимизации (можно добавить больше) ---
-                scene.freezeMaterials(); // Оптимизация материалов после их настройки
-                scene.blockMaterialDirtyMechanism = true; // Блокировка проверки "грязных" материалов
-                // Возвращаем созданную сцену
-                return scene;
-            }; // --- Конец createScene ---
-            // Создаем сцену
-            const scene = createScene();
-            // Прячем стандартный экран загрузки Babylon и наш кастомный
-            scene.executeWhenReady(() => {
-                 engine.hideLoadingUI();
-                 if (loadingScreen) {
-                     loadingScreen.style.opacity = '0';
-                     // Можно ��далить элемент после анимации исчезновения
-                     setTimeout(() => {
-                         loadingScreen.style.display = 'none';
-                     }, 500); // Должно совпадать с transition в CSS
-                 }
-                // Определяем, мобильное ли устройство (очень упрощенно!)
-                const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-                if (isMobile) {
-                    // Показываем мобильные контролы, если нужно
-                     // joystickArea.style.display = 'block';
-                     // actionButton.style.display = 'block';
-                     console.log("Обнаружено мобильное устройство (упрощенная проверка).");
-                     // Здесь можно добавить логику для виртуального джойстика и кнопки,
-                     // которая будет управлять камерой или персонажем (сейчас не реализовано).
-                     // Babylon.js имеет VirtualJoysticksCamera, но она сложнее в настройке.
-                     // ArcRotateCamera уже хорошо работает с тачем (перетаскивание - вращение, щипок - зум).
-                } else {
-                    console.log("Обнаружено десктопное устройство.");
-                }
-                // Главный цикл рендеринга
-                engine.runRenderLoop(() => {
-                    scene.render();
-                });
-            });
-            // Обработка изменения размера окна/экрана
-            window.addEventListener('resize', () => {
-                engine.resize();
-            });
-        } // Конец проверки WebGL
     </script>

 <html lang="ru">
 <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>
     <style>
         html, body {
             overflow: hidden;
         #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none; /* Важно для Babylon.js на мобильных */
         }
+        /* Стили для информационных блоков */
+        .info-overlay {
             position: absolute;
+            top: 15%;
+            left: 50%;
+            transform: translateX(-50%);
             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);
+            opacity: 0;
+            transition: opacity 0.5s ease-in-out;
+            pointer-events: none; /* Чтобы не мешать взаимодействию с canvas */
         }
+        .info-overlay.visible {
+            opacity: 1;
         }
+        .info-overlay h2 {
+            margin-top: 0;
+            margin-bottom: 10px;
+            font-size: 1.5em;
+            color: #cceeff;
+        }
+        .info-overlay p {
+            margin-bottom: 0;
+            font-size: 1em;
         }
+        /* Стили для кнопок навигации */
+        #navigation {
             position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 15px;
             z-index: 10;
+        }
+        #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);
         }
+         #navigation button:disabled {
+             background-color: rgba(50, 50, 50, 0.6);
+             color: #aaa;
+             cursor: not-allowed;
+             border-color: #777;
+         }
+        #navigation button:not(:disabled):active {
+             transform: scale(0.95);
+         }
+        #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>
+    <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>
+    <!-- Кнопки навигации -->
+    <div id="navigation">
+        <button id="prevBtn" disabled>Назад</button>
+        <button id="nextBtn">Далее</button>
+    </div>
     <script>
         const canvas = document.getElementById('renderCanvas');
+        const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
         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';
+            },
+            hideLoadingUI: function() {
+                loadingScreen.style.opacity = '0';
+                // Скрыть после завершения анимации исчезновения
+                setTimeout(() => { loadingScreen.style.display = 'none'; }, 1000);
+            },
+            loadingUIBackgroundColor: "#05101f",
+            loadingUIText: "Загрузка арктической среды..."
+        };
+        engine.displayLoadingUI(); // Показать лоадер сразу
+        function createScene() {
+            scene = new BABYLON.Scene(engine);
+            scene.clearColor = new BABYLON.Color3(0.1, 0.2, 0.35); // Темно-синий фон
+            // --- Камера ---
+            // Используем UniversalCamera для лучшего контроля над анимацией
+            camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 5, -20), scene);
+            camera.setTarget(new BABYLON.Vector3(0, 2, 0));
+            // camera.attachControl(canvas, true); // Отключаем управление камерой по умолчанию
+            // --- Освещение ---
+            const light = new BABYLON.HemisphericLight("hemiLight", 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;
+            // --- 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); // Заменить на арктическую!
+            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;
+            skybox.infiniteDistance = true; // Фиксируем скайбокс
+            // --- Ландшафт (Земля/Снег) ---
+            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 200, height: 200, subdivisions: 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(); // Оптимизация
+            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;
+             });
+             // --- Добавить эффект легкого тумана/дымки ---
+             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;
+        }
+        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 = createScene();
+        // Начать рендеринг
+        engine.runRenderLoop(function () {
+            if (scene && scene.activeCamera) {
+                scene.render();
+            }
+        });
+        // Обработка изменения размера окна
+        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>