Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4, 2025

Commit

3416830

verified ·

1 Parent(s): 798a123

Update index.html

Browse files

Files changed (1) hide show

index.html +569 -265

index.html CHANGED Viewed

@@ -3,319 +3,623 @@
 <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>
-        /* Базовый сброс стилей и стили для canvas */
         html, body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden; /* Убираем прокрутку */
             width: 100%;
             height: 100%;
-            background-color: #000; /* Черный фон на случай проблем */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
-            display: block; /* Убираем лишнее пространство под canvas */
-            touch-action: none; /* Отключаем стандартные действия браузера при касании (важно для управления камерой) */
             outline: none; /* Убираем обводку при фокусе */
         }
     </style>
-    <!-- Подключаем Babylon.js через CDN -->
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- Можно добавить библиотеки материалов, загрузчиков и т.д. при необходимости -->
-    <!-- <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script> -->
-    <!-- <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> -->
 </head>
 <body>
     <canvas id="renderCanvas"></canvas>
     <script>
-        // Получаем элемент canvas
         const canvas = document.getElementById('renderCanvas');
-        // Создаем движок Babylon.js
-        const engine = new BABYLON.Engine(canvas, true, {
-            preserveDrawingBuffer: true, // Необходимо для некоторых эффектов, может влиять на производительность
-            stencil: true // Необходимо для некоторых эффектов
-        });
-        // --- Глобальные переменные и константы ---
-        const BLOCK_SIZE = 1; // Размер блока
-        const WORLD_WIDTH = 16; // Ширина мира в блоках
-        const WORLD_DEPTH = 16; // Глубина мира в блоках
-        const PLAYER_HEIGHT = 1.8; // Рост игрока
-        const blockStorage = {}; // Объект для хранения созданных блоков { "x_y_z": blockMesh }
-        // --- Материалы для блоков ---
-        let grassMat, dirtMat, stoneMat;
-        // Функция создания основной сцены
-        const createScene = () => {
-            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, -0.9, 0); // Глобальная гравитация (примерно как в Minecraft)
-            // --- Камера от первого лица ---
-            // Используем UniversalCamera для поддержки и мыши/клавиатуры, и сенсорного ввода
-            const camera = new BABYLON.UniversalCamera("playerCamera", new BABYLON.Vector3(WORLD_WIDTH / 2, PLAYER_HEIGHT * 2, WORLD_DEPTH / 2), scene);
-            camera.setTarget(new BABYLON.Vector3(0, PLAYER_HEIGHT, 0)); // Куда смотрит камера при старте
-            camera.attachControl(canvas, true); // Привязываем управление к canvas
-            // Настройки камеры
-            camera.speed = 0.15; // Скорость перемещения
-            camera.angularSensibility = 3000; // Чувствительность мыши/сенсора
-            camera.inertia = 0.5; // Инерция при движении и вращении
-            // Включаем гравитацию и столкновения для камеры
-            camera.applyGravity = true;
-            // Определяем размеры "тела" игрока для столкновений (эллипсоид)
-            camera.ellipsoid = new BABYLON.Vector3(BLOCK_SIZE * 0.4, PLAYER_HEIGHT * 0.45, BLOCK_SIZE * 0.4);
-             camera.ellipsoidOffset = new BABYLON.Vector3(0, PLAYER_HEIGHT * 0.45, 0); // Смещение эллипсоида, чтобы "ноги" были внизу
-            camera.checkCollisions = true; // Камера будет проверять столкновения
-            // Назначение клавиш управления (WASD)
-            camera.keysUp.push(87);    // W
-            camera.keysDown.push(83);  // S
-            camera.keysLeft.push(65);  // A
-            camera.keysRight.push(68); // D
-             // camera.keysUpward.push(32); // Пробел для прыжка (требует доп. логики или физического движка)
             // --- Освещение ---
