Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

b6a8119

verified ·

1 Parent(s): a030a20

Update index.html

Browse files

Files changed (1) hide show

index.html +351 -269

index.html CHANGED Viewed

@@ -3,18 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Metaverse Prototype - Babylon.js Demo</title>
-    <meta name="description" content="Прототип метавселенной, созданный с помощью Babylon.js. Демонстрация 3D-мира для презентации.">
     <!-- Подключение Babylon.js -->
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- Опционально: загрузчики для моделей (например, glTF) -->
     <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <!-- Опционально: библиотека для GUI Babylon.js (здесь используется HTML/CSS) -->
-    <!-- <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script> -->
-    <!-- Опционально: Post-processing эффекты -->
-    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylon.postProcessLibrary.min.js"></script>
     <style>
         html, body {
@@ -24,17 +20,18 @@
             margin: 0;
             padding: 0;
             font-family: Arial, sans-serif;
-            color: #fff;
-            background-color: #000; /* Фон на время загрузки */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Отключает стандартные действия браузера при касании (важно для управления) */
         }
-        /* --- Экран загрузки --- */
         #loadingScreen {
             position: absolute;
             top: 0;
@@ -42,342 +39,427 @@
             width: 100%;
             height: 100%;
             background-color: #1a1a1a;
             display: flex;
             justify-content: center;
             align-items: center;
-            font-size: 2em;
-            color: #ccc;
             z-index: 100;
             transition: opacity 0.5s ease-out;
         }
         #loadingScreen.hidden {
             opacity: 0;
-            pointer-events: none;
-        }
-        /* --- UI Оверлей (Пример) --- */
-        #ui-overlay {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            background-color: rgba(0, 0, 0, 0.5);
-            padding: 10px;
-            border-radius: 5px;
-            z-index: 10;
         }
-        #ui-overlay h1 {
-            margin: 0 0 5px 0;
-            font-size: 1.2em;
         }
-        #ui-overlay p {
-            margin: 0;
-            font-size: 0.9em;
         }
-        /* --- Мобильные элементы управления (визуальные) --- */
-        .mobile-controls {
             position: absolute;
             bottom: 20px;
-            width: 100%;
-            display: none; /* По умолчанию скрыты */
-            justify-content: space-between;
-            align-items: flex-end;
-            padding: 0 20px;
-            box-sizing: border-box;
             z-index: 10;
-            pointer-events: none; /* Сами контейнеры не должны перехватывать события */
-        }
-        .joystick-area {
-            width: 120px;
-            height: 120px;
-            background-color: rgba(80, 80, 80, 0.4);
-            border-radius: 50%;
-            position: relative;
-            pointer-events: auto; /* Область джойстика должна быть интерактивна */
-            display: flex;
-            justify-content: center;
-            align-items: center;
         }
-         .joystick-thumb { /* Просто визуальный индикатор центра */
-            width: 50px;
-            height: 50px;
-            background-color: rgba(200, 200, 200, 0.6);
-            border-radius: 50%;
-        }
-        .action-button {
-            width: 80px;
-            height: 80px;
-            background-color: rgba(0, 150, 255, 0.6);
-            border: 2px solid rgba(255, 255, 255, 0.7);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 1.1em;
-            font-weight: bold;
-            color: #fff;
-            cursor: pointer;
-            pointer-events: auto; /* Кнопка должна быть интерактивна */
-            user-select: none; /* Предотвратить выделение текста на кнопке */
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-        }
-        /* Показываем мобильные контролы только на тач-устройствах (простая проверка) */
-        body.is-mobile .mobile-controls {
-            display: flex;
         }
     </style>
 </head>
 <body>
-    <canvas id="renderCanvas"></canvas>
     <div id="loadingScreen">
-        <div>Загрузка метавселенной...</div>
     </div>
-    <div id="ui-overlay">
-        <h1>Metaverse Demo</h1>
-        <p>Используйте WASD/Стрелки + Мышь или Тач</p>
-    </div>
-    <!-- Визуальные элементы для мобильного управления -->
-    <div class="mobile-controls">
-        <div id="joystickArea" class="joystick-area">
-             <div class="joystick-thumb"></div>
-        </div>
-        <div id="actionButton" class="action-button">
-            Действие
-        </div>
     </div>
     <script>
