Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4, 2025

Commit

324e9b3

verified ·

1 Parent(s): 3416830

Update index.html

Browse files

Files changed (1) hide show

index.html +463 -506

index.html CHANGED Viewed

@@ -2,624 +2,581 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>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>

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>MiniCraft 3D Demo</title>
+    <script src="https://cdn.babylonjs.com/babylon.js"></script>
+    <!-- Для работы Pointer событий на всех устройствах (важно для тачскрина) -->
+    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
     <style>
         html, body {
             width: 100%;
             height: 100%;
             margin: 0;
             padding: 0;
+            overflow: hidden;
+            background-color: #87CEEB; /* Цвет неба по умолчанию */
+            font-family: sans-serif;
         }
         #renderCanvas {
             width: 100%;
             height: 100%;
+            touch-action: none; /* Отключаем стандартные жесты браузера на канвасе */
         }
+        #crosshair {
             position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 10px;
+            height: 10px;
+            border: 1px solid white;
+            background-color: rgba(0, 0, 0, 0.5);
+            transform: translate(-50%, -50%);
+            pointer-events: none; /* Не мешает кликам по канвасу */
             z-index: 10;
         }
+        #controls {
             position: absolute;
+            bottom: 10px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            pointer-events: none; /* Сам контейнер не ловит события */
+            z-index: 5;
+        }
+        .joystick-area {
             width: 120px;
             height: 120px;
+            background-color: rgba(200, 200, 200, 0.4);
             border-radius: 50%;
+            position: relative;
+            pointer-events: auto; /* Область джойстика ловит события */
         }
+        #joystick {
+            width: 50px;
+            height: 50px;
+            background-color: rgba(100, 100, 100, 0.7);
             border-radius: 50%;
+            position: absolute;
             top: 50%;
+            left: 50%;
             transform: translate(-50%, -50%);
+            cursor: grab;
+        }
         #actionButtons {
             display: flex;
+            gap: 15px;
+            pointer-events: auto; /* Кнопки ловят события */
         }
+        .action-button {
             width: 60px;
             height: 60px;
+            border: 2px solid rgba(50, 50, 50, 0.7);
+            background-color: rgba(200, 200, 200, 0.5);
+            border-radius: 10px;
             font-size: 12px;
             font-weight: bold;
             display: flex;
             justify-content: center;
             align-items: center;
             text-align: center;
+            cursor: pointer;
+            user-select: none; /* Запретить выделение текста на кнопке */
         }
+        .action-button:active {
+            background-color: rgba(150, 150, 150, 0.7);
         }
+        /* Скрываем мобильные контролы на десктопе (ширина > 800px) */
+       /* @media (min-width: 801px) {
+            #controls {
+                display: none;
+            }
+        } */ /* Пока оставим видимыми для теста */
+        #blockSelector {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0,0,0,0.3);
+            padding: 5px;
+            border-radius: 5px;
+            display: flex;
+            gap: 5px;
+            z-index: 15;
+        }
+        .block-option {
+            width: 40px;
+            height: 40px;
+            border: 2px solid #555;
+            background-size: cover;
+            cursor: pointer;
+        }
+        .block-option.selected {
+            border-color: yellow;
+            box-shadow: 0 0 5px yellow;
+        }
     </style>
 </head>
 <body>
     <canvas id="renderCanvas"></canvas>
+    <div id="crosshair"></div>
+    <!-- Элементы управления для мобильных -->
+    <div id="controls">
+        <div class="joystick-area" id="joystickArea">
+            <div id="joystick"></div>
         </div>
         <div id="actionButtons">
+            <div class="action-button" id="jumpButton">JUMP</div>
+            <div class="action-button" id="breakButton">BREAK</div>
+            <div class="action-button" id="placeButton">PLACE</div>
         </div>
     </div>
+     <!-- Выбор блока -->
+    <div id="blockSelector">
+        </div>
     <script>
         const canvas = document.getElementById('renderCanvas');
+        const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
+        // --- Переменные для управления ---
         let moveForward = 0;