-            // Простое полусферическое освещение, имитирующее небо и землю
-            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.specular = new BABYLON.Color3(0.5, 0.5, 0.5); // Блики
-            light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3); // Цвет света снизу
-            // --- Создание материалов ---
-            grassMat = new BABYLON.StandardMaterial("grassMat", scene);
-            grassMat.diffuseColor = new BABYLON.Color3(0.3, 0.6, 0.2); // Зеленый
-            grassMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1); // Меньше бликов
-            dirtMat = new BABYLON.StandardMaterial("dirtMat", scene);
-            dirtMat.diffuseColor = new BABYLON.Color3(0.6, 0.4, 0.2); // Коричневый
-            dirtMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
-            stoneMat = new BABYLON.StandardMaterial("stoneMat", scene);
-            stoneMat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); // Серый
-            stoneMat.specularColor = new BABYLON.Color3(0.2, 0.2, 0.2);
-            // --- Генерация простого мира ---
-            generateFlatWorld(scene);
-            // --- Логика взаимодействия (размещение/удаление блоков) ---
-            scene.onPointerDown = (evt, pickInfo) => {
-                // evt.button: 0 = левая, 1 = средняя, 2 = правая
-                const isRightClick = evt.button === 2;
-                const isLeftClick = evt.button === 0;
-                if (pickInfo.hit) {
-                    const pickedMesh = pickInfo.pickedMesh;
-                    // --- Удаление блока ---
-                    // Левая кнопка мыши ИЛИ простое касание на мобильном, если попали в блок
-                    if (pickedMesh && pickedMesh.isBlock && isLeftClick) {
-                        removeBlock(pickedMesh.position.x, pickedMesh.position.y, pickedMesh.position.z);
-                    }
-                    // --- Размещение блока ---
-                    // Правая кнопка мыши ИЛИ простое касание на мобильном, если попали НЕ в блок (или в грань блока)
-                    else if (pickedMesh && (isRightClick || (!pickedMesh.isBlock && isLeftClick))) {
-                        // Рассчитываем позицию для нового блока
-                        // Берем точку попадания и сдвигаемся на половину блока по нормали к поверхности
-                        const normal = pickInfo.getNormal(true); // Получаем нормаль к поверхности в мировой системе координат
-                        const placePos = pickInfo.pickedPoint.add(normal.scale(BLOCK_SIZE / 2));
-                        // Выравниваем по сетке и центрируем
-                        const gridX = Math.floor(placePos.x / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                        const gridY = Math.floor(placePos.y / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                        const gridZ = Math.floor(placePos.z / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                         // Проверка, не пытаемся ли поставить блок внутри игрока
-                         if (!isPositionOccupiedByPlayer(gridX, gridY, gridZ, camera)) {
-                            // Сейчас всегда ставим камень
-                            createBlock(gridX, gridY, gridZ, stoneMat, scene);
-                         } else {
-                             console.log("Нельзя разместить блок внутри себя!");
-                         }
                     }
-                }
             };
-             // Блокировка курсора при клике на canvas для удобного управления мышью
-             let isPointerLocked = false;
-             scene.onPointerDown = (evt) => {
-                 if (!isPointerLocked && evt.button === 0) { // Блокируем только по левому клику
-                     canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
-                     if (canvas.requestPointerLock) {
-                         canvas.requestPointerLock();
-                     }
-                 }
-                 // Вызываем предыдущую логику клика (размещение/удаление)
-                 handlePointerDown(evt, scene.pick(scene.pointerX, scene.pointerY));
              };
-             // Освобождение курсора при нажатии Esc
-             const pointerLockChange = () => {
-                 let controlEnabled = document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement || document.msPointerLockElement || null;
-                 isPointerLocked = !!controlEnabled;
-                 // Если курсор разблокирован, останавливаем камеру (опционально)
-                 // if (!controlEnabled) {
-                 //     camera.detachControl(canvas);
-                 // } else {
-                 //     camera.attachControl(canvas, true);
-                 // }
              };
-             document.addEventListener("pointerlockchange", pointerLockChange, false);
-             document.addEventListener("mspointerlockchange", pointerLockChange, false);
-             document.addEventListener("mozpointerlockchange", pointerLockChange, false);
-             document.addEventListener("webkitpointerlockchange", pointerLockChange, false);
-            return scene;
-        };
-        // --- Вспомогательные функции ---
-        // Функция создания блока
-        function createBlock(x, y, z, material, scene) {
-            const blockId = `${Math.floor(x)}_${Math.floor(y)}_${Math.floor(z)}`;
-            // Проверяем, нет ли уже блока в этой позиции
-            if (blockStorage[blockId]) {
-                // console.log(`Блок ${blockId} уже существует.`);
-                return null;
-            }
-            // Создаем куб (box)
-            const box = BABYLON.MeshBuilder.CreateBox("block_" + blockId, { size: BLOCK_SIZE }, scene);
-            box.position = new BABYLON.Vector3(x, y, z);
-            box.material = material;
-            box.checkCollisions = true; // Включаем столкновения для блока
-            box.isBlock = true; // Пользовательское свойство для идентификации
-            // Добавляем блок в хранилище
-            blockStorage[blockId] = box;
-            // console.log(`Создан блок ${blockId} в ${x}, ${y}, ${z}`);
-            return box;
-        }
-        // Функция удаления блока
-        function removeBlock(x, y, z) {
-            const blockId = `${Math.floor(x)}_${Math.floor(y)}_${Math.floor(z)}`;
-            const blockToRemove = blockStorage[blockId];
-            if (blockToRemove) {
-                blockToRemove.dispose(); // Удаляем меш из сцены
-                delete blockStorage[blockId]; // Удаляем из хранилища
-                // console.log(`Удален блок ${blockId}`);
-            } else {
-                // console.log(`Блок ${blockId} не найден для удаления.`);
-            }
         }
-        // Функция генерации плоского мира
-        function generateFlatWorld(scene) {
-            const groundLevel = 0; // Уровень земли
-            const dirtDepth = 3; // Глубина слоя грязи под травой
-            for (let x = 0; x < WORLD_WIDTH; x++) {
-                for (let z = 0; z < WORLD_DEPTH; z++) {
-                    // Верхний слой - трава
-                    createBlock(x + BLOCK_SIZE / 2, groundLevel + BLOCK_SIZE / 2, z + BLOCK_SIZE / 2, grassMat, scene);
-                    // Слои грязи под травой
-                    for (let y = 1; y <= dirtDepth; y++) {
-                         createBlock(x + BLOCK_SIZE / 2, groundLevel + BLOCK_SIZE / 2 - y * BLOCK_SIZE, z + BLOCK_SIZE / 2, dirtMat, scene);
-                    }
                 }
             }
-            console.log(`Сгенерирован плоский мир ${WORLD_WIDTH}x${WORLD_DEPTH}`);
-        }
-         // Проверка, попадает ли позиция в эллипсоид игрока
-         function isPositionOccupiedByPlayer(gridX, gridY, gridZ, camera) {
-             const playerPos = camera.position;
-             const playerEllipsoid = camera.ellipsoid;
-             const playerOffset = camera.ellipsoidOffset;
-             // Центр эллипсоида игрока
-             const playerCenterY = playerPos.y + playerOffset.y;
-             // Границы блока
-             const blockMinX = gridX - BLOCK_SIZE / 2;
-             const blockMaxX = gridX + BLOCK_SIZE / 2;
-             const blockMinY = gridY - BLOCK_SIZE / 2;
-             const blockMaxY = gridY + BLOCK_SIZE / 2;
-             const blockMinZ = gridZ - BLOCK_SIZE / 2;
-             const blockMaxZ = gridZ + BLOCK_SIZE / 2;
-             // Границы эллипсоида игрока (приблизительно)
-             const playerMinX = playerPos.x - playerEllipsoid.x;
-             const playerMaxX = playerPos.x + playerEllipsoid.x;
-             const playerMinY = playerCenterY - playerEllipsoid.y; // Используем центр эллипсоида
-             const playerMaxY = playerCenterY + playerEllipsoid.y; // Используем центр эллипсоида
-             const playerMinZ = playerPos.z - playerEllipsoid.z;
-             const playerMaxZ = playerPos.z + playerEllipsoid.z;
-            // Проверка на пересечение AABB (Axis-Aligned Bounding Box)
-            const overlapX = playerMinX < blockMaxX && playerMaxX > blockMinX;
-            const overlapY = playerMinY < blockMaxY && playerMaxY > blockMinY;
-            const overlapZ = playerMinZ < blockMaxZ && playerMaxZ > blockMinZ;
-            return overlapX && overlapY && overlapZ;
-         }
-         // Обработчик клика/касания (вынесен для работы с блокировкой курсора)
-         function handlePointerDown(evt, pickInfo) {
-              // evt.button: 0 = левая, 1 = средняя, 2 = правая
-              const isRightClick = evt.button === 2;
-              const isLeftClick = evt.button === 0;
-              if (pickInfo && pickInfo.hit) {
-                  const pickedMesh = pickInfo.pickedMesh;
-                  const scene = pickedMesh.getScene(); // Получаем сцену из объекта
-                  // --- Удаление блока ---
-                  // Левая кнопка мыши ИЛИ простое касание на мобильном, если попали в блок
-                  if (pickedMesh && pickedMesh.isBlock && isLeftClick) {
-                      removeBlock(pickedMesh.position.x, pickedMesh.position.y, pickedMesh.position.z);
-                  }
-                  // --- Размещение блока ---
-                  // Правая кнопка мыши ИЛИ простое касание на мобильном, если попали НЕ в блок (или в грань блока)
-                  else if (pickedMesh && (isRightClick || (!pickedMesh.isBlock && isLeftClick))) {
-                      const normal = pickInfo.getNormal(true);
-                      const placePos = pickInfo.pickedPoint.add(normal.scale(BLOCK_SIZE / 2));
-                      const gridX = Math.floor(placePos.x / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                      const gridY = Math.floor(placePos.y / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                      const gridZ = Math.floor(placePos.z / BLOCK_SIZE) * BLOCK_SIZE + BLOCK_SIZE / 2;
-                      if (!isPositionOccupiedByPlayer(gridX, gridY, gridZ, scene.activeCamera)) {
-                          createBlock(gridX, gridY, gridZ, stoneMat, scene);
-                      } else {
-                          console.log("Нельзя разместить блок внутри себя!");
-                      }
-                  }
-              }
-         }
-        // --- Запуск ---
-        const scene = createScene(); // Создаем сцену
-        // Главный цикл рендеринга
-        engine.runRenderLoop(() => {
-            scene.render();
-        });
-        // Обработчик изменения размера окна/экрана
-        window.addEventListener('resize', () => {
-            engine.resize();
         });
     </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>MiniCraft 3D (Babylon.js Demo)</title>
     <style>
         html, body {
+            overflow: hidden;
             width: 100%;
             height: 100%;
+            margin: 0;
+            padding: 0;
+            background-color: #000; /* Фон за канвасом */
+            touch-action: none; /* Отключаем стандартные действия браузера на касания */
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none;
             outline: none; /* Убираем обводку при фокусе */
         }
+        /* --- Стили для мобильных контролов --- */
+        #controlsOverlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 150px; /* Высота зоны контролов */
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            pointer-events: none; /* Позволяет кликать "сквозь" оверлей на канвас */
+            padding: 10px;
+            box-sizing: border-box;
+            z-index: 10;
+        }
+        #joystickZone {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 120px;
+            height: 120px;
+            background-color: rgba(128, 128, 128, 0.3);
+            border-radius: 50%;
+            pointer-events: all; /* Включаем события для джойстика */
+        }
+         #joystickThumb {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background-color: rgba(200, 200, 200, 0.5);
+            border-radius: 50%;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none; /* Сам "палец" не должен ловить события */
+         }
+        #actionButtons {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 15px; /* Расстояние между кнопками */
+            pointer-events: all; /* Включаем события для кнопок */
+        }
+        .actionButton {
+            width: 60px;
+            height: 60px;
+            background-color: rgba(100, 100, 255, 0.6);
+            border: 2px solid rgba(200, 200, 255, 0.8);
+            border-radius: 15px;
+            color: white;
+            font-size: 12px;
+            font-weight: bold;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            user-select: none; /* Запрещаем выделение текста */
+            pointer-events: all;
+            line-height: 1.1; /* Для переноса строк */
+            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+            transition: background-color 0.1s ease;
+        }
+        .actionButton:active {
+             background-color: rgba(80, 80, 200, 0.8);
+             transform: scale(0.95);
+        }
     </style>