-        const canvas = document.getElementById('renderCanvas');
-        const loadingScreen = document.getElementById('loadingScreen');
-        const mobileControls = document.querySelector('.mobile-controls');
-        const actionButton = document.getElementById('actionButton');
-        // Простая проверка на тач-устройство
-        const isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
-        if (isMobile) {
-            document.body.classList.add('is-mobile');
-        }
-        // --- Настройка Babylon.js ---
         const engine = new BABYLON.Engine(canvas, true, {
             preserveDrawingBuffer: true,
             stencil: true,
-            antialias: true // Включаем сглаживание
         });
-        engine.displayLoadingUI = function() { /* Отключаем стандартный загрузчик Babylon */ };
         let scene;
-        // --- Создание сцены ---
         const createScene = async function () {
             scene = new BABYLON.Scene(engine);
-            scene.clearColor = new BABYLON.Color4(0.1, 0.1, 0.2, 1.0); // Цвет фона, если скайбокс не загрузится
             // --- Камера ---
-            // UniversalCamera подходит для всех типов ввода (клавиатура, мышь, тач, геймпад)
-            const camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 1.8, -10), scene);
-            camera.setTarget(new BABYLON.Vector3(0, 1, 0));
-            camera.attachControl(canvas, true);
-            // Параметры движения камеры
-            camera.speed = 0.2; // Скорость движения
-            camera.angularSensibility = 4000; // Чувствительность мыши/тачпада
-            camera.touchAngularSensibility = 4000; // Чувствительность тач-поворота
-            camera.touchMoveSensibility = 250.0; // Чувствительность тач-перемещения (для джойстика лучше другая логика)
-            // Включаем гравитацию и коллизии для камеры
-            camera.applyGravity = true;
-            camera.ellipsoid = new BABYLON.Vector3(0.5, 0.9, 0.5); // Размеры "капсулы" игрока для коллизий
-            scene.gravity = new BABYLON.Vector3(0, -0.981, 0); // Стандартная гравитация
-            scene.collisionsEnabled = true; // Включаем систему коллизий в сцене
-            camera.checkCollisions = true; // Камера будет проверять коллизии
             // --- Освещение ---
-            // HemisphericLight - простое общее освещение (сверху/снизу)
             const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
-            light.intensity = 0.8;
-            light.diffuse = new BABYLON.Color3(1, 1, 1); // Белый свет сверху
-            light.groundColor = new BABYLON.Color3(0.4, 0.4, 0.4); // Серый свет снизу
-            // DirectionalLight - имитация солнца (дает тени)
             const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
-            dirLight.intensity = 0.6;
             dirLight.position = new BABYLON.Vector3(20, 40, 20);
-            // --- Тени (могут быть ресурсоемкими, особенно на мобильных) ---
-            const shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight); // Размер карты теней
-            shadowGenerator.useBlurExponentialShadowMap = true; // Более мягкие тени
-            shadowGenerator.blurKernel = 32;
-            shadowGenerator.setDarkness(0.5); // Насколько темные тени
-            // --- Окружение: Скайбокс (Небо) ---
-            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
-            const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
-            skyboxMaterial.backFaceCulling = false; // Видеть текстуру изнутри куба
-            // Используем процедурную текстуру неба для простоты (не нужны внешние файлы)
-            // Либо можно использовать CubeTexture с внешними изображениями:
-            // skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("URL_TO_TEXTURES/skybox", scene);
-            // skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-            const skyMaterial = new BABYLON.SkyMaterial("skyMaterial", scene);
-            skyMaterial.backFaceCulling = false;
-            skyMaterial.turbidity = 10; // облачность
-            skyMaterial.luminance = 1; // яркость
-            skyMaterial.useSunPosition = true; // Использовать позицию "солнца"
-            skyMaterial.sunPosition = dirLight.position; // Установить позицию солнца как у направленного света
-            skybox.material = skyMaterial;
-            // --- Окружение: Земля ---
-            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100, subdivisions: 2 }, scene);
             const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
