Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

a030a20

verified ·

1 Parent(s): 758ebd2

Update index.html

Browse files

Files changed (1) hide show

index.html +312 -344

index.html CHANGED Viewed

@@ -3,415 +3,383 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>BabylonCraft Demo</title>
     <style>
-        /* Базовые стили */
         html, body {
             overflow: hidden;
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
-            font-family: sans-serif;
-            color: white;
-            background-color: #333; /* Фон для областей вне канваса */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Отключаем стандартные действия браузера при касании (скролл, зум) */
-            outline: none; /* Убираем рамку фокуса */
         }
-        /* Стили для оверлея с информацией и управлением */
-        #infoOverlay {
             position: absolute;
-            top: 10px;
-            left: 10px;
             background-color: rgba(0, 0, 0, 0.5);
             padding: 10px;
             border-radius: 5px;
-            font-size: 12px;
-            max-width: calc(100% - 40px); /* Чтобы не вылезал на мобилках */
         }
-        /* Крестик в центре экрана */
-        #crosshair {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 10px;
-            height: 10px;
-            border: 1px solid white;
-            transform: translate(-50%, -50%);
-            pointer-events: none; /* Чтобы не мешал кликам */
-            mix-blend-mode: difference; /* Чтобы был виден на любом фоне */
         }
-         /* Простые кнопки для мобильных действий */
-        #mobileControls {
             position: absolute;
             bottom: 20px;
-            right: 20px;
-            display: none; /* По умолчанию скрыты, показываем через JS */
-            flex-direction: column;
-            gap: 15px;
-         }
-        .mobile-button {
-            background-color: rgba(255, 255, 255, 0.3);
-            border: 1px solid rgba(255, 255, 255, 0.5);
-            color: white;
-            width: 60px;
-            height: 60px;
             border-radius: 50%;
-            font-size: 18px;
-            font-weight: bold;
             display: flex;
             justify-content: center;
             align-items: center;
             cursor: pointer;
-            user-select: none; /* Запретить выделение текста на кнопке */
         }
-         .mobile-button:active {
-             background-color: rgba(255, 255, 255, 0.5);
-         }
-         /* Медиа-запрос для показа мобильных кнопок на тач-устройствах */
-        @media (hover: none) and (pointer: coarse) {
-            #mobileControls {
-                display: flex;
-            }
         }
     </style>
-    <!-- Подключаем Babylon.js с CDN -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- (Опционально) PEP для поддержки Pointer Events в старых браузерах -->
-    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
 </head>
 <body>
-    <canvas id="renderCanvas" touch-action="none"></canvas>
-    <div id="infoOverlay">
-        Управление:<br>
-        - WASD: Движение<br>
-        - Мышь: Осмотреться<br>
-        - Левый клик / Кнопка "B": Сломать блок<br>
-        - Правый клик / Кнопка "P": Поставить блок (земля)<br>
-        - Пробел: Вверх<br>
-        - Shift: Вниз<br>
-        <br>
-        <span id="fpsCounter">FPS: </span><br>
-        <span id="blockInfo">Наведите курсор на блок</span>
     </div>
-    <div id="crosshair">+</div>
-     <!-- Кнопки для мобильных -->
-    <div id="mobileControls">
-        <div id="placeButton" class="mobile-button">P</div>
-        <div id="breakButton" class="mobile-button">B</div>
     </div>
     <script>
         const canvas = document.getElementById('renderCanvas');
-        const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true); // Enable stencil/preserveDrawingBuffer if needed later
-        // --- Переменные и константы ---
-        const BLOCK_SIZE = 1;
-        const PLAYER_HEIGHT = 1.8;
-        const GRAVITY = -9.81; // Условная гравитация
-        const MOVE_SPEED = 0.15;
-        const MOUSE_SENSITIVITY = 0.002;
-        const TOUCH_SENSITIVITY = 0.004; // Чувствительность для тач-управления камерой
-        let currentBlockType = 'grass'; // Тип блока для установки
-        let blocks = {}; // Объект для хранения координат существующих блоков { "x_y_z": mesh }
         // --- Создание сцены ---