+    <!-- Подключаем Babylon.js и GUI -->
     <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
 </head>
 <body>
     <canvas id="renderCanvas"></canvas>
+    <!-- Оверлей для мобильных контролов -->
+    <div id="controlsOverlay">
+        <div id="joystickZone">
+             <div id="joystickThumb"></div>
+        </div>
+        <div id="actionButtons">
+            <button id="jumpButton" class="actionButton">Прыжок</button>
+            <button id="placeButton" class="actionButton">Пост.</button>
+            <button id="breakButton" class="actionButton">Слом.</button>
+        </div>
+    </div>
     <script>
+        // Получаем элементы DOM
         const canvas = document.getElementById('renderCanvas');
+        const joystickZone = document.getElementById('joystickZone');
+        const joystickThumb = document.getElementById('joystickThumb');
+        const jumpButton = document.getElementById('jumpButton');
+        const placeButton = document.getElementById('placeButton');
+        const breakButton = document.getElementById('breakButton');
+        // --- Настройки ---
+        const PLAYER_HEIGHT = 1.8;
+        const PLAYER_RADIUS = 0.4;
+        const PLAYER_SPEED = 0.15;
+        const JUMP_FORCE = 0.25; // Сила прыжка
+        const GRAVITY = -0.05;   // Гравитация (должна быть отрицательной)
+        const BLOCK_SIZE = 1;
+        const REACH_DISTANCE = 5; // Дальность взаимодействия с блоками
+        const SENSITIVITY = 0.003; // Чувствительность мыши/тачпада
+        const JOYSTICK_SENSITIVITY = 0.05; // Чувствительность джойстика
+        // --- Глобальные переменные ---
+        let engine;
+        let scene;
+        let camera;
+        let ground;
+        let selectedBlockMaterial; // Материал для предпросмотра блока
+        let previewBlock;          // Меш для предпросмотра
+        // Переменные для управления
+        let inputMap = {}; // Для отслеживания нажатых клавиш
+        let verticalCameraVelocity = 0; // Вертикальная скорость для прыжка/падения
+        let isGrounded = false;         // Находится ли игрок на земле
+        // Переменные для мобильного управления
+        let joystickActive = false;
+        let joystickStartX = 0;
+        let joystickStartY = 0;
+        let joystickCurrentX = 0;
+        let joystickCurrentY = 0;
+        let moveForward = 0;
+        let moveStrafe = 0; // 0 = нет, 1 = вправо, -1 = влево
+        let touchLookActive = false;
+        let touchLookStartX = 0;
+        let touchLookStartY = 0;
+        let lastTouchX = 0;
+        let lastTouchY = 0;
+        let placeAction = false;
+        let breakAction = false;
+        let jumpAction = false;
+        // --- Инициализация Babylon.js ---
+        async function initGame() {
+            engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+            scene = new BABYLON.Scene(engine);
+            scene.collisionsEnabled = true; // Включаем коллизии в сцене
+            scene.gravity = new BABYLON.Vector3(0, GRAVITY, 0); // Устанавливаем гравитацию
+            // --- Камера (Игрок) ---
+            camera = new BABYLON.FreeCamera("playerCamera", new BABYLON.Vector3(0, PLAYER_HEIGHT + 5, -10), scene);
+            camera.attachControl(canvas, true); // Привязываем управление к канвасу (для мыши/тачпада)
+            camera.applyGravity = true;         // Включаем гравитацию для камеры
+            camera.checkCollisions = true;      // Включаем коллизии для камеры
+            // Определяем форму игрока для коллизий (эллипсоид)
+            camera.ellipsoid = new BABYLON.Vector3(PLAYER_RADIUS, PLAYER_HEIGHT / 2, PLAYER_RADIUS);
+            camera.ellipsoidOffset = new BABYLON.Vector3(0, PLAYER_HEIGHT / 2, 0); // Смещение центра эллипсоида
+            camera.minZ = 0.1; // Ближняя плоскость отсечения
+            camera.speed = PLAYER_SPEED; // Используем для клавиатуры
+            camera.angularSensibility = 1 / SENSITIVITY / 10; // Инвертированная чувствительность для мыши
+            // Убираем стандартное управление клавишами WASD и стрелками, будем обрабатывать сами
+            camera.keysUp = [];
+            camera.keysDown = [];
+            camera.keysLeft = [];
+            camera.keysRight = [];
             // --- Освещение ---
+            const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
             light.intensity = 0.8;
+            // --- Небо ---
+            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
+            const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
+            skyboxMaterial.backFaceCulling = false;
+            // Простые цвета для неба (вместо текстур для простоты)
+            skyboxMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.8, 1.0); // Голубой цвет
+            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // Убираем блики
+            skybox.material = skyboxMaterial;
+            skybox.infiniteDistance = true; // Небо всегда на фоне
+            // --- Земля ---
+            ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 }, scene);
+            const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
+            groundMaterial.diffuseColor = new BABYLON.Color3(0.4, 0.6, 0.2); // Зеленый цвет
+            groundMaterial.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
+            ground.material = groundMaterial;
+            ground.checkCollisions = true; // Включаем коллизии для земли
+            // --- Материалы для блоков ---
+            const grassMat = new BABYLON.StandardMaterial("grassMat", scene);
+            grassMat.diffuseColor = new BABYLON.Color3(0.4, 0.6, 0.2); // Трава
+            const dirtMat = new BABYLON.StandardMaterial("dirtMat", scene);
+            dirtMat.diffuseColor = new BABYLON.Color3(0.6, 0.4, 0.2); // Земля
+            const stoneMat = new BABYLON.StandardMaterial("stoneMat", scene);
+            stoneMat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); // Камень
+            selectedBlockMaterial = stoneMat; // По умолчанию ставим камень
+             // --- Материал для предпросмотра ---
+            const previewMat = new BABYLON.StandardMaterial("previewMat", scene);
+            previewMat.diffuseColor = new BABYLON.Color3(1, 1, 1); // Белый
+            previewMat.alpha = 0.4; // Полупрозрачный
+            // --- Предпросмотр блока ---
+            previewBlock = BABYLON.MeshBuilder.CreateBox("previewBlock", { size: BLOCK_SIZE * 1.01 }, scene); // Чуть больше блока
+            previewBlock.material = previewMat;
+            previewBlock.isPickable = false; // Нельзя выбрать лучом
+            previewBlock.setEnabled(false); // Изначально скрыт
+            // --- Создание начал��ных блоков (простой пример) ---
+            createBlock(0, 0.5, 5, grassMat);
+            createBlock(1, 0.5, 5, dirtMat);
+            createBlock(-1, 0.5, 5, stoneMat);
+            createBlock(0, 1.5, 5, stoneMat); // Блок сверху
+            // --- Обработка ввода ---
+            setupInputHandling();
+            setupMobileControls();
+            // --- Основной цикл игры ---
+            engine.runRenderLoop(() => {
+                updatePlayerMovement();
+                updateBlockInteraction();
+                scene.render();
+            });
+            // --- Обработка изменения размера окна ---
+            window.addEventListener('resize', () => {
+                engine.resize();
+            });
+        }
+        // --- Функция создания блока ---
+        function createBlock(x, y, z, material) {
+            const block = BABYLON.MeshBuilder.CreateBox(`block_${x}_${y}_${z}`, { size: BLOCK_SIZE }, scene);
+            block.position = new BABYLON.Vector3(x, y, z);
+            block.material = material;
+            block.checkCollisions = true;
+            block.isPickable = true; // Делаем блоки выбираемыми лучом
+            block.metadata = { type: "block" }; // Для идентификации
+            return block;
+        }
+        // --- Настройка обработки ввода (Клавиатура) ---
+        function setupInputHandling() {
+            scene.onPointerDown = (evt, pickResult) => {
+                 // 0 = ЛКМ (ломать), 2 = ПКМ (ставить)
+                 if (evt.button === 0) breakAction = true;
+                 if (evt.button === 2) placeAction = true;
+                 // Если клик не по GUI элементам (для десктопа важно)
+                 if (!BABYLON.GUI.AdvancedDynamicTexture.IsBabylonGUIElement(evt.target)) {
+                    if (!engine.isPointerLock) {
+                       engine.enterPointerlock();
                     }
+                 }
             };
+             scene.onPointerUp = (evt) => {
+                 if (evt.button === 0) breakAction = false;
+                 if (evt.button === 2) placeAction = false;
              };
+            // Отслеживание нажатых клавиш
+            window.addEventListener("keydown", (event) => {
+                inputMap[event.key.toLowerCase()] = true;
+                if (event.key === " ") { // Прыжок на пробел
+                    jumpAction = true;
+                     event.preventDefault(); // Предотвращаем прокрутку страницы
+                }
+            });
+            window.addEventListener("keyup", (event) => {
+                inputMap[event.key.toLowerCase()] = false;
+                 if (event.key === " ") {
+                     jumpAction = false;
+                 }
+            });
+             // Выход из Pointer Lock по Esc
+             document.addEventListener("pointerlockchange", () => {
+                if (document.pointerLockElement !== canvas) {
+                    engine.exitPointerlock();
+                     // Очистить inputMap, чтобы персонаж не продолжал бежать
+                     inputMap = {};
+                     moveForward = 0;
+                     moveStrafe = 0;
+                }
+             }, false);
+        }
+         // --- Настройка мобильных контролов ---
+        function setupMobileControls() {
+            // --- Джойстик ---
+            const joystickRadius = joystickZone.offsetWidth / 2;
+            const thumbRadius = joystickThumb.offsetWidth / 2;
+            const maxThumbOffset = joystickRadius - thumbRadius;
+            joystickZone.addEventListener('pointerdown', (e) => {
+                 if (!joystickActive) {
+                    joystickActive = true;
+                    joystickStartX = e.clientX;
+                    joystickStartY = e.clientY;
+                    joystickZone.style.backgroundColor = 'rgba(128, 128, 128, 0.5)'; // Активный цвет
+                    // Предотвращаем скролл страницы при движении пальца
+                    e.preventDefault();
+                    joystickZone.setPointerCapture(e.pointerId); // Захватываем указатель
+                 }
+            }, { passive: false }); // passive: false нужен для preventDefault
+            joystickZone.addEventListener('pointermove', (e) => {
+                if (joystickActive) {
+                    joystickCurrentX = e.clientX - joystickStartX;
+                    joystickCurrentY = e.clientY - joystickStartY;
+                    let distance = Math.sqrt(joystickCurrentX * joystickCurrentX + joystickCurrentY * joystickCurrentY);
+                    let angle = Math.atan2(joystickCurrentY, joystickCurrentX);
+                     // Ограничиваем смещение "пальца" джойстика
+                    let thumbX = Math.cos(angle) * Math.min(distance, maxThumbOffset);
+                    let thumbY = Math.sin(angle) * Math.min(distance, maxThumbOffset);
+                    joystickThumb.style.left = `${joystickRadius + thumbX}px`;
+                    joystickThumb.style.top = `${joystickRadius + thumbY}px`;
+                    // Преобразуем смещение в движение камеры
+                    // Нормализуем вектор смещения
+                    let normalizedX = joystickCurrentX / joystickRadius;
+                    let normalizedY = joystickCurrentY / joystickRadius; // Y инвертирован (вверх = отрицательный Y)
+                    // Ограничиваем значения [-1, 1]
+                    normalizedX = Math.max(-1, Math.min(1, normalizedX));
+                    normalizedY = Math.max(-1, Math.min(1, normalizedY));
+                     // Устанавливаем движение (Y - вперед/назад, X - влево/вправо)
+                     moveForward = -normalizedY; // Инвертируем Y
+                     moveStrafe = normalizedX;
+                     // Добавляем "мертвую зону"
+                     if (Math.abs(moveForward) < 0.1) moveForward = 0;
+                     if (Math.abs(moveStrafe) < 0.1) moveStrafe = 0;
+                }
+            });
+            const onJoystickEnd = (e) => {
+                 if (joystickActive && e.pointerId === e.target.pointerId) { // Убедимся, что это тот же палец
+                    joystickActive = false;
+                    moveForward = 0;
+                    moveStrafe = 0;
+                    joystickThumb.style.left = '50%';
+                    joystickThumb.style.top = '50%';
+                    joystickZone.style.backgroundColor = 'rgba(128, 128, 128, 0.3)'; // Неактивный цвет
+                    joystickZone.releasePointerCapture(e.pointerId); // Освобождаем указатель
+                 }
              };
+             joystickZone.addEventListener('pointerup', onJoystickEnd);
+             joystickZone.addEventListener('pointercancel', onJoystickEnd); // На случай отмены касания
+            // --- Поворот камеры касанием (правая часть экрана) ---
+            canvas.addEventListener('pointerdown', (e) => {
+                // Игнорировать касания на джойстике и кнопках
+                 if (e.target === joystickZone || e.target.closest('#actionButtons')) return;
+                 if (!touchLookActive && !joystickActive && document.pointerLockElement !== canvas) { // Активируем поворот только если не активен джойстик и не заблокирован курсор
+                    touchLookActive = true;
+                    touchLookStartX = e.clientX;
+                    touchLookStartY = e.clientY;
+                    lastTouchX = e.clientX;
+                    lastTouchY = e.clientY;
+                    canvas.setPointerCapture(e.pointerId); // Захватываем указатель на канвасе
+                    e.preventDefault();
+                }
+            }, { passive: false });
+            canvas.addEventListener('pointermove', (e) => {
+                if (touchLookActive && e.pointerId === e.target.pointerId) {
+                    let deltaX = e.clientX - lastTouchX;
+                    let deltaY = e.clientY - lastTouchY;
+                    camera.cameraRotation.y += deltaX * SENSITIVITY * 0.5; // Уменьшаем чувствительность для тачпада
+                    camera.cameraRotation.x += deltaY * SENSITIVITY * 0.5;
+                    // Ограничиваем вертикальный обзор
+                    camera.cameraRotation.x = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, camera.cameraRotation.x));
+                    lastTouchX = e.clientX;
+                    lastTouchY = e.clientY;
+                 }
+             });
+             const onTouchLookEnd = (e) => {
+                 if (touchLookActive && e.pointerId === e.target.pointerId) {
+                     touchLookActive = false;
+                     canvas.releasePointerCapture(e.pointerId);
+                 }
+             };
+             canvas.addEventListener('pointerup', onTouchLookEnd);
+             canvas.addEventListener('pointercancel', onTouchLookEnd);
+            // --- Кнопки действий ---
+            jumpButton.addEventListener('pointerdown', (e) => { jumpAction = true; e.preventDefault(); e.stopPropagation(); });
+            jumpButton.addEventListener('pointerup', (e) => { jumpAction = false; });
+            jumpButton.addEventListener('pointerleave', (e) => { jumpAction = false; }); // Если палец ушел с кнопки
+            placeButton.addEventListener('pointerdown', (e) => { placeAction = true; e.preventDefault(); e.stopPropagation(); });
+            placeButton.addEventListener('pointerup', (e) => { placeAction = false; });
+            placeButton.addEventListener('pointerleave', (e) => { placeAction = false; });
+            breakButton.addEventListener('pointerdown', (e) => { breakAction = true; e.preventDefault(); e.stopPropagation(); });
+            breakButton.addEventListener('pointerup', (e) => { breakAction = false; });
+            breakButton.addEventListener('pointerleave', (e) => { breakAction = false; });
         }