-            // Простая текстура (можно заменить на URL к изображению)
-            // groundMaterial.diffuseTexture = new BABYLON.Texture("URL_TO_GROUND_TEXTURE.jpg", scene);
-            // groundMaterial.diffuseTexture.uScale = 10; // Повторение текстуры
-            // groundMaterial.diffuseTexture.vScale = 10;
-            groundMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.7, 0.3); // Зеленоватый цвет
-            groundMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Небольшой блик
             ground.material = groundMaterial;
-            ground.checkCollisions = true; // Земля участвует в коллизиях
-            ground.receiveShadows = true; // Земля может принимать тени
-            // --- Добавим несколько объектов в мир ---
             // Сфера
-            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
-            sphere.position = new BABYLON.Vector3(5, 1, 5);
-            const sphereMaterial = new BABYLON.StandardMaterial("sphereMat", scene);
-            sphereMaterial.diffuseColor = new BABYLON.Color3(1, 0.5, 0); // Оранжевый
-            sphere.material = sphereMaterial;
             sphere.checkCollisions = true;
             shadowGenerator.addShadowCaster(sphere); // Сфера отбрасывает тень
-            // Куб
-            const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
-            box.position = new BABYLON.Vector3(-5, 1, -3);
-            const boxMaterial = new BABYLON.StandardMaterial("boxMat", scene);
-            boxMaterial.diffuseColor = new BABYLON.Color3(0.2, 0.5, 1); // Синий
-            box.material = boxMaterial;
-            box.checkCollisions = true;
-            shadowGenerator.addShadowCaster(box);
-            // "Здание" (просто вытянутый куб)
-            const building = BABYLON.MeshBuilder.CreateBox("building", { width: 5, height: 10, depth: 5 }, scene);
-            building.position = new BABYLON.Vector3(10, 5, -10);
-            const buildingMaterial = new BABYLON.StandardMaterial("buildingMat", scene);
-            buildingMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8); // Светло-серый
-            building.material = buildingMaterial;
-            building.checkCollisions = true;
-            shadowGenerator.addShadowCaster(building);
-            // --- Интерактивность (Пример: клик по сфере) ---
-            sphere.actionManager = new BABYLON.ActionManager(scene);
-            sphere.actionManager.registerAction(
-                new BABYLON.ExecuteCodeAction(
-                    BABYLON.ActionManager.OnPickTrigger, // Действие при клике/тапе
-                    function (evt) {
-                        console.log("Клик по сфере!");
-                        // Пример действия: изменить цвет
-                        sphereMaterial.diffuseColor = sphereMaterial.diffuseColor.equals(BABYLON.Color3.Red())
-                            ? new BABYLON.Color3(1, 0.5, 0) // Вернуть оранжевый
-                            : BABYLON.Color3.Red(); // Сделать красным
-                    }
-                )
-            );
-            // --- Пост-обработка (для "флагманской" графики) ---
-            // DefaultRenderingPipeline применяет несколько эффектов сразу
-            const pipeline = new BABYLON.DefaultRenderingPipeline(
                 "defaultPipeline", // Имя
-                true, // Использовать HDR текстуры (лучше качество)
                 scene, // Сцена
                 [camera] // Камеры, к которым применяется
             );
-            // Настройки эффектов (можно настроить или отключить)
-            pipeline.samples = 4; // Сглаживание MSAA (если поддерживается)
-            pipeline.bloomEnabled = true; // Эффект свечения (Bloom)
-            pipeline.bloomThreshold = 0.7;
-            pipeline.bloomWeight = 0.5;
-            pipeline.bloomKernel = 64;
-            pipeline.bloomScale = 0.5;
-            pipeline.fxaaEnabled = true; // Сглаживание FXAA (быстрее MSAA)
-            // pipeline.imageProcessingEnabled = true; // Общая обработка изображения
-            // if (pipeline.imageProcessingEnabled) {
-            //     pipeline.imageProcessing.contrast = 1.2;
-            //     pipeline.imageProcessing.exposure = 1.0;
-            //     // Можно добавить виньетку, зернистость и т.д.
-            // }
             return scene;
         };