-        const createScene = function () {
-            const scene = new BABYLON.Scene(engine);
-            scene.clearColor = new BABYLON.Color3(0.5, 0.8, 1.0); // Цвет неба
-            scene.collisionsEnabled = true; // Включаем проверку столкновений на уровне сцены
-            scene.gravity = new BABYLON.Vector3(0, GRAVITY / 60, 0); // Применяем гравитацию (делим на ~FPS)
             // --- Камера ---
-            // FreeCamera подходит для управления в стиле Minecraft
-            const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(5, PLAYER_HEIGHT + 5, 5), scene);
-            camera.setTarget(BABYLON.Vector3.Zero());
             camera.attachControl(canvas, true);
-            // Настройки управления камерой
-            camera.speed = MOVE_SPEED; // Скорость движения WASD
-            camera.inertia = 0.9; // Плавность остановки
-            camera.angularSensibility = 1 / MOUSE_SENSITIVITY; // Инвертируем, т.к. в Babylon это делитель
-            camera.keysUp = [87];    // W
-            camera.keysDown = [83];   // S
-            camera.keysLeft = [65];   // A
-            camera.keysRight = [68];  // D
-            camera.keysUpward = [32]; // Space
-            camera.keysDownward = [16]; // Shift
-            // Включаем физику для камеры (чтобы она падала и сталкивалась)
-            camera.checkCollisions = true;
             camera.applyGravity = true;
-            // Задаем "тело" для камеры для столкновений (эллипсоид)
-            camera.ellipsoid = new BABYLON.Vector3(0.4, PLAYER_HEIGHT / 2, 0.4);
-            camera.ellipsoidOffset = new BABYLON.Vector3(0, PLAYER_HEIGHT / 2, 0); // Смещаем центр эллипсоида
             // --- Освещение ---
-            const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
             light.intensity = 0.8;