+        // --- Обновление движения игрока ---
+        function updatePlayerMovement() {
+            const forward = new BABYLON.Vector3(
+                Math.sin(camera.rotation.y),
+                0,
+                Math.cos(camera.rotation.y)
+            );
+            const right = new BABYLON.Vector3(
+                Math.sin(camera.rotation.y + Math.PI / 2),
+                0,
+                Math.cos(camera.rotation.y + Math.PI / 2)
+            );
+            const moveDirection = BABYLON.Vector3.Zero();
+             // Клавиатурный ввод (приоритет если залочен курсор)
+             if (document.pointerLockElement === canvas) {
+                if (inputMap["w"] || inputMap["arrowup"]) {
+                    moveDirection.addInPlace(forward);
                 }
+                if (inputMap["s"] || inputMap["arrowdown"]) {
+                    moveDirection.addInPlace(forward.scale(-1));
+                }
+                if (inputMap["a"] || inputMap["arrowleft"]) {
+                    moveDirection.addInPlace(right.scale(-1));
+                }
+                if (inputMap["d"] || inputMap["arrowright"]) {
+                    moveDirection.addInPlace(right);
+                }
+             } else { // Мобильный ввод
+                 if (moveForward > 0.1) { // Порог чувствительности
+                    moveDirection.addInPlace(forward.scale(moveForward));
+                 } else if (moveForward < -0.1) {
+                    moveDirection.addInPlace(forward.scale(moveForward)); // Он уже отрицательный
+                 }
+                  if (moveStrafe > 0.1) {
+                    moveDirection.addInPlace(right.scale(moveStrafe));
+                 } else if (moveStrafe < -0.1) {
+                     moveDirection.addInPlace(right.scale(moveStrafe)); // Он уже отрицательный
+                 }
+             }
+            // Нормализация диагонального движения
+            if (moveDirection.lengthSquared() > 0) {
+                moveDirection.normalize();
             }
+            // Применяем движение
+             const finalMove = moveDirection.scale(PLAYER_SPEED);
+             camera.cameraDirection.addInPlace(new BABYLON.Vector3(finalMove.x, 0, finalMove.z)); // Используем cameraDirection для учета гравитации/коллизий
+            // --- Проверка нахождения на земле ---
+            // Кидаем короткий луч вниз из-под ног камеры
+            const rayStart = camera.position.clone();
+            rayStart.y -= (PLAYER_HEIGHT / 2) - 0.1; // Чуть ниже центра эллипсоида
+            const rayEnd = rayStart.clone();
+            rayEnd.y -= 0.3; // Короткий луч вниз
+            const groundRay = new BABYLON.Ray(rayStart, rayEnd.subtract(rayStart).normalize(), 0.3);
+            // let rayHelper = new BABYLON.RayHelper(groundRay); rayHelper.show(scene); // Для отладки
+            const groundHit = scene.pickWithRay(groundRay, (mesh) => mesh.isPickable && mesh.checkCollisions);
+             isGrounded = groundHit.hit;
+            // --- Прыжок ---
+             if (jumpAction && isGrounded) {
+                 // Простой способ: задаем вертикальную скорость камере
+                 // Babylon.js FreeCamera с applyGravity не имеет прямого velocity,
+                 // поэтому имитируем прыжок, добавляя смещение к cameraDirection
+                 camera.cameraDirection.y = JUMP_FORCE; // Применить силу прыжка
+                 isGrounded = false; // Сразу считаем, что не на земле
+                 jumpAction = false; // Сбрасываем флаг, чтобы не прыгать постоянно
+             }
+             // Сбрасываем флаги действий, если они были одноразовыми (как клик мыши)
+             // Для кнопок они сбросятся при pointerup/leave
+              if (!placeButton.matches(':active')) placeAction = false; // Проверка для десктопа
+              if (!breakButton.matches(':active')) breakAction = false; // Проверка для десктопа
+        }
+        // --- Обновление взаимодействия с блоками ---
+        function updateBlockInteraction() {
+            const ray = scene.createPickingRay(
+                engine.getRenderWidth() / 2,
+                engine.getRenderHeight() / 2,
+                null,
+                camera
+            );
+            const hit = scene.pickWithRay(ray, (mesh) => mesh.metadata?.type === "block", true); // Ищем только блоки
+             previewBlock.setEnabled(false); // Скрываем предпросмотр по умолчанию
+            if (hit.hit && hit.pickedMesh && hit.distance <= REACH_DISTANCE) {
+                const pickedBlock = hit.pickedMesh;
+                const normal = hit.getNormal(true); // Нормаль к грани
+                 // --- Позиция для предпросмотра/нового блока ---
+                 // Сначала округляем точку попадания, чтобы она была ближе к центру грани
+                 const roundedHitPoint = new BABYLON.Vector3(
+                      Math.round(hit.pickedPoint.x / BLOCK_SIZE) * BLOCK_SIZE,
+                      Math.round(hit.pickedPoint.y / BLOCK_SIZE) * BLOCK_SIZE,
+                      Math.round(hit.pickedPoint.z / BLOCK_SIZE) * BLOCK_SIZE
+                  );
+                 // Затем добавляем нормаль, умноженную на половину размера блока,
+                 // чтобы вычислить центр соседней ячейки
+                 const potentialNewBlockPos = pickedBlock.position.add(normal.scale(BLOCK_SIZE));
+                 // Выравниваем позицию по сетке
+                 const newBlockPos = new BABYLON.Vector3(
+                    Math.round(potentialNewBlockPos.x / BLOCK_SIZE) * BLOCK_SIZE,
+                    Math.round(potentialNewBlockPos.y / BLOCK_SIZE) * BLOCK_SIZE,
+                    Math.round(potentialNewBlockPos.z / BLOCK_SIZE) * BLOCK_SIZE
+                 );
+                 // Корректируем Y, чтобы он был кратен 0.5*BLOCK_SIZE (если блоки могут стоять на пол-блока)
+                 // В нашем случае просто округляем до ближайшего центра блока
+                 newBlockPos.y = Math.round(potentialNewBlockPos.y / (BLOCK_SIZE / 2)) * (BLOCK_SIZE / 2); // Выравнивание по центрам блоков
+                 // --- Предпросмотр установки блока ---
+                 previewBlock.position = newBlockPos;
+                 previewBlock.setEnabled(true);
+                // --- Ломание блока ---
+                if (breakAction) {
+                     if(pickedBlock !== ground) { // Не ломаем землю
+                         pickedBlock.dispose();
+                     }
+                    breakAction = false; // Обрабатываем однократно
+                }
+                // --- Установка блока ---
+                if (placeAction) {
+                    // Проверяем, не пытаемся ли поставить блок внутри игрока
+                    const playerBox = new BABYLON.BoundingBox(
+                        camera.position.subtract(camera.ellipsoid),
+                        camera.position.add(camera.ellipsoid)
+                    );
+                    const newBlockBox = new BABYLON.BoundingBox(
+                        newBlockPos.subtract(new BABYLON.Vector3(BLOCK_SIZE/2, BLOCK_SIZE/2, BLOCK_SIZE/2)),
+                        newBlockPos.add(new BABYLON.Vector3(BLOCK_SIZE/2, BLOCK_SIZE/2, BLOCK_SIZE/2))
+                    );
+                    // Проверяем, есть ли уже блок на этом месте
+                    let collisionFound = false;
+                    scene.meshes.forEach(mesh => {
+                        if (mesh.metadata?.type === "block" && mesh.position.equals(newBlockPos)) {
+                            collisionFound = true;
+                        }
+                    });
+                    if (!playerBox.intersects(newBlockBox) && !collisionFound) {
+                         createBlock(newBlockPos.x, newBlockPos.y, newBlockPos.z, selectedBlockMaterial);
+                     }
+                    placeAction = false; // Обрабатываем однократно
+                }
+            } else {
+                 // Если луч ни во что не попал в пределах досягаемости
+                 previewBlock.setEnabled(false);
+                 // Сбрасываем действия, если кнопка отпущена (важно для мобильных)
+                 // breakAction = false;
+                 // placeAction = false;
+            }
+        }
+        // --- Запуск игры после загрузки DOM ---
+        document.addEventListener("DOMContentLoaded", () => {
+             initGame().catch(error => console.error("Initialization failed:", error));
         });
     </script>