-        // --- Запуск ---
-        createScene().then((createdScene) => {
-            scene = createdScene;
-            // Убираем экран загрузки после инициализации сцены
-             engine.hideLoadingUI();
-             loadingScreen.classList.add('hidden');
-            // Основной цикл рендеринга
-            engine.runRenderLoop(function () {
-                if (scene) {
-                    scene.render();
                 }
             });
-        }).catch(error => {
-            console.error("Ошибка создания сцены:", error);
-            loadingScreen.innerHTML = "<div>Ошибка загрузки :(</div>";
-        });
-        // --- Обработка изменения размера окна ---
-        window.addEventListener('resize', function () {
-            engine.resize();
-        });
-        // --- Обработка мобильной кнопки "Действие" (пример) ---
-        if (isMobile && actionButton) {
-            actionButton.addEventListener('pointerdown', function(event) {
-                event.preventDefault(); // Предотвратить стандартное поведение (например, прокрутку)
-                console.log("Нажата кнопка Действие!");
-                // Здесь можно добавить логику действия:
-                // Например, эмулировать взаимодействие с объектом перед камерой
-                // или выполнить другое игровое действие.
-                // Визуальный фидбек нажатия
-                actionButton.style.backgroundColor = 'rgba(0, 100, 200, 0.8)';
             });
-             actionButton.addEventListener('pointerup', function(event) {
-                 actionButton.style.backgroundColor = 'rgba(0, 150, 255, 0.6)';
-             });
-             actionButton.addEventListener('pointerleave', function(event) { // Если палец ушел с кнопки
-                 actionButton.style.backgroundColor = 'rgba(0, 150, 255, 0.6)';
              });
         }
-        // --- Дополнительно: Логика для виртуального джойстика (Упрощенная) ---
-        // UniversalCamera уже обрабатывает перетаскивание по экрану для движения/поворота.
-        // Этот код просто показывает визуальные элементы.
-        // Для полноценного джойстика потребовалась бы сложная логика отслеживания
-        // пальца в пределах joystickArea и преобразования смещения в векторы движения камеры.
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Babylon.js Metaverse Demo</title>
+    <meta name="description" content="Демонстрация базовой метавселенной, созданной с помощью Babylon.js. Включает 3D-мир, управление персонажем и элементы для мобильных устройств.">
     <!-- Подключение Babylon.js -->
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- (Опционально) Загрузчики для моделей (например, glTF) -->
     <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <!-- (Опционально) GUI для элементов интерфейса -->
+    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
     <style>
         html, body {
             margin: 0;
             padding: 0;
             font-family: Arial, sans-serif;
+            color: #eee; /* Светлый текст для темного фона */
+            background-color: #111; /* Темный фон по умолчанию */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none; /* Отключает стандартные жесты браузера (важно для управления) */
+            outline: none; /* Убирает рамку при фокусе */
         }
+        /* Стили для экрана загрузки */
         #loadingScreen {
             position: absolute;
             top: 0;
             width: 100%;
             height: 100%;
             background-color: #1a1a1a;
+            color: #ffffff;
             display: flex;
+            flex-direction: column;
             justify-content: center;
             align-items: center;
+            font-size: 1.5em;
             z-index: 100;
             transition: opacity 0.5s ease-out;
         }
         #loadingScreen.hidden {
             opacity: 0;
+            pointer-events: none; /* Чтобы не мешал кликам после скрытия */
         }
+        #loadingSpinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin-top: 20px;
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        /* Стили для виртуального джойстика (для мобильных) */
+        #joystickContainer {
             position: absolute;
             bottom: 20px;
+            left: 20px;
+            width: 150px; /* Размер области джойстика */
+            height: 150px;
+            /* background-color: rgba(80, 80, 80, 0.3); */ /* Полупрозрачный фон для отладки */
+            /* border-radius: 50%; */
             z-index: 10;
