проверь и переработай интерфес и логику с механикой  вот код ,если есть болие подходящие библиотеки используй их <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minecraft 3D - Полная Система Управления и Столкновений</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #inventory {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            z-index: 1;
            font-family: Arial, sans-serif;
        }
        #inventory span {
            display: inline-block;
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 3px;
            user-select: none;
        }
        #inventory .selected {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="inventory">
        <span data-type="stone" class="selected">Камень</span>
        <span data-type="dirt">Грунт</span>
        <span data-type="water">Вода</span>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>

    <script>
        // --- Инициализация Сцены, Камеры и Рендерера ---
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87ceeb); // Цвет неба

        const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // --- Освещение ---
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(10, 20, 10);
        scene.add(directionalLight);

        const ambientLight = new THREE.AmbientLight(0x404040); // Мягкий свет
        scene.add(ambientLight);

        // --- Параметры Мира ---
        const cubeSize = 5;
        const chunkSize = 10;
        const worldDepth = 10;
        const gravity = -30; // Ускорение свободного падения (единиц/с^2)
        const maxVelocityY = 50; // Максимальная скорость по Y
        const moveAcceleration = 2; // Ускорение при движении (единиц/с^2)
        const moveDeceleration = 40; // Замедление при прекращении движения (единиц/с^2)
        const jumpVelocity = 15; // Начальная скорость прыжка (единиц/с)

        // --- Загрузка Текстур ---
        const textureLoader = new THREE.TextureLoader();
        const materials = {
            stone: new THREE.MeshLambertMaterial({ map: textureLoader.load('https://i.imgur.com/8Iu7Z3N.png') }),
            dirt: new THREE.MeshLambertMaterial({ map: textureLoader.load('https://i.imgur.com/7kOu1Iw.png') }),
            water: new THREE.MeshPhongMaterial({ color: 0x1E90FF, transparent: true, opacity: 0.6 })
        };

        // --- Проверка допустимых типов блоков ---
        const validBlockTypes = ['stone', 'dirt', 'water'];

        // --- Хранение Блоков и Чанков ---
        const blocks = [];
        const raycaster = new THREE.Raycaster();
        const blockBoundingBoxes = [];
        const generatedChunks = new Set();

        // --- Функция Создания Блока ---
        function createBlock(type, x, y, z) {
            if (!validBlockTypes.includes(type)) {
                console.warn(`Недопустимый тип блока: "${type}".`);
                return;
            }

            const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            const block = new THREE.Mesh(geometry, materials[type]);
            block.position.set(
                x * cubeSize,
                y * cubeSize,
                z * cubeSize
            );
            block.userData.type = type;
            scene.add(block);
            blocks.push(block);
            
            // Добавление BoundingBox для блока
            const bbox = new THREE.Box3().setFromObject(block);
            blockBoundingBoxes.push(bbox);
        }

        // --- Функция Генерации Чанка ---
        function generateChunk(chunkX, chunkZ) {
            const chunkKey = `${chunkX}_${chunkZ}`;
            if (generatedChunks.has(chunkKey)) return;

            generatedChunks.add(chunkKey);
            for (let x = 0; x < chunkSize; x++) {
                for (let z = 0; z < chunkSize; z++) {
                    // Генерация высоты с использованием случайного значений
                    const height = Math.floor(Math.random() * worldDepth) + 1;
                    for (let y = 0; y < height; y++) {
                        let type;
                        if (y === height - 1) {
                            type = 'dirt'; // Верхний блок
                        } else {
                            const rand = Math.random();
                            type = (rand > 0.9 && y < height - 2) ? 'water' : 'stone';
                        }
                        createBlock(type, chunkX * chunkSize + x, y, chunkZ * chunkSize + z);
                    }
                }
            }
        }

        // --- Генерация Начальных Чанков ---
        const initialChunkRange = 2;
        for (let x = -initialChunkRange; x <= initialChunkRange; x++) {
            for (let z = -initialChunkRange; z <= initialChunkRange; z++) {
                generateChunk(x, z);
            }
        }

        // --- Игрок ---
        const player = new THREE.Object3D();
        player.velocity = new THREE.Vector3(0, 0, 0); // Скорости по осям
        player.onGround = false; // На земле ли игрок

        // --- Настройка Камеры и Управления ---
        const controls = new THREE.PointerLockControls(camera, document.body);
        document.body.addEventListener('click', () => controls.lock());

        // Добавление камеры к объекту игрока
        player.add(controls.getObject());
        scene.add(player);

        // Установка начальной позиции игрока
        player.position.set(0, worldDepth * cubeSize + 2, 0);

        // --- Обработка Клавиш ---
        const keysPressed = {};
        document.addEventListener('keydown', (event) => {
            const key = event.key.toLowerCase();
            if (['w', 'a', 's', 'd', 'arrowup', 'arrowleft', 'arrowdown', 'arrowright', ' '].includes(key)) {
                event.preventDefault(); // Предотвращение прокрутки страницы при использовании стрелок
            }
            keysPressed[key] = true;
        });
        document.addEventListener('keyup', (event) => {
            const key = event.key.toLowerCase();
            keysPressed[key] = false;
        });

        // --- Инвентарь ---
        let selectedBlockType = 'stone';
        const inventoryItems = document.querySelectorAll('#inventory span');
        inventoryItems.forEach(item => {
            item.addEventListener('click', () => {
                inventoryItems.forEach(i => i.classList.remove('selected'));
                item.classList.add('selected');
                selectedBlockType = item.getAttribute('data-type');
            });
        });

        // --- Функция Разрушения Блока ---
        function breakBlock() {
            raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
            const intersects = raycaster.intersectObjects(blocks);
            if (intersects.length > 0) {
                const intersect = intersects[0];
                if (intersect.distance < cubeSize * 3) {
                    const block = intersect.object;
                    scene.remove(block);
                    const index = blocks.indexOf(block);
                    if (index > -1) {
                        blocks.splice(index, 1);
                        blockBoundingBoxes.splice(index, 1);
                    }
                }
            }
        }

        // --- Функция Размещения Блока ---
        function placeBlock() {
            raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
            const intersects = raycaster.intersectObjects(blocks);
            if (intersects.length > 0) {
                const intersect = intersects[0];
                const normal = intersect.face.normal.clone();
                const position = intersect.point.clone().add(normal.clone().multiplyScalar(cubeSize / 2));

                // Округление координат до целых чисел для правильного размещения
                const x = Math.round(position.x / cubeSize);
                const y = Math.round(position.y / cubeSize);
                const z = Math.round(position.z / cubeSize);

                // Проверка, есть ли уже блок на этой позиции
                const exists = blocks.some(block => 
                    Math.round(block.position.x / cubeSize) === x &&
                    Math.round(block.position.y / cubeSize) === y &&
                    Math.round(block.position.z / cubeSize) === z
                );

                if (!exists && validBlockTypes.includes(selectedBlockType)) {
                    createBlock(selectedBlockType, x, y, z);
                }
            }
        }

        // --- Функция Обработки Движения Игрока ---
        function handleMovement(delta) {
            // --- Определение Направлений Движения ---
            const direction = new THREE.Vector3();
            controls.getDirection(direction); // Получение направления, куда смотрит камера
            direction.y = 0; // Игнорирование вертикальной составляющей
            direction.normalize();

            const right = new THREE.Vector3();
            right.crossVectors(direction, camera.up).normalize();

            let move = new THREE.Vector3();

            if (keysPressed['w'] || keysPressed['arrowup']) {
                move.add(direction);
            }
            if (keysPressed['s'] || keysPressed['arrowdown']) {
                move.sub(direction);
            }
            if (keysPressed['a'] || keysPressed['arrowleft']) {
                move.sub(right);
            }
            if (keysPressed['d'] || keysPressed['arrowright']) {
                move.add(right);
            }

            move.normalize();

            // --- Обработка Ускорения и Замедления ---
            if (move.length() > 0) {
                // Применение ускорения
                player.velocity.add(move.multiplyScalar(moveAcceleration * delta));
            } else {
                // Применение замедления (торможения)
                player.velocity.x -= player.velocity.x * (moveDeceleration * delta);
                player.velocity.z -= player.velocity.z * (moveDeceleration * delta);
            }

            // --- Ограничение Горизонтальной Скорости ---
            const horizontalSpeed = Math.sqrt(player.velocity.x ** 2 + player.velocity.z ** 2);
            if (horizontalSpeed > moveAcceleration) {
                const scalingFactor = moveAcceleration / horizontalSpeed;
                player.velocity.x *= scalingFactor;
                player.velocity.z *= scalingFactor;
            }

            // --- Прыжок ---
            if ((keysPressed[' '] || keysPressed['space']) && player.onGround) {
                player.velocity.y = jumpVelocity;
                player.onGround = false;
            }

            // --- Применение Гравитации ---
            player.velocity.y += gravity * delta;
            player.velocity.y = THREE.MathUtils.clamp(player.velocity.y, -maxVelocityY, maxVelocityY);

            // --- Предварительное Перемещение ---
            const deltaPosition = player.velocity.clone().multiplyScalar(delta);
            player.position.add(deltaPosition);

            // --- Обновление BoundingBox Игрока ---
            const playerHalfWidth = 1; // Половина ширины куба игрока
            const playerHeight = 2; // Высота игрока
            const playerBoundingBox = new THREE.Box3(
                new THREE.Vector3(
                    player.position.x - playerHalfWidth,
                    player.position.y - 1,
                    player.position.z - playerHalfWidth
                ),
                new THREE.Vector3(
                    player.position.x + playerHalfWidth,
                    player.position.y + playerHeight - 1,
                    player.position.z + playerHalfWidth
                )
            );

            // --- Проверка Столкновений ---
            for (let i = 0; i < blockBoundingBoxes.length; i++) {
                const blockBox = blockBoundingBoxes[i];
                if (playerBoundingBox.intersectsBox(blockBox)) {
                    const block = blocks[i];
                    const overlap = {
                        x: Math.min(playerBoundingBox.max.x - blockBox.min.x, blockBox.max.x - playerBoundingBox.min.x),
                        y: Math.min(playerBoundingBox.max.y - blockBox.min.y, blockBox.max.y - playerBoundingBox.min.y),
                        z: Math.min(playerBoundingBox.max.z - blockBox.min.z, blockBox.max.z - playerBoundingBox.min.z)
                    };

                    // Находим минимальную глубину пересечения
                    const minOverlap = Math.min(overlap.x, overlap.y, overlap.z);
                    const axis = Object.keys(overlap).reduce((a, b) => overlap[a] < overlap[b] ? a : b);

                    switch (axis) {
                        case 'x':
                            if (player.velocity.x > 0) {
                                player.position.x -= overlap.x;
                            } else if (player.velocity.x < 0) {
                                player.position.x += overlap.x;
                            }
                            player.velocity.x = 0;
                            break;
                        case 'y':
                            if (player.velocity.y > 0) {
                                player.position.y -= overlap.y;
                                player.velocity.y = 0;
                            } else if (player.velocity.y < 0) {
                                player.position.y += overlap.y;
                                player.velocity.y = 0;
                                player.onGround = true;
                            }
                            break;
                        case 'z':
                            if (player.velocity.z > 0) {
                                player.position.z -= overlap.z;
                            } else if (player.velocity.z < 0) {
                                player.position.z += overlap.z;
                            }
                            player.velocity.z = 0;
                            break;
                    }

                    // Обновление BoundingBox после коррекции позиции
                    playerBoundingBox.set(
                        new THREE.Vector3(
                            player.position.x - playerHalfWidth,
                            player.position.y - 1,
                            player.position.z - playerHalfWidth
                        ),
                        new THREE.Vector3(
                            player.position.x + playerHalfWidth,
                            player.position.y + playerHeight - 1,
                            player.position.z + playerHalfWidth
                        )
                    );
                }
            }

            // --- Проверка Наличия Земли Под Персонажем ---
            const downVector = new THREE.Vector3(0, -1, 0);
            raycaster.set(new THREE.Vector3(player.position.x, player.position.y - 1, player.position.z), downVector);
            const intersects = raycaster.intersectObjects(blocks, false);
            if (intersects.length > 0) {
                const distance = intersects[0].distance;
                if (distance < 1.1) { // Допускаем небольшое расстояние для устойчивости
                    player.onGround = true;
                    player.velocity.y = 0;
                } else {
                    player.onGround = false;
                }
            } else {
                player.onGround = false;
            }
        }

        // --- Функция Генерации Новых Чанков вокруг Игрока ---
        function checkForNewChunks() {
            const playerPos = player.position;
            const currentChunkX = Math.floor(playerPos.x / (cubeSize * chunkSize));
            const currentChunkZ = Math.floor(playerPos.z / (cubeSize * chunkSize));

            const chunkRange = 2; // Радиус чанков для генерации

            for (let x = currentChunkX - chunkRange; x <= currentChunkX + chunkRange; x++) {
                for (let z = currentChunkZ - chunkRange; z <= currentChunkZ + chunkRange; z++) {
                    generateChunk(x, z);
                }
            }
        }

        // --- Обработка Событий Мыши ---
        document.addEventListener('mousedown', (event) => {
            if (event.button === 0) { // Левая кнопка мыши - разрушение
                breakBlock();
            }
            if (event.button === 2) { // Правая кнопка мыши - размещение
                placeBlock();
            }
        });

        // Предотвращение контекстного меню при правом клике
        document.addEventListener('contextmenu', (event) => event.preventDefault());

        // --- Анимация Сцены ---
        const clock = new THREE.Clock();

        function animate() {
            requestAnimationFrame(animate);
            const delta = clock.getDelta();
            handleMovement(delta);
            checkForNewChunks();
            renderer.render(scene, camera);
        }

        animate();

        // --- Обработка Изменения Размеров Окна ---
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>