+        let moveRight = 0;
+        let wantsToJump = false;
+        let currentBlockType = 'grass'; // Блок по умолчанию для установки
+        // --- Текстуры (используем простые URL для примера) ---
+        // На реальном проекте лучше использовать свои или CC0 текстуры
+        const textureUrls = {
+            grassTop: "https://assets.babylonjs.com/environments/grass.png",
+            grassSide: "https://assets.babylonjs.com/environments/grass_side.png", // Предположим, что есть такая
+            dirt: "https://assets.babylonjs.com/environments/dirt.jpg",
+            stone: "https://assets.babylonjs.com/environments/rock.png", // Похоже на камень
+            wood: "https://assets.babylonjs.com/environments/wood.png"   // Похоже на дерево
+        };
+        // Простая замена для grassSide, если её нет
+        if (!textureUrls.grassSide) textureUrls.grassSide = textureUrls.dirt;
+        // --- Функция создания сцены ---
+        const createScene = () => {
+            const scene = new BABYLON.Scene(engine);
+            scene.clearColor = new BABYLON.Color3(0.53, 0.81, 0.92); // Цвет неба
+            scene.gravity = new BABYLON.Vector3(0, -0.9, 0); // Гравитация
+            scene.collisionsEnabled = true; // Включаем обработку столкновений
             // --- Камера (Игрок) ---
+            const camera = new BABYLON.UniversalCamera("playerCamera", new BABYLON.Vector3(5, 5, -5), scene);
+            camera.setTarget(new BABYLON.Vector3(0, 1.6, 0)); // Куда смотрит камера при старте
+            camera.attachControl(canvas, true); // Управление мышью/клавиатурой
+            camera.speed = 0.15; // Скорость движения
+            camera.angularSensibility = 4000; // Чувствительность мыши
+            // Настройки для столкновений и гравитации камеры
+            camera.checkCollisions = true;
+            camera.applyGravity = true;
+            // Эллипсоид - "хитбокс" игрока (ширина, высота, ширина)
+            camera.ellipsoid = new BABYLON.Vector3(0.4, 0.9, 0.4);
+            // Смещение эллипсоида, чтобы "ноги" были ниже камеры
+            camera.ellipsoidOffset = new BABYLON.Vector3(0, 0.9, 0);
+             // Убираем стандартное управление клавиатурой, если используем джойстик
+            // camera.inputs.removeByType("FreeCameraKeyboardMoveInput");
+            // camera.inputs.removeByType("FreeCameraMouseInput"); // Оставим мышь для обзора
             // --- Освещение ---
             const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
             light.intensity = 0.8;
+            // --- Материалы блоков ---
+            const materials = {};
+            // Трава (MultiMaterial)
+            const grassMat = new BABYLON.StandardMaterial("grassMat", scene);
+            grassMat.diffuseTexture = new BABYLON.Texture(textureUrls.grassTop, scene);
+            const grassSideMat = new BABYLON.StandardMaterial("grassSideMat", scene);
+            grassSideMat.diffuseTexture = new BABYLON.Texture(textureUrls.grassSide, scene);
+            const grassBottomMat = new BABYLON.StandardMaterial("grassBottomMat", scene);
+            grassBottomMat.diffuseTexture = new BABYLON.Texture(textureUrls.dirt, scene); // Низ травы = земля
+            const grassMultiMat = new BABYLON.MultiMaterial("grassMulti", scene);
+            grassMultiMat.subMaterials.push(grassSideMat); // right, left, front, back (индексы 0, 1, 2, 3)
+            grassMultiMat.subMaterials.push(grassSideMat);
+            grassMultiMat.subMaterials.push(grassSideMat);
+            grassMultiMat.subMaterials.push(grassSideMat);
+            grassMultiMat.subMaterials.push(grassMat);     // top (индекс 4)
+            grassMultiMat.subMaterials.push(grassBottomMat); // bottom (индекс 5)
+            materials['grass'] = grassMultiMat;
+            // Земля
             const dirtMat = new BABYLON.StandardMaterial("dirtMat", scene);
+            dirtMat.diffuseTexture = new BABYLON.Texture(textureUrls.dirt, scene);
+            materials['dirt'] = dirtMat;
+            // Камень
             const stoneMat = new BABYLON.StandardMaterial("stoneMat", scene);
+            stoneMat.diffuseTexture = new BABYLON.Texture(textureUrls.stone, scene);
+            materials['stone'] = stoneMat;
+             // Дерево
+            const woodMat = new BABYLON.StandardMaterial("woodMat", scene);
+            woodMat.diffuseTexture = new BABYLON.Texture(textureUrls.wood, scene);
+            materials['wood'] = woodMat;
+            // --- Функция создания блока ---
+            const createBlock = (type, x, y, z) => {
+                const block = BABYLON.MeshBuilder.CreateBox(`block_${type}_${x}_${y}_${z}`, {size: 1}, scene);
+                block.position = new BABYLON.Vector3(x + 0.5, y + 0.5, z + 0.5); // Центрируем блок в координате
+                block.checkCollisions = true; // Включаем столкновения для блока
+                block.isPickable = true; // Разрешаем "подбирать" лучом
+                if (type === 'grass' && materials['grass'] instanceof BABYLON.MultiMaterial) {
+                    block.material = materials['grass'];
+                    // Указываем, какой subMaterial использовать для каждой грани
+                    block.subMeshes = [];
+                    // Индексы вершин куба стандартные
+                    // Каждая грань - 2 треугольника = 6 вершин
+                    const verticesCount = 36;
+                    // 4 боковые грани (0-3), 1 верхняя (4), 1 нижняя (5)
+                    block.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 6, block)); // right
+                    block.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 6, 6, block)); // left
+                    block.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 12, 6, block)); // front
+                    block.subMeshes.push(new BABYLON.SubMesh(3, 0, verticesCount, 18, 6, block)); // back
+                    block.subMeshes.push(new BABYLON.SubMesh(4, 0, verticesCount, 24, 6, block)); // top
+                    block.subMeshes.push(new BABYLON.SubMesh(5, 0, verticesCount, 30, 6, block)); // bottom
+                } else if (materials[type]) {
+                    block.material = materials[type];
+                } else {
+                     console.warn(`Material for type "${type}" not found!`);
+                     // Можно назначить материал по умолчанию
+                     block.material = materials['dirt'];
+                }
+                 // Оптимизация для статичных блоков (можно раскомментировать, если мир не меняется часто)
+                // block.freezeWorldMatrix();
+                return block;
+            };
+            // --- Создание простого мира ---
+            const worldSize = 10; // Размер мира (10x10 блоков)
+            const worldHeight = 3; // Высота слоя земли/травы
+            for (let x = 0; x < worldSize; x++) {
+                for (let z = 0; z < worldSize; z++) {
+                     createBlock('stone', x, 0, z); // Слой камня внизу
+                     createBlock('dirt', x, 1, z); // Слой земли
+                     createBlock('grass', x, 2, z); // Слой травы сверху
+                }
+            }
+             // Добавим пару блоков для теста установки/удаления
+            createBlock('wood', 5, 3, 5);
+            createBlock('stone', 6, 3, 5);
+            // --- Механика установки / удаления блоков ---
+            let lastActionTime = 0;
+            const actionCooldown = 200; // Задержка между действиями в мс
+            const performAction = (isPlace) => {
+                 const currentTime = Date.now();
+                 if (currentTime - lastActionTime < actionCooldown) {
+                     return; // Игнорировать действие, если еще кулдаун
                  }
+                 lastActionTime = currentTime;
+                const ray = camera.getForwardRay(5); // Луч вперед на 5 единиц
+                const pickInfo = scene.pickWithRay(ray, (mesh) => mesh.name.startsWith("block_"));
+                if (pickInfo.hit && pickInfo.pickedMesh) {
+                    const pickedBlock = pickInfo.pickedMesh;
+                    if (isPlace) {
+                         // --- Установка блока ---
+                        const normal = pickInfo.getNormal(true); // Нормаль к грани, куда попал луч
+                        if (!normal) return;
+                        // Вычисляем позицию для нового блока, прилегающую к грани старого
+                        // Смещаем на половину размера блока вдоль нормали и округляем до сетки
+                        const placePos = pickedBlock.position.add(normal.scale(0.5));
+                        const targetX = Math.floor(placePos.x);
+                        const targetY = Math.floor(placePos.y);
+                        const targetZ = Math.floor(placePos.z);
+                        // Проверка, не ставим ли блок внутрь игрока
+                         const playerFeetY = Math.floor(camera.position.y - camera.ellipsoid.y); // Y "ног" игрока
+                         const playerHeadY = Math.floor(camera.position.y + camera.ellipsoid.y*0.5); // Y "головы" игрока
+                         const playerX = Math.floor(camera.position.x);
+                         const playerZ = Math.floor(camera.position.z);
+                         if (targetX === playerX && targetZ === playerZ && (targetY === playerFeetY || targetY === playerHeadY)) {
+                              console.log("Cannot place block inside player");
+                             return; // Нельзя ставить блок туда, где стоит игрок
+                         }
+                        // Проверяем, нет ли уже блока в этом месте
+                        const existingBlock = scene.getMeshByName(`block_${currentBlockType}_${targetX}_${targetY}_${targetZ}`); // Проверяем по полному имени (может быть неточно)
+                        // Более надежная проверка - перебрать все меши или использовать пространственный хэш (сложнее)
+                         let occupied = false;
+                         scene.meshes.forEach(mesh => {
+                             if (mesh.name.startsWith("block_") &&
+                                 Math.abs(mesh.position.x - (targetX + 0.5)) < 0.1 &&
+                                 Math.abs(mesh.position.y - (targetY + 0.5)) < 0.1 &&
+                                 Math.abs(mesh.position.z - (targetZ + 0.5)) < 0.1) {
+                                 occupied = true;
+                             }
+                         });
+                        if (!occupied) {
+                             createBlock(currentBlockType, targetX, targetY, targetZ);
+                        } else {
+                             console.log("Position occupied");
+                        }
+                    } else {
+                        // --- Удаление блока ---
+                         // Не даем сломать самый нижний слой камня (условное "дно мира")
+                         if (pickedBlock.position.y > 0.51) { // Сравниваем с центром блока (0 + 0.5)
+                             pickedBlock.dispose();
+                         } else {
+                            console.log("Cannot break bedrock layer");
+                         }
+                    }
                 }
+            };
+             // Обработчики для мыши (десктоп)
+            scene.onPointerDown = (evt) => {
+                // evt.button: 0 = левая, 1 = средняя, 2 = правая
+                if (evt.button === 0) { // Левая кнопка - ломать
+                    performAction(false);
+                } else if (evt.button === 2) { // Правая кнопка - ставить
+                    performAction(true);
                 }
+                // Захват указателя для удобного вращения камерой
+                 if (!engine.isPointerLock) {
+                    // engine.enterPointerlock(); // Не всегда хорошо работает на мобильных, осторожно
                  }
+            };
+             // Выход из захвата указателя по Esc
+            // document.addEventListener("pointerlockchange", () => {
+            //     if (document.pointerLockElement !== canvas) {
+            //         // Пользователь вышел из режима захвата
+            //     }
+            // }, false);
+            return scene;
+        }; // --- Конец createScene ---
+        // --- Создание и запуск сцены ---
+        const scene = createScene();
+        // --- Настройка мобильных контролов ---
+        const joystickArea = document.getElementById('joystickArea');
+        const joystick = document.getElementById('joystick');
+        const jumpButton = document.getElementById('jumpButton');
+        const breakButton = document.getElementById('breakButton');
+        const placeButton = document.getElementById('placeButton');
+        const blockSelectorDiv = document.getElementById('blockSelector');
+        let joystickActive = false;
+        let joystickStartX = 0;
+        let joystickStartY = 0;
+        const joystickMaxDist = joystickArea.offsetWidth / 2 - joystick.offsetWidth / 2; // Макс смещение ручки
+        // --- Функции для мобильного управления ---
+        const handleJoystickStart = (x, y) => {
+            joystickActive = true;
+            const rect = joystickArea.getBoundingClientRect();
+            joystickStartX = rect.left + rect.width / 2;
+            joystickStartY = rect.top + rect.height / 2;
+            joystick.style.transition = 'none'; // Убрать плавность при перетаскивании
+        };
+        const handleJoystickMove = (x, y) => {
+            if (!joystickActive) return;
+            let deltaX = x - joystickStartX;
+            let deltaY = y - joystickStartY;
+            let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+            // Ограничиваем максимальное смещение
+            if (distance > joystickMaxDist) {
+                deltaX = (deltaX / distance) * joystickMaxDist;
+                deltaY = (deltaY / distance) * joystickMaxDist;
+                distance = joystickMaxDist;
+            }
+            // Обновляем позицию ручки джойстика
+            joystick.style.left = `calc(50% + ${deltaX}px)`;
+            joystick.style.top = `calc(50% + ${deltaY}px)`;
+            // Преобразуем смещение в векторы движения (нормализованные)
+            moveRight = deltaX / joystickMaxDist;
+            moveForward = -deltaY / joystickMaxDist; // Y инвертирован (вверх = вперед)
+        };
+        const handleJoystickEnd = () => {
+            if (!joystickActive) return;
+            joystickActive = false;
+            moveForward = 0;
+            moveRight = 0;
+            // Возвращаем ручку в центр плавно
+            joystick.style.transition = 'left 0.1s ease-out, top 0.1s ease-out';
+            joystick.style.left = '50%';
+            joystick.style.top = '50%';
+        };
+        // --- Навешивание событий для тачскрина и мыши (через Pointer Events) ---
+        joystickArea.addEventListener('pointerdown', (e) => {
+            e.preventDefault(); // Предотвратить скролл страницы
+             e.target.setPointerCapture(e.pointerId); // Захватить указатель для этого элемента
+            handleJoystickStart(e.clientX, e.clientY);
+        });
+        joystickArea.addEventListener('pointermove', (e) => {
+             e.preventDefault();
+            handleJoystickMove(e.clientX, e.clientY);
+        });
+        // События на окончание касания/клика
+        joystickArea.addEventListener('pointerup', handleJoystickEnd);
+        joystickArea.addEventListener('pointercancel', handleJoystickEnd); // Если палец ушел с экрана
+        joystickArea.addEventListener('pointerleave', handleJoystickEnd); // Если указатель мыши ушел с элемента
+        // Кнопки действий
+        jumpButton.addEventListener('pointerdown', () => wantsToJump = true);
+        // При отпускании кнопки прыжка можно сбросить флаг, но для одиночного прыжка это не нужно
+        // jumpButton.addEventListener('pointerup', () => wantsToJump = false);
+        breakButton.addEventListener('pointerdown', () => scene.onPointerDown({ button: 0 })); // Симулируем левый клик
+        placeButton.addEventListener('pointerdown', () => scene.onPointerDown({ button: 2 })); // Симулируем правый клик
+        // --- Выбор блока ---
+        const availableBlocks = ['grass', 'dirt', 'stone', 'wood'];
+        availableBlocks.forEach(type => {
+            const option = document.createElement('div');
+            option.classList.add('block-option');
+            option.dataset.type = type;
+            // Устанавливаем фон из текстуры (упрощенно, берем первую попавшуюся)
+            let textureUrl = textureUrls[type] || textureUrls.grassTop || textureUrls.dirt; // Найти подходящую
+            option.style.backgroundImage = `url(${textureUrl})`;
+            if (type === currentBlockType) {
+                option.classList.add('selected');
+            }
+            option.addEventListener('click', () => {
+                currentBlockType = type;
+                // Обновляем выделение
+                document.querySelectorAll('.block-option').forEach(el => el.classList.remove('selected'));
+                option.classList.add('selected');
+                console.log("Selected block:", currentBlockType);
+            });
+            blockSelectorDiv.appendChild(option);
+        });
+        // --- Основной цикл рендеринга ---
+        let playerGrounded = false; // Флаг, стоит ли игрок на земле
+        const groundCheckDist = 0.1; // Дистанция для проверки земли под ногами
+        engine.runRenderLoop(() => {
+            const camera = scene.activeCamera;
+            if (!camera) return;
+            const deltaTime = engine.getDeltaTime() / 1000.0; // Время кадра в секундах
+            // --- Проверка, стоит ли игрок на земле ---
+            const rayStart = camera.position.clone();
+            rayStart.y -= camera.ellipsoid.y; // Начало луча у "ног"
+             const rayDir = new BABYLON.Vector3(0, -1, 0);
+             const groundRay = new BABYLON.Ray(rayStart, rayDir, camera.ellipsoid.y + groundCheckDist);
+            const groundPickInfo = scene.pickWithRay(groundRay, (mesh) => mesh.checkCollisions);
+             playerGrounded = groundPickInfo.hit;
+            // --- Прыжок ---
+            if (wantsToJump && playerGrounded) {
+                 // Простой вариант: напрямую изменить Y-скорость (если бы была физика)
+                 // Или просто подкинуть вверх (может пройти сквозь потолок без физики)
+                 // camera.cameraDirection.y = 0.2; // Не работает с UniversalCamera напрямую
+                 // Используем импульс, если есть физический движок, или просто меняем позицию
+                  camera.position.y += 1.5; // Резкий подъем (величина прыжка)
+                 wantsToJump = false; // Сбрасываем флаг после прыжка
+            }
+            // Сбрасываем флаг, если кнопка отпущена или игрок уже не на земле
+             // (это нужно, если кнопка удерживается, для одиночного нажатия сброс выше)
+            // if (!wantsToJump || !playerGrounded) { wantsToJump = false }
+            // --- Перемещение с помощью джойстика/клавиатуры ---
+            const effectiveSpeed = camera.speed * deltaTime * 60; // Нормализуем скорость к 60 FPS
+            // Получаем векторы направления камеры (независимо от ее наклона вверх/вниз)
             const forward = new BABYLON.Vector3(
                 Math.sin(camera.rotation.y),
                 0,
                 Math.cos(camera.rotation.y)
+             ).normalize();
             const right = new BABYLON.Vector3(
                 Math.sin(camera.rotation.y + Math.PI / 2),
                 0,
                 Math.cos(camera.rotation.y + Math.PI / 2)
+            ).normalize();
+            // Вычисляем вектор движения на основе ввода (джойстик или WASD)
+            // Клавиатурный ввод обрабатывается UniversalCamera по умолчанию,
+            // но мы можем его переопределить или дополнить джойстиком.
+            let moveDirection = BABYLON.Vector3.Zero();
+            // Используем ввод с джойстика, если он активен
+             if (Math.abs(moveForward) > 0.1 || Math.abs(moveRight) > 0.1) {
+                 moveDirection = forward.scale(moveForward).add(right.scale(moveRight));
+             } else {
+                 // Если джойстик неактивен, проверяем стандартный ввод камеры (WASD)
+                 // Это немного хак, зависит от внутренней реализации камеры
+                 const keyboardInput = camera.inputs.attached.keyboard; // Получаем доступ к клавиатурному вводу
+                 if (keyboardInput) {
+                     const x = keyboardInput.keysLeft.indexOf(keyboardInput.keysLeft[0]) !== -1 ? -1 : keyboardInput.keysRight.indexOf(keyboardInput.keysRight[0]) !== -1 ? 1 : 0;
+                     const z = keyboardInput.keysUp.indexOf(keyboardInput.keysUp[0]) !== -1 ? 1 : keyboardInput.keysDown.indexOf(keyboardInput.keysDown[0]) !== -1 ? -1 : 0;
+                     if (x !== 0 || z !== 0) {
+                        moveDirection = forward.scale(z).add(right.scale(x));
+                     }
                  }
              }
+             // Нормализуем и применяем скорость
             if (moveDirection.lengthSquared() > 0) {
+                moveDirection.normalize().scaleInPlace(effectiveSpeed);
+                 // Двигаем камеру с учетом столкновений
+                 camera.moveWithCollisions(moveDirection);
             }
+             // Небольшая коррекция, чтобы игрок не "тонул" в земле при столкновениях
+            if (playerGrounded && camera.position.y < (groundPickInfo.pickedPoint.y + camera.ellipsoid.y)) {
+                //camera.position.y = groundPickInfo.pickedPoint.y + camera.ellipsoid.y;
+            }
+            scene.render();
+        });
+        // --- Обработка изменения размера окна ---
+        window.addEventListener('resize', () => {
+            engine.resize();
+            // Пересчитать joystickMaxDist при рес��йзе
+             // joystickMaxDist = joystickArea.offsetWidth / 2 - joystick.offsetWidth / 2;
         });
     </script>