+            display: none; /* По умолчанию скрыт, показываем через JS при необходимости */
+            pointer-events: none; /* Контейнер не ловит события, ловит сам джойстик GUI */
         }
+        /* Можно добавить стили для других элементов GUI здесь */
+        /* Простое уведомление */
+        #infoBox {
+             position: absolute;
+             top: 10px;
+             left: 10px;
+             background-color: rgba(0,0,0,0.5);
+             color: white;
+             padding: 8px;
+             border-radius: 5px;
+             font-size: 0.9em;
+             z-index: 5;
         }
     </style>
 </head>
 <body>
+    <!-- Экран загрузки -->
     <div id="loadingScreen">
+        <p>Загрузка метавселенной...</p>
+        <div id="loadingSpinner"></div>
     </div>
+    <!-- Основной Canvas для рендеринга -->
+    <canvas id="renderCanvas"></canvas>
+    <!-- Контейнер для джойстика (позиционирование) -->
+    <div id="joystickContainer"></div>
+    <!-- Информационный блок -->
+    <div id="infoBox">
+        Управление: WASD/Стрелки + Мышь (ПК) | Джойстик + Касание (Мобильные)
     </div>
     <script>
+        // Получаем элементы DOM
+        const canvas = document.getElementById("renderCanvas");
+        const loadingScreen = document.getElementById("loadingScreen");
+        const joystickContainer = document.getElementById("joystickContainer"); // Хотя GUI не использует его напрямую, он полезен для понимания области
+        // Инициализация движка Babylon.js
         const engine = new BABYLON.Engine(canvas, true, {
             preserveDrawingBuffer: true,
             stencil: true,
+            antialias: true // Включаем сглаживание для лучшей графики
         });
+        // Глобальные переменные для сцены, камеры и управления
         let scene;
+        let camera;
+        let inputMap = {}; // Для отслеживания нажатых клавиш
+        let moveSpeed = 0.15; // Скорость движения
+        let cameraSensitivity = 0.003; // Чувствительность мыши/касания
+        let virtualJoystick = null; // Для мобильного управления
+        // --- Функция создания сцены ---
         const createScene = async function () {
             scene = new BABYLON.Scene(engine);
+            scene.clearColor = new BABYLON.Color3.FromHexString("#2c3e50"); // Цвет фона (небо)
             // --- Камера ---
+            // Универсальная камера подходит для ПК (WASD/Мышь) и имеет настройки для Touch
+            camera = new BABYLON.UniversalCamera("playerCamera", new BABYLON.Vector3(0, 2, -10), scene);
+            camera.attachControl(canvas, true); // Прикрепляем управление к canvas
+            camera.speed = 0; // Отключаем встроенное движение WASD, будем управлять вручную
+            camera.angularSensibility = 8000 * cameraSensitivity; // Настройка чувствительности вращения
+            // Настройки для камеры от первого лица
+            camera.ellipsoid = new BABYLON.Vector3(0.5, 0.9, 0.5); // Размер "тела" игрока для коллизий
+            camera.checkCollisions = true; // Включаем проверку коллизий для камеры
+            camera.applyGravity = true; // Включаем гравитацию
+            camera.minZ = 0.1; // Ближняя плоскость отсечения
             // --- Освещение ---
+            // Мягкий окружающий свет
             const light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
+            light.intensity = 0.7;
+            light.diffuse = new BABYLON.Color3(1, 1, 1);
+            light.specular = new BABYLON.Color3(0.5, 0.5, 0.5);
+            light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);
+            // Направленный свет (сол��це) для теней
             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.8;
+            // --- Тени ---
+            // Генератор теней высокого качества (можно настроить для производительности)
+            const shadowGenerator = new BABYLON.ShadowGenerator(2048, dirLight); // 2048 - размер карты теней
+            shadowGenerator.useExponentialShadowMap = true; // Мягкие тени
+            // shadowGenerator.useBlurExponentialShadowMap = true; // Еще мягче, но дороже
+            // shadowGenerator.blurKernel = 32;
+            shadowGenerator.darkness = 0.5;
+            // --- Мир (Окружение) ---
+            // Земля
+            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, scene);
+            ground.checkCollisions = true; // Земля участвует в коллизиях
             const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