-            // --- Материалы для блоков ---
-            const materials = {
-                grass: new BABYLON.StandardMaterial("grassMat", scene),
-                dirt: new BABYLON.StandardMaterial("dirtMat", scene),
-                stone: new BABYLON.StandardMaterial("stoneMat", scene),
-                wood: new BABYLON.StandardMaterial("woodMat", scene),
-                leaves: new BABYLON.StandardMaterial("leavesMat", scene),
-            };
-            materials.grass.diffuseColor = new BABYLON.Color3(0.2, 0.8, 0.2); // Зеленый
-            materials.dirt.diffuseColor = new BABYLON.Color3(0.6, 0.4, 0.2);  // Коричневый
-            materials.stone.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); // Серый
-            materials.wood.diffuseColor = new BABYLON.Color3(0.7, 0.5, 0.3);  // Дерево
-            materials.leaves.diffuseColor = new BABYLON.Color3(0.1, 0.6, 0.1); // Листва
-            materials.leaves.alpha = 0.9; // Немного прозрачности для листвы (не идеально)
-            // --- Генерация начального мира ---
-            const worldSize = 16; // Размер плоского мира
-            const groundLevel = 0;
-            for (let x = -worldSize / 2; x < worldSize / 2; x++) {
-                for (let z = -worldSize / 2; z < worldSize / 2; z++) {
-                    // Верхний слой - трава
-                    createBlock(x, groundLevel, z, 'grass', scene, materials);
-                    // Несколько слоев земли под травой
-                    createBlock(x, groundLevel - 1, z, 'dirt', scene, materials);
-                    createBlock(x, groundLevel - 2, z, 'dirt', scene, materials);
-                    // Нижний слой - камень
-                    createBlock(x, groundLevel - 3, z, 'stone', scene, materials);
-                }
-            }
-             // Добавим простое "дерево" для примера
-             createBlock(5, groundLevel + 1, -5, 'wood', scene, materials);
-             createBlock(5, groundLevel + 2, -5, 'wood', scene, materials);
-             createBlock(5, groundLevel + 3, -5, 'wood', scene, materials);
-             // Листва
-             for(let lx = 4; lx <= 6; lx++) {
-                 for(let ly = 4; ly <= 5; ly++) {
-                     for(let lz = -6; lz <= -4; lz++) {
-                         if(lx === 5 && lz === -5 && ly <= 3) continue; // Не ставим листву внутри ствола
-                         createBlock(lx, groundLevel + ly, lz, 'leaves', scene, materials);
-                     }
-                 }
-             }
-            // --- Функция создания блока ---
-            function createBlock(x, y, z, type, scene, materials) {
-                const blockId = `${x}_${y}_${z}`;
-                if (blocks[blockId]) return; // Не создаем блок, если он уже есть
-                const box = BABYLON.MeshBuilder.CreateBox("box_" + blockId, { size: BLOCK_SIZE }, scene);
-                box.position = new BABYLON.Vector3(x + BLOCK_SIZE / 2, y + BLOCK_SIZE / 2, z + BLOCK_SIZE / 2);
-                box.material = materials[type] || materials.stone; // Используем камень, если тип не найден
-                box.checkCollisions = true; // Включаем столкновения для блока
-                box.isPickable = true; // Разрешаем блоку быть "выбираемым" лучом
-                box.metadata = { type: type, x: x, y: y, z: z }; // Сохраняем тип и координаты
-                blocks[blockId] = box; // Добавляем в наш учет блоков
-                return box;
-            }
-            // --- Логика взаимодействия (ломать/ставить блоки) ---
-            let pointerLocked = false;
-            // Захват/освобождение мыши для удобного управления камерой на ПК
-            canvas.addEventListener("click", () => {
-                if (!pointerLocked && !isTouchDevice()) { // Не захватывать на тач-устройствах
-                     canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
-                     if (canvas.requestPointerLock) {
-                         canvas.requestPointerLock();
-                     }
-                }
-            });
-            const lockChangeAlert = () => {
-                 if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas) {
-                    console.log('Pointer locked');
-                    pointerLocked = true;
-                 } else {
-                    console.log('Pointer unlocked');
-                    pointerLocked = false;
-                 }
-            }
-            document.addEventListener('pointerlockchange', lockChangeAlert, false);
-            document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
-            document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
-            // Обработка кликов/касаний для ломания/установки
-            scene.onPointerDown = function (evt, pickResult) {
-                // evt.button === 0: Левая кнопка мыши / Основное касание
-                // evt.button === 1: Средняя кнопка мыши
-                // evt.button === 2: Правая кнопка мыши
-                const isBreakAction = (evt.button === 0);
-                const isPlaceAction = (evt.button === 2);
-                handleInteraction(isBreakAction, isPlaceAction, pickResult);
-            };
-             // Обработка нажатий мобильных кнопок
-            const placeButton = document.getElementById('placeButton');
-            const breakButton = document.getElementById('breakButton');
-            breakButton.addEventListener('pointerdown', (e) => {
-                 e.preventDefault(); // Предотвращаем стандартное поведение (например, двойной тап зум)
-                 const pickResult = scene.pick(scene.pointerX, scene.pointerY, (mesh) => mesh.isPickable);
-                 handleInteraction(true, false, pickResult); // Имитируем "ломание"
-            });
-            placeButton.addEventListener('pointerdown', (e) => {
-                 e.preventDefault();
-                 const pickResult = scene.pick(scene.pointerX, scene.pointerY, (mesh) => mesh.isPickable);
-                 handleInteraction(false, true, pickResult); // Имитируем "установку"
-            });
-            function handleInteraction(isBreak, isPlace, pickResult) {
-                 if (pickResult.hit && pickResult.pickedMesh && blocks[pickResult.pickedMesh.name.replace('box_','')]) {
-                    const pickedMesh = pickResult.pickedMesh;
-                    const blockId = pickedMesh.name.replace('box_','');
-                    // Ломание блока
-                    if (isBreak) {
-                        console.log("Breaking block:", blockId);
-                        delete blocks[blockId]; // Удаляем из учета
-                        pickedMesh.dispose();   // Удаляем со сцены
                     }
-                    // Установка блока
-                    else if (isPlace) {
-                        // Определяем нормаль грани, на которую попал луч
-                        const normal = pickResult.getNormal(true); // true = использовать локальные координаты нормали
-                        const position = pickedMesh.position.clone(); // Позиция блока, на который кликнули
-                        // Вычисляем координаты нового блока, примыкающего к грани
-                        const newBlockPos = position.add(normal.scale(BLOCK_SIZE));
-                        // Округляем координаты до ближайшей сетки (важно!)
-                        // Учитываем смещение центра блока (+BLOCK_SIZE/2)
-                        const newX = Math.floor(newBlockPos.x);
-                        const newY = Math.floor(newBlockPos.y);
-                        const newZ = Math.floor(newBlockPos.z);
-                        const newBlockId = `${newX}_${newY}_${newZ}`;
-                        // Проверяем, не пытаемся ли поставить блок на место игрока
-                        const playerHeadY = Math.floor(camera.position.y + camera.ellipsoidOffset.y + camera.ellipsoid.y / 2);
-                        const playerFeetY = Math.floor(camera.position.y + camera.ellipsoidOffset.y - camera.ellipsoid.y / 2);
-                        const playerX = Math.floor(camera.position.x);
-                        const playerZ = Math.floor(camera.position.z);
-                        const collisionWithPlayer = (newX === playerX && newZ === playerZ && (newY === playerFeetY || newY === playerHeadY));
-                        if (!blocks[newBlockId] && !collisionWithPlayer) { // Не ставим, если уже есть блок или там игрок
-                            console.log("Placing block at:", newX, newY, newZ);
-                            createBlock(newX, newY, newZ, currentBlockType, scene, materials);
-                        } else {
-                             console.log("Cannot place block here:", newBlockId, "Exists?", !!blocks[newBlockId], "Collision?", collisionWithPlayer);
-                        }
-                    }
-                }
-            }
-            // --- Обновление информации на экране ---
-            const fpsCounter = document.getElementById('fpsCounter');
-            const blockInfo = document.getElementById('blockInfo');
-            scene.onBeforeRenderObservable.add(() => {
-                fpsCounter.textContent = `FPS: ${engine.getFps().toFixed()}`;
-                // Показываем информацию о блоке под курсором
-                const pickResult = scene.pick(canvas.width / 2, canvas.height / 2, (mesh) => mesh.isPickable);
-                if (pickResult.hit && pickResult.pickedMesh && pickResult.pickedMesh.metadata) {
-                     const meta = pickResult.pickedMesh.metadata;
-                     blockInfo.textContent = `Блок: ${meta.type} (${meta.x}, ${meta.y}, ${meta.z})`;
-                } else {
-                    blockInfo.textContent = 'Наведите курсор на блок';
-                }
-            });
-             // --- Простое тач управление камерой (вращение) ---
-             let lastTouchX = null;
-             let lastTouchY = null;
-             let isTouching = false;
-             canvas.addEventListener('pointerdown', (evt) => {
-                 if(evt.pointerType === 'touch') {
-                    isTouching = true;
-                    lastTouchX = evt.clientX;
-                    lastTouchY = evt.clientY;
-                    // Важно: Отключаем стандартное управление мышью на время тача, чтобы избежать конфликтов
-                    // camera.detachControl(); // Это может быть слишком резко, нужно более тонкое управление
-                 }
-             });
-             canvas.addEventListener('pointermove', (evt) => {
-                 if(isTouching && evt.pointerType === 'touch') {
-                    const deltaX = evt.clientX - lastTouchX;
-                    const deltaY = evt.clientY - lastTouchY;
-                    // Вращаем камеру вручную
-                    // Коэффициенты подбираются экспериментально
-                    camera.cameraRotation.y += deltaX * TOUCH_SENSITIVITY;
-                    camera.cameraRotation.x += deltaY * TOUCH_SENSITIVITY;
-                    // Ограничиваем вертикальное вращение (чтобы не смотреть вверх ногами)
-                     camera.cameraRotation.x = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, camera.cameraRotation.x));
-                    lastTouchX = evt.clientX;
-                    lastTouchY = evt.clientY;
-                 }
-             });
-             const touchEndHandler = (evt) => {
-                 if(evt.pointerType === 'touch') {
-                    isTouching = false;
-                    lastTouchX = null;
-                    lastTouchY = null;
-                    // Возвращаем стандартное управление, если оно было отключено
-                    // if(!camera._attachedCanvas) {
-                    //     camera.attachControl(canvas, true);
-                    // }
-                 }
-             }
-             canvas.addEventListener('pointerup', touchEndHandler);
-             canvas.addEventListener('pointerout', touchEndHandler); // Также сбрасываем при выходе за пределы канваса
-             canvas.addEventListener('pointercancel', touchEndHandler); // И при отмене касания
             return scene;
         };
-        // --- Вспомогательная функция для определения тач-устройства ---
-        function isTouchDevice() {
-            return (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
-        }
         // --- Запуск ---
-        const scene = createScene();
-        engine.runRenderLoop(function () {
-            if (scene) {
-                scene.render();
-            }
         });
         window.addEventListener('resize', function () {
             engine.resize();
         });
     </script>
 </body>
 </html>

 <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 {
             overflow: hidden;
             width: 100%;
             height: 100%;
             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;
+            left: 0;
+            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>
 </body>
 </html>