+            // Простая текстура для земли (можно заменить на PBR материал и текстуры для "флагманской" графики)
+            const groundTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.png", scene); // Пример текстуры
+            groundTexture.uScale = 20;
+            groundTexture.vScale = 20;
+            groundMaterial.diffuseTexture = groundTexture;
+            groundMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Меньше бликов на траве
             ground.material = groundMaterial;
+            ground.receiveShadows = true; // Земля принимает тени
+            // Небо (Skybox) для атмосферы
+            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
+            const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
+            skyboxMaterial.backFaceCulling = false; // Рендерим внутренние грани куба
+            // Текстура неба (ищите "cube texture" или "skybox texture")
+            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs-playground.com/textures/skybox", 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;
+            // --- Добавляем объекты в мир ---
+            // Коробка
+            const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
+            box.position = new BABYLON.Vector3(5, 1, 5);
+            box.checkCollisions = true;
+            const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
+            boxMat.diffuseColor = new BABYLON.Color3.FromHexString("#e74c3c"); // Красный
+            box.material = boxMat;
+            shadowGenerator.addShadowCaster(box); // Коробка отбрасывает тень
             // Сфера
+            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 3 }, scene);
+            sphere.position = new BABYLON.Vector3(-5, 1.5, -5);
             sphere.checkCollisions = true;
+            const sphereMat = new BABYLON.StandardMaterial("sphereMat", scene);
+            sphereMat.diffuseColor = new BABYLON.Color3.FromHexString("#3498db"); // Синий
+            sphereMat.specularPower = 64; // Блик
+            sphere.material = sphereMat;
             shadowGenerator.addShadowCaster(sphere); // Сфера отбрасывает тень
+            // Колонна (цилиндр)
+            const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height: 6, diameter: 1}, scene);
+            cylinder.position = new BABYLON.Vector3(0, 3, 8);
+            cylinder.checkCollisions = true;
+            const cylMat = new BABYLON.StandardMaterial("cylMat", scene);
+            cylMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/rock.jpg", scene); // Текстура камня
+            cylinder.material = cylMat;
+            shadowGenerator.addShadowCaster(cylinder);
+             // Пример использования PBR материала для более реалистичного вида
+             const pbrSphere = BABYLON.MeshBuilder.CreateSphere("pbrSphere", {diameter: 2.5}, scene);
+             pbrSphere.position = new BABYLON.Vector3(-8, 1.25, 4);
+             const pbrMat = new BABYLON.PBRMaterial("pbrMat", scene);
+             pbrMat.metallic = 1.0; // Металлический
+             pbrMat.roughness = 0.2; // Относительно гладкий (отражающий)
+             pbrMat.albedoColor = new BABYLON.Color3(0.8, 0.8, 0.85);
+             pbrMat.reflectionTexture = skyboxMaterial.reflectionTexture; // Используем скайбокс для отражений
+             pbrMat.enableSpecularAntiAliasing = true; // Улучшение отражений
+             pbrSphere.material = pbrMat;
+             pbrSphere.checkCollisions = true;
+             shadowGenerator.addShadowCaster(pbrSphere);
+            // --- Физика ---
+            scene.gravity = new BABYLON.Vector3(0, -9.81 / 60, 0); // Применяем гравитацию (делим на 60 для согласования с частотой кадров)
+            scene.collisionsEnabled = true; // Включаем систему коллизий в сцене
+            // --- Управление ---
+            setupInputHandling();
+            // --- Мобильное управление (Виртуальный джойстик) ---
+            if (isMobileDevice()) {
+                setupVirtualJoystick();
+                joystickContainer.style.display = 'block'; // Показываем область джойстика
+            }
+             // --- Пост-обработка (для "флагманской" графики) ---
+             // Свечение (Bloom)
+             const pipeline = new BABYLON.DefaultRenderingPipeline(
                 "defaultPipeline", // Имя
+                true, // Использовать HDR текстуры (лучше для bloom)
                 scene, // Сцена
                 [camera] // Камеры, к которым применяется
             );
+            pipeline.samples = 4; // Сглаживание для пост-эффектов
+            pipeline.bloomEnabled = true;
+            pipeline.bloomThreshold = 0.8; // Порог яркости для свечения
+            pipeline.bloomWeight = 0.5; // Интенсивность свечения
+            pipeline.bloomKernel = 64; // Размер размытия для свечения
+            pipeline.bloomScale = 0.5; // Масштаб текстуры свечения
+            // (Опционально) Ambient Occlusion для лучшего затенения в углах
+            // pipeline.ssaoEnabled = true;
+            // pipeline.ssaoRatio = 0.5; // Настройки SSAO (могут влиять на производительность)
+            // pipeline.ssaoBlurRatio = 0.5;
+            // --- Оптимизация ---
+            // scene.freezeActiveMeshes(); // Полезно для статичных сцен, но не для динамичных
+            // Действия после полной загрузки сцены
+            await scene.whenReadyAsync();
+            loadingScreen.classList.add('hidden'); // Скрываем экран загрузки
+            console.log("Сцена готова!");
             return scene;
         };
+        // --- Функция настройки обработки ввода (Клавиатура) ---
+        function setupInputHandling() {
+            scene.actionManager = new BABYLON.ActionManager(scene);
+            // Регистрация нажатия клавиши
+            scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) {
+                inputMap[evt.sourceEvent.key.toLowerCase()] = true; // Записываем нажатую клавишу
+            }));
+            // Регистрация отпускания клавиши
+            scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) {
+                inputMap[evt.sourceEvent.key.toLowerCase()] = false; // Удаляем клавишу
+            }));
+             // Управление вращением камеры мышью/касанием (обрабатывается UniversalCamera)
+             // Дополнительно можно настроить чувствительность и т.д.
+        }
+        // --- Функция настройки виртуального джойстика ---
+        function setupVirtualJoystick() {
+            const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+            virtualJoystick = new BABYLON.GUI.VirtualJoystick(true); // true = left handed joystick
+            virtualJoystick.setJoystickSensibility(2.5); // Чувствительность джойстика
+            // Настройка внешнего вида джойстика
+            virtualJoystick.joystickArea.width = "150px";
+            virtualJoystick.joystickArea.height = "150px";
+            virtualJoystick.joystickArea.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+            virtualJoystick.joystickArea.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
+            virtualJoystick.joystickArea.left = "20px"; // Отступ слева
+            virtualJoystick.joystickArea.top = "-20px"; // Отступ снизу (отрицательный top при bottom-выравнивании)
+            virtualJoystick.joystickArea.background = "rgba(100, 100, 100, 0.4)";
+            virtualJoystick.joystickArea.alpha = 0.7;
+            virtualJoystick.joystickArea.cornerRadius = 75; // Круглый
+            virtualJoystick.joystickThumb.width = "60px";
+            virtualJoystick.joystickThumb.height = "60px";
+            virtualJoystick.joystickThumb.background = "rgba(200, 200, 200, 0.6)";
+            virtualJoystick.joystickThumb.color = "white"; // Цвет иконки (если есть)
+            virtualJoystick.joystickThumb.alpha = 0.8;
+            virtualJoystick.joystickThumb.cornerRadius = 30; // Круглый
+            // Скрытие стандартного контейнера джойстика (мы используем свой div для позиционирования)
+            virtualJoystick.joystickContainer.isVisible = false;
+            advancedTexture.addControl(virtualJoystick);
+            // Обработка касаний для вращения камеры на мобильных
+            let isPointerDown = false;
+            let startX = 0;
+            let startY = 0;
+            canvas.addEventListener("pointerdown", (evt) => {
+                 // Не обрабатываем клики по джойстику как вращение
+                if (virtualJoystick.joystickArea.contains(evt.clientX, evt.clientY)) {
+                    return;
                 }
+                isPointerDown = true;
+                startX = evt.clientX;
+                startY = evt.clientY;
+                 // Предотвращаем выделение текста/элементов при движении пальца
+                evt.preventDefault();
             });
+            canvas.addEventListener("pointermove", (evt) => {
+                if (!isPointerDown) return;
+                const deltaX = (evt.clientX - startX) * cameraSensitivity;
+                const deltaY = (evt.clientY - startY) * cameraSensitivity;
+                // Вращаем камеру
+                // В UniversalCamera нужно использовать setTarget или вращать вручную
+                // Простой способ - имитировать движение мыши
+                 camera.cameraRotation.y += deltaX;
+                 camera.cameraRotation.x += deltaY;
+                // Ограничиваем вертикальное вращение
+                 camera.cameraRotation.x = Math.max(-Math.PI / 2.1, Math.min(Math.PI / 2.1, camera.cameraRotation.x));
+                startX = evt.clientX;
+                startY = evt.clientY;
+                 evt.preventDefault();
             });
+            canvas.addEventListener("pointerup", (evt) => {
+                isPointerDown = false;
+                evt.preventDefault();
+            });
+            canvas.addEventListener("pointerout", (evt) => { // На случай, если палец ушел за пределы canvas
+                 isPointerDown = false;
+                 evt.preventDefault();
              });
+        }
+        // --- Функция проверки, мобильное ли устройство ---
+        function isMobileDevice() {
+            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
         }
+        // --- Основной цикл рендеринга ---
+        engine.runRenderLoop(function () {
+            if (!scene || !scene.isReady()) {
+                return; // Если сцена не готова, ничего не делаем
+            }
+            // --- Обновление движения игрока ---
+            const forward = new BABYLON.Vector3(
+                Math.sin(camera.rotation.y) * moveSpeed,
+                0, // Мы не двигаемся вверх/вниз клавишами напрямую (гравитация делает свое дело)
+                Math.cos(camera.rotation.y) * moveSpeed
+            );
+            const right = new BABYLON.Vector3(
+                Math.sin(camera.rotation.y + Math.PI / 2) * moveSpeed,
+                0,
+                Math.cos(camera.rotation.y + Math.PI / 2) * moveSpeed
+            );
+            const moveDirection = BABYLON.Vector3.Zero();
+            // Клавиатура
+            if (inputMap["w"] || inputMap["arrowup"]) {
+                moveDirection.addInPlace(forward);
+            }
+            if (inputMap["s"] || inputMap["arrowdown"]) {
+                moveDirection.addInPlace(forward.negate()); // Движение назад
+            }
+            if (inputMap["a"] || inputMap["arrowleft"]) {
+                moveDirection.addInPlace(right.negate()); // Движение влево
+            }
+            if (inputMap["d"] || inputMap["arrowright"]) {
+                moveDirection.addInPlace(right); // Движение вправо
+            }
+            // Джойстик (если есть)
+            if (virtualJoystick && virtualJoystick.pressed) {
+                // Добавляем вектор от джойстика к общему вектору движения
+                const joystickForward = forward.scale(virtualJoystick.deltaPosition.y);
+                const joystickRight = right.scale(virtualJoystick.deltaPosition.x);
+                moveDirection.addInPlace(joystickForward);
+                moveDirection.addInPlace(joystickRight);
+            }
+            // Применяем движение к камере
+            if (moveDirection.lengthSquared() > 0) {
+                // Нормализуем и масштабируем, чтобы диагональное движение не было быстрее
+                // moveDirection.normalize().scaleInPlace(moveSpeed); - Не нужно, уже учтено в forward/right
+                 camera.moveWithCollisions(moveDirection);
+            }
+            // Рендерим сцену
+            scene.render();
+        });
+        // --- Обработчик изменения размера окна ---
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
+        // --- Запуск создания сцены ---
+        createScene().then(() => {
+            // Сцена успешно создана
+        }).catch(error => {
+            console.error("Ошибка при создании сцены:", error);
+            loadingScreen.innerHTML = "<p>Ошибка загрузки. Пожалуйста, обновите страницу.</p>";
+        });
     </script>