Update app.py

app.py

@@ -8,69 +8,57 @@ from flask import Flask, render_template_string, request, jsonify
 from huggingface_hub import HfApi, hf_hub_download
 from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
 from dotenv import load_dotenv
-import requests
 
 load_dotenv()
 
 app = Flask(__name__)
-app.secret_key = 'level_designer_secret_key_12345'
+app.secret_key = 'level_designer_secret_key_zomboid_5678'
 
 REPO_ID = "Kgshop/Testai"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-DOWNLOAD_RETRIES = 3
-DOWNLOAD_DELAY = 5
-
 def upload_project_to_hf(local_path, project_name):
     if not HF_TOKEN_WRITE:
-        print("HF_TOKEN_WRITE is not set. Cannot upload.")
         return False
     try:
         api = HfApi()
         api.upload_file(
             path_or_fileobj=local_path,
-            path_in_repo=f"projects/{project_name}.json",
+            path_in_repo=f"pz_projects/{project_name}.json",
             repo_id=REPO_ID,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
-            commit_message=f"Save project {project_name} at {datetime.now()}"
+            commit_message=f"Save PZ project {project_name} at {datetime.now()}"
         )
         return True
     except Exception as e:
         print(f"Error uploading {project_name} to HF: {e}")
         return False
 
-def download_project_from_hf(project_name, retries=DOWNLOAD_RETRIES, delay=DOWNLOAD_DELAY):
+def download_project_from_hf(project_name):
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
     if not token_to_use:
-        print("No Hugging Face token found for reading.")
         return None
-
-    for attempt in range(retries + 1):
-        try:
-            local_path = hf_hub_download(
-                repo_id=REPO_ID,
-                filename=f"projects/{project_name}.json",
-                repo_type="dataset",
-                token=token_to_use,
-                local_dir=".",
-                local_dir_use_symlinks=False,
-                force_download=True
-            )
-            with open(local_path, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-            if os.path.exists(local_path):
-                 os.remove(local_path)
-            return data
-        except (HfHubHTTPError, RepositoryNotFoundError) as e:
-            print(f"Project '{project_name}' not found on HF Hub on attempt {attempt + 1}: {e}")
-            return None
-        except Exception as e:
-            print(f"An unexpected error occurred during download attempt {attempt + 1}: {e}")
-            if attempt < retries:
-                time.sleep(delay)
-    return None
+    try:
+        local_path = hf_hub_download(
+            repo_id=REPO_ID,
+            filename=f"pz_projects/{project_name}.json",
+            repo_type="dataset",
+            token=token_to_use,
+            local_dir=".",
+            local_dir_use_symlinks=False,
+            force_download=True
+        )
+        with open(local_path, 'r', encoding='utf-8') as f:
+            data = json.load(f)
+        if os.path.exists(local_path):
+            os.remove(local_path)
+        return data
+    except (HfHubHTTPError, RepositoryNotFoundError) as e:
+        return None
+    except Exception as e:
+        return None
 
 def list_projects_from_hf():
     token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
@@ -79,14 +67,9 @@ def list_projects_from_hf():
     try:
         api = HfApi()
         repo_info = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=token_to_use)
-        
-        project_files = [f.split('/')[-1].replace('.json', '') for f in repo_info if f.startswith('projects/') and f.endswith('.json')]
+        project_files = [f.split('/')[-1].replace('.json', '') for f in repo_info if f.startswith('pz_projects/') and f.endswith('.json')]
         return sorted(project_files)
-    except RepositoryNotFoundError:
-        print("Repository not found, creating 'projects' directory might be needed on first save.")
-        return []
-    except Exception as e:
-        print(f"Error listing projects from HF: {e}")
+    except Exception:
         return []
 
 EDITOR_TEMPLATE = '''
@@ -95,16 +78,17 @@ EDITOR_TEMPLATE = '''
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Isometric Level Designer</title>
+    <title>PZ Style Constructor</title>
     <style>
-        body { margin: 0; overflow: hidden; background-color: #000; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+        body { margin: 0; overflow: hidden; background-color: #1a1a1a; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
         canvas { display: block; }
-        #ui-container { position: absolute; top: 0; left: 0; height: 100%; z-index: 10; pointer-events: none;}
+        #ui-container { position: absolute; top: 0; left: 0; height: 100%; z-index: 10; pointer-events: none; display: flex; }
         #ui-panel {
-            background: rgba(0, 0, 0, 0.75);
+            background: rgba(10, 10, 10, 0.85);
+            backdrop-filter: blur(5px);
             padding: 15px;
             border-right: 1px solid #444;
-            width: 300px;
+            width: 320px;
             height: 100%;
             overflow-y: auto;
             box-sizing: border-box;
@@ -112,75 +96,46 @@ EDITOR_TEMPLATE = '''
             transform: translateX(0);
             pointer-events: auto;
         }
-        .ui-group { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; }
+        .ui-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #333; }
         .ui-group:last-child { border-bottom: none; }
-        h3 { margin-top: 0; font-size: 1.1em; color: #00aaff; }
+        h3 { margin-top: 0; font-size: 1.2em; color: #00aaff; border-bottom: 1px solid #00aaff; padding-bottom: 5px; margin-bottom: 10px; }
         label { display: block; margin-bottom: 5px; font-size: 0.9em; }
-        input[type="number"], input[type="text"], select, input[type="file"] {
+        input[type="text"], select {
             width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555; color: white; border-radius: 4px; margin-bottom: 5px;
         }
         button {
-            width: 100%; padding: 10px; background: #0077cc; border: none; color: white; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px;
+            width: 100%; padding: 10px; background: #0077cc; border: none; color: white; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px; transition: background-color 0.2s;
         }
         button:hover { background: #0099ff; }
         button.play-button { background: #22aa22; }
         button.play-button:hover { background: #33cc33; }
-        .slider-container { margin-top: 10px; }
-        input[type="range"] { width: 100%; }
-        .radio-group label { display: inline-block; margin-right: 10px; cursor: pointer; }
-        .radio-group input { margin-right: 5px; }
-
+        button.danger-button { background: #c00; }
+        button.danger-button:hover { background: #e00; }
+        #tool-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
+        .tool-item {
+            padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; text-align: center; cursor: pointer;
+            transition: all 0.2s; font-size: 0.9em;
+        }
+        .tool-item:hover { background: #3a3a3a; border-color: #666; }
+        .tool-item.active { background: #0077cc; border-color: #00aaff; }
         #loading-spinner {
             position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
             border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%;
             width: 60px; height: 60px; animation: spin 1s linear infinite; display: none; z-index: 100;
         }
-        #blocker {
-			position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none;
-		}
-		#instructions {
-			width: 100%; height: 100%;
-			display: flex; flex-direction: column; justify-content: center; align-items: center;
-			text-align: center; font-size: 14px; cursor: pointer; color: white;
-		}
+        #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; }
+        #instructions { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 14px; cursor: pointer; color: white; }
         #burger-menu {
-            position: absolute; top: 15px; left: 15px; z-index: 20;
-            display: none; width: 30px; height: 22px; cursor: pointer; pointer-events: auto;
+            position: absolute; top: 15px; left: 15px; z-index: 20; display: none; width: 30px; height: 22px; cursor: pointer; pointer-events: auto;
         }
-        #burger-menu span {
-            display: block; position: absolute; height: 4px; width: 100%;
-            background: white; border-radius: 2px; opacity: 1; left: 0;
-            transition: .25s ease-in-out;
-        }
-        #burger-menu span:nth-child(1) { top: 0px; }
-        #burger-menu span:nth-child(2) { top: 9px; }
-        #burger-menu span:nth-child(3) { top: 18px; }
-
+        #burger-menu span { display: block; position: absolute; height: 4px; width: 100%; background: white; border-radius: 2px; opacity: 1; left: 0; transition: .25s ease-in-out; }
+        #burger-menu span:nth-child(1) { top: 0px; } #burger-menu span:nth-child(2) { top: 9px; } #burger-menu span:nth-child(3) { top: 18px; }
         #joystick-container {
-            position: absolute;
-            bottom: 30px;
-            left: 30px;
-            width: 120px;
-            height: 120px;
-            background: rgba(128, 128, 128, 0.3);
-            border-radius: 50%;
-            display: none;
-            z-index: 100;
-            pointer-events: auto;
-            user-select: none;
-        }
-        #joystick-handle {
-            position: absolute;
-            top: 30px;
-            left: 30px;
-            width: 60px;
-            height: 60px;
-            background: rgba(255, 255, 255, 0.5);
-            border-radius: 50%;
+            position: absolute; bottom: 30px; left: 30px; width: 120px; height: 120px; background: rgba(128, 128, 128, 0.3); border-radius: 50%;
+            display: none; z-index: 100; pointer-events: auto; user-select: none;
         }
-
+        #joystick-handle { position: absolute; top: 30px; left: 30px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
         @media (max-width: 800px) {
             #ui-panel { transform: translateX(-100%); padding-top: 60px; }
             #ui-panel.open { transform: translateX(0); }
@@ -192,1111 +147,431 @@ EDITOR_TEMPLATE = '''
 </head>
 <body>
     <div id="ui-container">
-        <div id="burger-menu">
-            <span></span><span></span><span></span>
-        </div>
+        <div id="burger-menu"><span></span><span></span><span></span></div>
         <div id="ui-panel">
-             <div class="ui-group">
-                <h3>Режим</h3>
-                <button id="play-mode-toggle" class="play-button" title="Переключиться в режим игры">Играть</button>
-            </div>
             <div class="ui-group">
                 <h3>Проект</h3>
-                <label for="project-list" title="Выбрать существующий проект для загрузки">Загрузить проект:</label>
                 <select id="project-list">
                     <option value="">Выберите проект...</option>
                     {% for project in projects %}
                     <option value="{{ project }}">{{ project }}</option>
                     {% endfor %}
                 </select>
-                <button id="load-project" title="Загрузить выбранный проект">Загрузить</button>
+                <button id="load-project">Загрузить</button>
                 <hr style="border-color: #333; margin: 15px 0;">
-                <label for="project-name" title="Введите имя для нового или существующего проекта">Имя проекта:</label>
                 <input type="text" id="project-name" placeholder="new-level-01">
-                <button id="save-project" title="Сохранить текущий проект на сервере">Сохранить</button>
-            </div>
-            <div class="ui-group">
-                <h3>Кисть</h3>
-                <div class="radio-group">
-                    <label title="Поднять ландшафт"><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
-                    <label title="Опустить ландшафт"><input type="radio" name="brush-mode" value="lower"> Опустить</label>
-                    <label title="Добавить шум"><input type="radio" name="brush-mode" value="roughen"> Шум</label>
-                    <label title="Сгладить ландшафт"><input type="radio" name="brush-mode" value="smooth"> Сгладить</label>
-                    <label title="Выровнять до определенной высоты"><input type="radio" name="brush-mode" value="flatten"> Выровнять</label>
-                    <label title="Рисовать текстуру"><input type="radio" name="brush-mode" value="paint"> Текстура</label>
-                    <label title="Разместить объект"><input type="radio" name="brush-mode" value="place"> Объект</label>
-                </div>
-                <div class="slider-container">
-                    <label for="brush-size" title="Радиус кисти">Размер: <span id="brush-size-value">10</span></label>
-                    <input type="range" id="brush-size" min="1" max="50" value="10">
-                </div>
-                <div class="slider-container">
-                    <label for="brush-strength" title="Интенсивность кисти">Сила: <span id="brush-strength-value">0.5</span></label>
-                    <input type="range" id="brush-strength" min="0.1" max="2" step="0.1" value="0.5">
-                </div>
-            </div>
-             <div class="ui-group" id="texture-management-group">
-                <h3>Управление текстурами</h3>
-                <label for="texture-slot-select">Слот для изменения:</label>
-                <select id="texture-slot-select">
-                    <option value="grass">Трава</option>
-                    <option value="rock">Скалы</option>
-                    <option value="dirt">Грунт</option>
-                    <option value="snow">Снег</option>
-                    <option value="sand">Песок</option>
-                </select>
-                 <label for="texture-slot-name">Новое имя для слота:</label>
-                <input type="text" id="texture-slot-name" placeholder="например, Лава">
-                <button id="rename-texture-slot-btn">Переименовать</button>
-                <hr style="border-color: #333; margin: 15px 0;">
-                <label for="custom-texture-file">Текстура (Diffuse):</label>
-                <input type="file" id="custom-texture-file" accept="image/*" title="Выберите изображение для основной текстуры">
-                <label for="custom-normal-file">Карта нормалей (Normal):</label>
-                <input type="file" id="custom-normal-file" accept="image/*" title="Выберите изображение для карты нормалей">
-                <button id="update-texture-btn">Обновить текстуру</button>
+                <button id="save-project">Сохранить</button>
             </div>
             <div class="ui-group">
-                <h3>Текстуры ландшафта</h3>
-                <div class="radio-group" id="texture-selector">
-                    <label><input type="radio" name="texture-type" value="grass" checked> Трава</label>
-                    <label><input type="radio" name="texture-type" value="rock"> Скалы</label>
-                    <label><input type="radio" name="texture-type" value="dirt"> Грунт</label>
-                    <label><input type="radio" name="texture-type" value="snow"> Снег</label>
-                    <label><input type="radio" name="texture-type" value="sand"> Песок</label>
-                </div>
+                <h3>Режим</h3>
+                <button id="play-mode-toggle" class="play-button">Играть</button>
             </div>
             <div class="ui-group">
-                <h3>Объекты</h3>
-                <div class="radio-group" id="object-selector">
-                    <label><input type="radio" name="object-type" value="grass" checked> Трава</label>
-                    <label><input type="radio" name="object-type" value="tree"> Дерево</label>
-                    <label><input type="radio" name="object-type" value="rock"> Камень</label>
-                </div>
-                <button id="clear-objects" title="Удалить все объекты с ландшафта">Очистить объекты</button>
+                <h3>Инструменты</h3>
+                <div id="tool-selector"></div>
+                <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
+                    ЛКМ: Разместить<br>
+                    ПКМ: Вращать<br>
+                    Shift + ЛКМ: Удалить<br>
+                    Колесо мыши: Вращать
+                </p>
+                <button id="clear-level" class="danger-button">Очистить уровень</button>
             </div>
         </div>
     </div>
-
-    <div id="blocker">
-		<div id="instructions">
-			<p style="font-size:36px">Нажмите, чтобы играть</p>
-			<p>
-				Движение: WASD / Джойстик<br/>
-			</p>
-            <p>Нажмите ESC для выхода</p>
-		</div>
-	</div>
-
+    <div id="blocker"><div id="instructions"><p style="font-size:36px">Нажмите, чтобы играть</p><p>Движение: WASD / Джойстик</p><p>Нажмите ESC для выхода</p></div></div>
     <div id="loading-spinner"></div>
-    <div id="joystick-container">
-        <div id="joystick-handle"></div>
-    </div>
-
+    <div id="joystick-container"><div id="joystick-handle"></div></div>
 
     <script type="importmap">
-    {
-        "imports": {
-            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
-            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/",
-            "simplex-noise": "https://unpkg.com/simplex-noise@4.0.1/dist/esm/simplex-noise.js"
-        }
-    }
+    { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } }
     </script>
-
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { Sky } from 'three/addons/objects/Sky.js';
-        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-        import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
-        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-        import { createNoise2D } from 'simplex-noise';
 
-        let scene, camera, renderer, orbitControls, composer, brushHelper, sky, sun;
-        let raycaster = new THREE.Raycaster();
-        let mouse = new THREE.Vector2();
-        let isEditing = false;
-        const noise2D = createNoise2D();
-        
-        const chunks = {};
-        let terrainMeshes = [];
-        const chunkSize = 64;
-        const chunkSegments = 32;
-        const viewDistance = 3;
-        let loadedTerrainData = {};
-        
-        let grassInstances, treeInstances, rockInstances;
-        let grassMaterial, treeMaterial, rockMaterial;
-        const MAX_INSTANCE_COUNT = 50000;
+        let scene, camera, renderer, orbitControls;
+        let raycaster, mouse, placementPlane, gridHelper, previewMesh;
         
         let isPlayMode = false;
         let player, playerVelocity = new THREE.Vector3();
-        const playerSpeed = 15.0;
+        const playerSpeed = 5.0;
         const keyStates = {};
         const clock = new THREE.Clock();
+        let wallBBoxes = [];
 
-        const textureLoader = new THREE.TextureLoader();
-        let customTextures = {};
-        let customNormalMaps = {};
-        let flattenHeight = null;
-
-        const cameraOffset = new THREE.Vector3(80, 80, 80);
+        let currentTool = { category: 'floors', type: 'grass' };
+        let currentRotation = 0;
+        const gridSize = 1;
+        const levelData = { floors: {}, walls: {}, objects: {} };
 
-        const joystick = {
-            active: false,
-            center: new THREE.Vector2(),
-            current: new THREE.Vector2(),
-            vector: new THREE.Vector2()
-        };
+        const joystick = { active: false, center: new THREE.Vector2(), current: new THREE.Vector2(), vector: new THREE.Vector2() };
 
-        const loadTexture = (url) => {
-            const tex = textureLoader.load(url);
-            tex.wrapS = THREE.RepeatWrapping;
-            tex.wrapT = THREE.RepeatWrapping;
-            tex.anisotropy = 16;
-            return tex;
-        };
-        
-        const textures = {
-            grass: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/grasslight-big.jpg'),
-            rock: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/rock.jpg'),
-            dirt: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/sand-512.jpg'),
-            snow: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/snow.jpg'),
-            sand: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/sand-512.jpg'),
-            grassNormal: loadTexture('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/terrain/grasslight-big-nm.jpg'),
-            rockNormal: loadTexture('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/terrain/rock-nm.jpg'),
-            dirtNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1),
-            snowNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1),
-            sandNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1)
-        };
-        
-        Object.values(textures).forEach(tex => {
-            if (tex.isDataTexture) {
-                tex.needsUpdate = true;
-            } else {
-                tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
-            }
-        });
-
-        const terrainMaterial = new THREE.ShaderMaterial({
-            uniforms: {
-                grassTexture: { value: textures.grass },
-                rockTexture: { value: textures.rock },
-                dirtTexture: { value: textures.dirt },
-                snowTexture: { value: textures.snow },
-                sandTexture: { value: textures.sand },
-                grassNormalMap: { value: textures.grassNormal },
-                rockNormalMap: { value: textures.rockNormal },
-                dirtNormalMap: { value: textures.dirtNormal },
-                snowNormalMap: { value: textures.snowNormal },
-                sandNormalMap: { value: textures.sandNormal },
-                lightDirection: { value: new THREE.Vector3(0.5, 0.5, 0.5).normalize() }
+        const ASSETS = {
+            floors: {
+                grass: { color: 0x55902f, size: [gridSize, 0.1, gridSize] },
+                concrete: { color: 0x888888, size: [gridSize, 0.1, gridSize] },
+                wood: { color: 0x8B4513, size: [gridSize, 0.1, gridSize] },
+                dirt: { color: 0x9b7653, size: [gridSize, 0.1, gridSize] }
             },
-            vertexShader: `
-                varying vec2 vUv;
-                varying vec3 vNormal;
-                varying vec3 vViewPosition;
-                attribute vec4 color;
-                varying vec4 vColor;
-                attribute vec4 tangent;
-                varying vec3 vTangent;
-                varying vec3 vBitangent;
-
-                void main() {
-                    vUv = uv;
-                    vColor = color;
-                    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
-                    vViewPosition = -mvPosition.xyz;
-                    vNormal = normalize(normalMatrix * normal);
-                    vTangent = normalize(normalMatrix * tangent.xyz);
-                    vBitangent = normalize(cross(vNormal, vTangent) * tangent.w);
-                    gl_Position = projectionMatrix * mvPosition;
-                }
-            `,
-            fragmentShader: `
-                uniform sampler2D grassTexture;
-                uniform sampler2D rockTexture;
-                uniform sampler2D dirtTexture;
-                uniform sampler2D snowTexture;
-                uniform sampler2D sandTexture;
-                uniform sampler2D grassNormalMap;
-                uniform sampler2D rockNormalMap;
-                uniform sampler2D dirtNormalMap;
-                uniform sampler2D snowNormalMap;
-                uniform sampler2D sandNormalMap;
-
-                uniform vec3 lightDirection;
-
-                varying vec2 vUv;
-                varying vec4 vColor;
-                varying vec3 vNormal;
-                varying vec3 vViewPosition;
-                varying vec3 vTangent;
-                varying vec3 vBitangent;
-
-                void main() {
-                    vec2 uv_scaled = vUv * 60.0;
-                    
-                    vec4 grass = texture2D(grassTexture, uv_scaled);
-                    vec4 rock = texture2D(rockTexture, uv_scaled);
-                    vec4 dirt = texture2D(dirtTexture, uv_scaled);
-                    vec4 snow = texture2D(snowTexture, uv_scaled);
-                    vec4 sand = texture2D(sandTexture, uv_scaled);
-
-                    vec3 finalColor = grass.rgb;
-                    finalColor = mix(finalColor, rock.rgb, vColor.r);
-                    finalColor = mix(finalColor, dirt.rgb, vColor.g);
-                    finalColor = mix(finalColor, snow.rgb, vColor.b);
-                    finalColor = mix(finalColor, sand.rgb, vColor.a);
-                    
-                    mat3 tbn = mat3(vTangent, vBitangent, vNormal);
-
-                    vec3 grassNormal = texture2D(grassNormalMap, uv_scaled).xyz * 2.0 - 1.0;
-                    vec3 rockNormal = texture2D(rockNormalMap, uv_scaled).xyz * 2.0 - 1.0;
-                    vec3 dirtNormal = texture2D(dirtNormalMap, uv_scaled).xyz * 2.0 - 1.0;
-                    vec3 snowNormal = texture2D(snowNormalMap, uv_scaled).xyz * 2.0 - 1.0;
-                    vec3 sandNormal = texture2D(sandNormalMap, uv_scaled).xyz * 2.0 - 1.0;
-                    
-                    vec3 finalNormal = grassNormal;
-                    finalNormal = mix(finalNormal, rockNormal, vColor.r);
-                    finalNormal = mix(finalNormal, dirtNormal, vColor.g);
-                    finalNormal = mix(finalNormal, snowNormal, vColor.b);
-                    finalNormal = mix(finalNormal, sandNormal, vColor.a);
-                    
-                    vec3 normal = normalize(tbn * finalNormal);
+            walls: {
+                brick: { color: 0xb55a44, size: [gridSize, 2.5, 0.2] },
+                concrete: { color: 0xc2c2c2, size: [gridSize, 2.5, 0.2] }
+            },
+            objects: {
+                crate: { color: 0x966F33, size: [gridSize * 0.8, gridSize * 0.8, gridSize * 0.8] },
+                barrel: { color: 0x595959, size: [gridSize * 0.4, gridSize * 0.8, 0], geometry: 'cylinder' }
+            }
+        };
 
-                    float lighting = dot(normal, lightDirection) * 0.5 + 0.5;
-                    gl_FragColor = vec4(finalColor * lighting, 1.0);
-                }
-            `
-        });
+        const instancedMeshes = {};
 
         function init() {
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x283747);
             
-            const aspect = window.innerWidth / window.innerHeight;
-            const frustumSize = 150;
-            camera = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 2000);
-            camera.position.set(cameraOffset.x, cameraOffset.y, cameraOffset.z);
-            camera.lookAt(0,0,0);
+            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
+            camera.position.set(25, 30, 25);
 
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
-            renderer.toneMapping = THREE.ACESFilmicToneMapping;
-            renderer.outputColorSpace = THREE.SRGBColorSpace;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
 
             orbitControls = new OrbitControls(camera, renderer.domElement);
             orbitControls.enableDamping = true;
-            orbitControls.enableRotate = false;
-            orbitControls.zoomSpeed = 2;
+            orbitControls.maxPolarAngle = Math.PI / 2.2;
+            orbitControls.minDistance = 10;
+            orbitControls.maxDistance = 100;
 
-            const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.5);
+            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0xB97A20, 0.8);
             scene.add(hemiLight);
 
             const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
-            dirLight.position.set(100, 100, 50);
+            dirLight.position.set(-30, 50, -30);
             dirLight.castShadow = true;
-            dirLight.shadow.mapSize.width = 4096;
-            dirLight.shadow.mapSize.height = 4096;
-            dirLight.shadow.camera.top = 250;
-            dirLight.shadow.camera.bottom = -250;
-            dirLight.shadow.camera.left = -250;
-            dirLight.shadow.camera.right = 250;
-            dirLight.shadow.bias = -0.001;
-            dirLight.shadow.normalBias = 0.05;
+            dirLight.shadow.mapSize.width = 2048;
+            dirLight.shadow.mapSize.height = 2048;
+            dirLight.shadow.camera.left = -50;
+            dirLight.shadow.camera.right = 50;
+            dirLight.shadow.camera.top = 50;
+            dirLight.shadow.camera.bottom = -50;
             scene.add(dirLight);
-            terrainMaterial.uniforms.lightDirection.value = dirLight.position.clone().normalize();
 
-            sky = new Sky();
-            sky.scale.setScalar(450000);
-            scene.add(sky);
-            sun = new THREE.Vector3();
-            const effectController = {
-                turbidity: 10,
-                rayleigh: 3,
-                mieCoefficient: 0.005,
-                mieDirectionalG: 0.7,
-                elevation: 4,
-                azimuth: 180,
-            };
-            const uniforms = sky.material.uniforms;
-            uniforms[ 'turbidity' ].value = effectController.turbidity;
-            uniforms[ 'rayleigh' ].value = effectController.rayleigh;
-            uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
-            uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;
-            const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
-            const theta = THREE.MathUtils.degToRad( effectController.azimuth );
-            sun.setFromSphericalCoords( 1, phi, theta );
-            uniforms[ 'sunPosition' ].value.copy( sun );
-            dirLight.position.copy(sun).multiplyScalar(100);
+            gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x444444);
+            scene.add(gridHelper);
 
-            const brushGeometry = new THREE.CylinderGeometry(1, 1, 100, 32, 1, true);
-            const brushMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true, transparent: true, opacity: 0.5 });
-            brushHelper = new THREE.Mesh(brushGeometry, brushMaterial);
-            brushHelper.visible = false;
-            scene.add(brushHelper);
+            const planeGeo = new THREE.PlaneGeometry(100, 100);
+            planeGeo.rotateX(-Math.PI / 2);
+            placementPlane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ visible: false }));
+            scene.add(placementPlane);
 
-            initFoliage();
-            initPostprocessing();
+            raycaster = new THREE.Raycaster();
+            mouse = new THREE.Vector2();
+            
+            initUI();
             initPlayer();
             initJoystick();
-
+            initInstancedMeshes();
+            
             window.addEventListener('resize', onWindowResize);
             renderer.domElement.addEventListener('pointermove', onPointerMove);
             renderer.domElement.addEventListener('pointerdown', onPointerDown);
-            renderer.domElement.addEventListener('pointerup', onPointerUp);
-            renderer.domElement.addEventListener('pointerout', () => { brushHelper.visible = false; isEditing = false; });
-            
-            setupUIListeners();
-            animate();
-        }
-
-        function initPostprocessing() {
-            composer = new EffectComposer(renderer);
-            const renderPass = new RenderPass(scene, camera);
-            composer.addPass(renderPass);
-
-            const ssaoPass = new SSAOPass(scene, camera, window.innerWidth, window.innerHeight);
-            ssaoPass.kernelRadius = 16;
-            ssaoPass.minDistance = 0.005;
-            ssaoPass.maxDistance = 0.1;
-            composer.addPass(ssaoPass);
+            window.addEventListener('keydown', e => { keyStates[e.code] = true; handleKeyDown(e); });
+            window.addEventListener('keyup', e => { keyStates[e.code] = false; });
+            renderer.domElement.addEventListener('wheel', e => {
+                if(!isPlayMode) {
+                    e.preventDefault();
+                    rotatePreview(e.deltaY > 0 ? 1 : -1);
+                }
+            }, { passive: false });
+            renderer.domElement.addEventListener('contextmenu', e => e.preventDefault());
 
-            const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, 0.4, 0.85);
-            composer.addPass(bloomPass);
+            animate();
         }
 
-        function initFoliage() {
-            if (grassInstances) scene.remove(grassInstances);
-            if (treeInstances) scene.remove(treeInstances);
-            if (rockInstances) scene.remove(rockInstances);
-
-            const grassTexture = textureLoader.load('https://threejs.org/examples/textures/sprites/grass.png');
-            grassMaterial = new THREE.MeshBasicMaterial({ map: grassTexture, side: THREE.DoubleSide, transparent: true, alphaTest: 0.5 });
-            const grassBlade = new THREE.PlaneGeometry(0.8, 1.8);
-            grassBlade.translate(0, 0.9, 0);
-            grassInstances = new THREE.InstancedMesh(grassBlade, grassMaterial, MAX_INSTANCE_COUNT);
-            grassInstances.castShadow = true;
-            grassInstances.count = 0;
-            scene.add(grassInstances);
-
-            treeMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 });
-            const treeTrunk = new THREE.CylinderGeometry(0.5, 0.7, 5);
-            const treeCrown = new THREE.ConeGeometry(2.5, 8, 8);
-            treeCrown.translate(0, 6, 0);
-            const treeGeometry = new THREE.BufferGeometry();
-            
-            const treeGeometries = [treeTrunk, treeCrown];
-            let totalVertices = 0;
-            let totalIndices = 0;
-            treeGeometries.forEach(geom => {
-                totalVertices += geom.attributes.position.count;
-                totalIndices += geom.index.count;
-            });
-
-            const positions = new Float32Array(totalVertices * 3);
-            const normals = new Float32Array(totalVertices * 3);
-            const indices = new (totalIndices > 65535 ? Uint32Array : Uint16Array)(totalIndices);
-
-            let vertexOffset = 0;
-            let indexOffset = 0;
-            treeGeometries.forEach(geom => {
-                positions.set(geom.attributes.position.array, vertexOffset * 3);
-                normals.set(geom.attributes.normal.array, vertexOffset * 3);
-                for (let i = 0; i < geom.index.count; i++) {
-                    indices[indexOffset + i] = geom.index.array[i] + vertexOffset;
+        function initInstancedMeshes() {
+            const MAX_COUNT = 10000;
+            for (const category in ASSETS) {
+                instancedMeshes[category] = {};
+                for (const type in ASSETS[category]) {
+                    const asset = ASSETS[category][type];
+                    let geometry;
+                    if(asset.geometry === 'cylinder') {
+                        geometry = new THREE.CylinderGeometry(asset.size[0], asset.size[0], asset.size[1], 16);
+                    } else {
+                        geometry = new THREE.BoxGeometry(...asset.size);
+                    }
+                    const material = new THREE.MeshStandardMaterial({ color: asset.color });
+                    const mesh = new THREE.InstancedMesh(geometry, material, MAX_COUNT);
+                    mesh.castShadow = true;
+                    mesh.receiveShadow = true;
+                    mesh.count = 0;
+                    instancedMeshes[category][type] = mesh;
+                    scene.add(mesh);
                 }
-                vertexOffset += geom.attributes.position.count;
-                indexOffset += geom.index.count;
-            });
-            treeGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-            treeGeometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));
-            treeGeometry.setIndex(new THREE.BufferAttribute(indices, 1));
-            
-            treeInstances = new THREE.InstancedMesh(treeGeometry, treeMaterial, MAX_INSTANCE_COUNT);
-            treeInstances.castShadow = true;
-            treeInstances.count = 0;
-            scene.add(treeInstances);
-
-            rockMaterial = new THREE.MeshLambertMaterial({ color: 0x808080 });
-            const rockGeometry = new THREE.IcosahedronGeometry(1, 1);
-            rockInstances = new THREE.InstancedMesh(rockGeometry, rockMaterial, MAX_INSTANCE_COUNT);
-            rockInstances.castShadow = true;
-            rockInstances.count = 0;
-            scene.add(rockInstances);
+            }
         }
 
         function initPlayer() {
-            const playerGeometry = new THREE.CapsuleGeometry(0.5, 1.0);
-            const playerMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
-            player = new THREE.Mesh(playerGeometry, playerMaterial);
-            player.position.set(0, 20, 0);
+            const playerGeo = new THREE.CylinderGeometry(0.25, 0.25, 1.5, 16);
+            playerGeo.translate(0, 0.75, 0);
+            const playerMat = new THREE.MeshStandardMaterial({ color: 0x00aaff });
+            player = new THREE.Mesh(playerGeo, playerMat);
+            player.castShadow = true;
             player.visible = false;
             scene.add(player);
-            
-            const blocker = document.getElementById('blocker');
-            const instructions = document.getElementById('instructions');
-            instructions.addEventListener('click', () => {
-                if(isPlayMode) {
-                    blocker.style.display = 'none';
-                }
-            });
-            
-            document.addEventListener('keydown', (event) => { keyStates[event.code] = true; });
-            document.addEventListener('keyup', (event) => { keyStates[event.code] = false; });
-            document.addEventListener('keydown', (event) => {
-                if (isPlayMode && event.code === 'Escape') {
-                    blocker.style.display = 'block';
-                }
-            });
         }
-        
-        function setupUIListeners() {
+
+        function initUI() {
+            const toolSelector = document.getElementById('tool-selector');
+            toolSelector.innerHTML = '';
+            for (const category in ASSETS) {
+                for (const type in ASSETS[category]) {
+                    const item = document.createElement('div');
+                    item.className = 'tool-item';
+                    item.textContent = `${category.slice(0,1).toUpperCase()}: ${type}`;
+                    item.dataset.category = category;
+                    item.dataset.type = type;
+                    item.addEventListener('click', () => selectTool(category, type));
+                    toolSelector.appendChild(item);
+                }
+            }
+            selectTool('floors', 'grass');
+
             document.getElementById('save-project').addEventListener('click', saveProject);
             document.getElementById('load-project').addEventListener('click', loadProject);
-            document.getElementById('brush-size').addEventListener('input', (e) => {
-                document.getElementById('brush-size-value').textContent = e.target.value;
-                updateBrushHelper();
-            });
-            document.getElementById('brush-strength').addEventListener('input', (e) => {
-                document.getElementById('brush-strength-value').textContent = e.target.value;
-            });
-            document.getElementById('project-list').addEventListener('change', (e) => {
-                document.getElementById('project-name').value = e.target.value;
-            });
-            document.getElementById('burger-menu').addEventListener('click', () => {
-                document.getElementById('ui-panel').classList.toggle('open');
-            });
-            document.getElementById('clear-objects').addEventListener('click', () => {
-                if (confirm('Вы уверены, что хотите удалить все объекты?')) {
-                    grassInstances.count = 0;
-                    treeInstances.count = 0;
-                    rockInstances.count = 0;
-                    grassInstances.instanceMatrix.needsUpdate = true;
-                    treeInstances.instanceMatrix.needsUpdate = true;
-                    rockInstances.instanceMatrix.needsUpdate = true;
-                }
-            });
             document.getElementById('play-mode-toggle').addEventListener('click', togglePlayMode);
-            document.getElementById('update-texture-btn').addEventListener('click', updateCustomTexture);
-            document.getElementById('rename-texture-slot-btn').addEventListener('click', renameTextureSlot);
-            document.getElementById('texture-slot-select').addEventListener('change', (e) => {
-                 const slotName = e.target.value;
-                 const textureSelector = document.getElementById('texture-selector');
-                 const label = textureSelector.querySelector(`label input[value="${slotName}"]`).parentElement;
-                 document.getElementById('texture-slot-name').value = label.innerText.trim();
-            });
+            document.getElementById('clear-level').addEventListener('click', clearLevel);
+            document.getElementById('burger-menu').addEventListener('click', () => document.getElementById('ui-panel').classList.toggle('open'));
+            document.getElementById('project-list').addEventListener('change', e => document.getElementById('project-name').value = e.target.value);
         }
-
+        
         function initJoystick() {
             const joystickContainer = document.getElementById('joystick-container');
             const joystickHandle = document.getElementById('joystick-handle');
-            const maxRadius = joystickContainer.clientWidth / 2 - joystickHandle.clientWidth / 2;
+            const maxRadius = joystickContainer.clientWidth / 2;
 
             function onTouchStart(event) {
-                event.preventDefault();
                 const touch = event.touches[0];
                 joystick.active = true;
                 joystick.center.set(touch.clientX, touch.clientY);
-                joystickContainer.style.left = `${touch.clientX - joystickContainer.clientWidth / 2}px`;
-                joystickContainer.style.top = `${touch.clientY - joystickContainer.clientHeight / 2}px`;
+                joystickContainer.style.left = `${touch.clientX - maxRadius}px`;
+                joystickContainer.style.top = `${touch.clientY - maxRadius}px`;
             }
-
             function onTouchMove(event) {
                 if (!joystick.active) return;
-                event.preventDefault();
                 const touch = event.touches[0];
                 joystick.current.set(touch.clientX, touch.clientY);
                 joystick.vector.copy(joystick.current).sub(joystick.center);
-                
-                if (joystick.vector.length() > maxRadius) {
-                    joystick.vector.setLength(maxRadius);
-                }
-
+                if (joystick.vector.length() > maxRadius) joystick.vector.setLength(maxRadius);
                 joystickHandle.style.transform = `translate(${joystick.vector.x}px, ${joystick.vector.y}px)`;
             }
-
-            function onTouchEnd(event) {
+            function onTouchEnd() {
                 joystick.active = false;
                 joystick.vector.set(0, 0);
                 joystickHandle.style.transform = 'translate(0, 0)';
             }
-            joystickContainer.addEventListener('touchstart', onTouchStart, { passive: false });
-            window.addEventListener('touchmove', onTouchMove, { passive: false });
+            joystickContainer.addEventListener('touchstart', onTouchStart, { passive: true });
+            window.addEventListener('touchmove', onTouchMove, { passive: true });
             window.addEventListener('touchend', onTouchEnd);
         }
         
-        function updateCustomTexture() {
-            const textureFileInput = document.getElementById('custom-texture-file');
-            const normalFileInput = document.getElementById('custom-normal-file');
-            const textureSlot = document.getElementById('texture-slot-select').value;
-
-            const textureFile = textureFileInput.files[0];
-            const normalFile = normalFileInput.files[0];
-
-            if (!textureFile && !normalFile) {
-                alert('Пожалуйста, выберите файл текстуры или карты нормалей.');
-                return;
-            }
-
-            const updateTexture = (file, isNormalMap) => {
-                if (!file) return;
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                    const dataUrl = event.target.result;
-                    
-                    if (isNormalMap) {
-                        customNormalMaps[textureSlot] = dataUrl;
-                    } else {
-                        customTextures[textureSlot] = dataUrl;
-                    }
-
-                    const newTexture = loadTexture(dataUrl);
-                    const uniformName = textureSlot + (isNormalMap ? 'NormalMap' : 'Texture');
-
-                    if (terrainMaterial.uniforms[uniformName]) {
-                        if (terrainMaterial.uniforms[uniformName].value) {
-                            terrainMaterial.uniforms[uniformName].value.dispose();
-                        }
-                        terrainMaterial.uniforms[uniformName].value = newTexture;
-                        terrainMaterial.needsUpdate = true;
-                        alert(`Карта ${isNormalMap ? 'нормалей' : 'текстуры'} для слота "${textureSlot}" успешно обновлена.`);
-                    }
-                };
-                reader.readAsDataURL(file);
-            };
-
-            updateTexture(textureFile, false);
-            updateTexture(normalFile, true);
-        }
-
-        function renameTextureSlot() {
-            const slotValue = document.getElementById('texture-slot-select').value;
-            const newName = document.getElementById('texture-slot-name').value.trim();
-
-            if (!newName) {
-                alert("Имя слота не может быть пустым.");
-                return;
-            }
-            
-            const textureSelector = document.getElementById('texture-selector');
-            const label = textureSelector.querySelector(`label input[value="${slotValue}"]`).parentElement;
-            
-            label.childNodes[1].nodeValue = " " + newName;
-            
-            const option = document.querySelector(`#texture-slot-select option[value="${slotValue}"]`);
-            option.textContent = newName;
-            
-            alert(`Слот "${slotValue}" переименован в "${newName}".`);
-        }
-
-        function updateTextureUIAfterLoad(projectData) {
-            if (!projectData.textureNames) return;
-
-            const textureSelector = document.getElementById('texture-selector');
-            const slotSelect = document.getElementById('texture-slot-select');
-
-            Object.entries(projectData.textureNames).forEach(([slotValue, newName]) => {
-                const label = textureSelector.querySelector(`label input[value="${slotValue}"]`).parentElement;
-                if (label) {
-                    label.childNodes[1].nodeValue = " " + newName;
-                }
-                const option = slotSelect.querySelector(`option[value="${slotValue}"]`);
-                if (option) {
-                    option.textContent = newName;
-                }
-            });
-        }
-
-
-        function togglePlayMode() {
-            isPlayMode = !isPlayMode;
-            const toggleButton = document.getElementById('play-mode-toggle');
-            const uiPanel = document.getElementById('ui-container');
-            const blocker = document.getElementById('blocker');
-            const joystickContainer = document.getElementById('joystick-container');
-
-            if (isPlayMode) {
-                toggleButton.textContent = "Редактор";
-                toggleButton.classList.remove('play-button');
-                uiPanel.style.display = 'none';
-                brushHelper.visible = false;
-                orbitControls.enabled = false;
-                player.visible = true;
-                joystickContainer.style.display = 'block';
-
-                const terrainMeshesToTest = Object.values(chunks).map(c => c.mesh);
-                if (terrainMeshesToTest.length > 0) {
-                    const spawnRaycaster = new THREE.Raycaster(new THREE.Vector3(player.position.x, 100, player.position.z), new THREE.Vector3(0, -1, 0));
-                    const intersects = spawnRaycaster.intersectObjects(terrainMeshesToTest);
-                    if (intersects.length > 0) {
-                        player.position.copy(intersects[0].point);
-                    }
-                }
-                player.position.y += 1.5;
-                
-                blocker.style.display = 'block';
-
+        function selectTool(category, type) {
+            currentTool = { category, type };
+            document.querySelectorAll('.tool-item').forEach(el => el.classList.remove('active'));
+            const activeEl = document.querySelector(`.tool-item[data-category="${category}"][data-type="${type}"]`);
+            if (activeEl) activeEl.classList.add('active');
+
+            if (previewMesh) scene.remove(previewMesh);
+            const asset = ASSETS[category][type];
+            let geometry;
+            if(asset.geometry === 'cylinder') {
+                geometry = new THREE.CylinderGeometry(asset.size[0], asset.size[0], asset.size[1], 16);
             } else {
-                toggleButton.textContent = "Играть";
-                toggleButton.classList.add('play-button');
-                uiPanel.style.display = 'block';
-                orbitControls.enabled = true;
-                player.visible = false;
-                blocker.style.display = 'none';
-                joystickContainer.style.display = 'none';
-                
-                camera.position.copy(player.position).add(cameraOffset);
-                orbitControls.target.copy(player.position);
-                orbitControls.update();
-            }
-        }
-
-        function showSpinner(show) {
-            document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
-        }
-        
-        function getChunkKey(x, z) {
-            return `${x},${z}`;
-        }
-        
-        function createChunk(chunkX, chunkZ) {
-            const key = getChunkKey(chunkX, chunkZ);
-            const geometry = new THREE.PlaneGeometry(chunkSize, chunkSize, chunkSegments, chunkSegments);
-            geometry.rotateX(-Math.PI / 2);
-            
-            const colors = new Float32Array(geometry.attributes.position.count * 4);
-            geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4));
-
-            const positions = geometry.attributes.position;
-            const chunkData = loadedTerrainData[key];
-
-            if (chunkData && chunkData.heights) {
-                for (let i = 0; i < positions.count; i++) {
-                    positions.setY(i, chunkData.heights[i]);
-                }
-                if (chunkData.colors) {
-                    geometry.attributes.color.array.set(chunkData.colors);
-                }
-            } else {
-                for (let i = 0; i < positions.count; i++) {
-                    const worldX = positions.getX(i) + chunkX * chunkSize;
-                    const worldZ = positions.getZ(i) + chunkZ * chunkSize;
-                    const noiseVal = noise2D(worldX * 0.02, worldZ * 0.02) * 10 + noise2D(worldX * 0.1, worldZ * 0.1) * 2;
-                    positions.setY(i, noiseVal);
-                }
-            }
-            
-            geometry.computeTangents();
-            geometry.computeVertexNormals();
-
-            const mesh = new THREE.Mesh(geometry, terrainMaterial);
-            mesh.position.set(chunkX * chunkSize, 0, chunkZ * chunkSize);
-            mesh.castShadow = true;
-            mesh.receiveShadow = true;
-            
-            scene.add(mesh);
-            
-            chunks[key] = { mesh: mesh, isModified: false, x: chunkX, z: chunkZ };
-            terrainMeshes.push(mesh);
-        }
-
-        function disposeChunk(key) {
-            const chunk = chunks[key];
-            if (chunk) {
-                scene.remove(chunk.mesh);
-                chunk.mesh.geometry.dispose();
-                terrainMeshes = terrainMeshes.filter(m => m !== chunk.mesh);
-                delete chunks[key];
-            }
-        }
-
-        function updateChunks() {
-            const focusPoint = isPlayMode ? player.position : orbitControls.target;
-            const currentChunkX = Math.round(focusPoint.x / chunkSize);
-            const currentChunkZ = Math.round(focusPoint.z / chunkSize);
-            
-            const loadedChunks = {};
-            for (let x = currentChunkX - viewDistance; x <= currentChunkX + viewDistance; x++) {
-                for (let z = currentChunkZ - viewDistance; z <= currentChunkZ + viewDistance; z++) {
-                    const key = getChunkKey(x, z);
-                    loadedChunks[key] = true;
-                    if (!chunks[key]) {
-                        createChunk(x, z);
-                    }
-                }
-            }
-            
-            for (const key in chunks) {
-                if (!loadedChunks[key]) {
-                    disposeChunk(key);
-                }
+                geometry = new THREE.BoxGeometry(...asset.size);
             }
+            const material = new THREE.MeshBasicMaterial({ color: asset.color, transparent: true, opacity: 0.6 });
+            previewMesh = new THREE.Mesh(geometry, material);
+            scene.add(previewMesh);
         }
 
         function onWindowResize() {
-            const aspect = window.innerWidth / window.innerHeight;
-            const frustumSize = 150;
-            camera.left = frustumSize * aspect / -2;
-            camera.right = frustumSize * aspect / 2;
-            camera.top = frustumSize / 2;
-            camera.bottom = frustumSize / -2;
+            camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
-            composer.setSize(window.innerWidth, window.innerHeight);
-        }
-        
-        function getBrushMode() {
-            return document.querySelector('input[name="brush-mode"]:checked').value;
         }
 
         function onPointerMove(event) {
             if (isPlayMode) return;
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-
-            if (terrainMeshes.length === 0) return;
             raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObjects(terrainMeshes);
-
+            const intersects = raycaster.intersectObject(placementPlane);
             if (intersects.length > 0) {
-                const intersectionPoint = intersects[0].point;
-                brushHelper.position.copy(intersectionPoint);
-                brushHelper.position.y = -50;
-                brushHelper.visible = true;
-                updateBrushHelper();
-
-                if (isEditing) {
-                    applyBrush(intersects[0]);
+                const point = intersects[0].point;
+                const gridX = Math.round(point.x / gridSize);
+                const gridZ = Math.round(point.z / gridSize);
+                previewMesh.position.set(gridX * gridSize, 0, gridZ * gridSize);
+                
+                const asset = ASSETS[currentTool.category][currentTool.type];
+                if (currentTool.category === 'floors') {
+                    previewMesh.position.y = asset.size[1] / 2;
+                } else if (currentTool.category === 'walls') {
+                    previewMesh.position.y = asset.size[1] / 2;
+                } else {
+                    previewMesh.position.y = asset.size[1] / 2;
                 }
+                previewMesh.visible = true;
             } else {
-                brushHelper.visible = false;
+                previewMesh.visible = false;
             }
         }
         
-        function updateBrushHelper() {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            brushHelper.scale.set(brushSize, 1, brushSize);
-        }
-
-        function onPointerDown(event) {
+        function handleKeyDown(event) {
             if (isPlayMode) return;
-            if (event.button === 0) {
-                 if (window.innerWidth < 800 && !document.getElementById('ui-panel').contains(event.target)) {
-                     document.getElementById('ui-panel').classList.remove('open');
-                 }
-                isEditing = true;
-
-                if (event.pointerType === 'touch') {
-                    orbitControls.enabled = false;
-                }
-                
-                if (getBrushMode() === 'flatten') {
-                    raycaster.setFromCamera(mouse, camera);
-                    if (terrainMeshes.length > 0) {
-                        const intersects = raycaster.intersectObjects(terrainMeshes);
-                        if (intersects.length > 0) {
-                            flattenHeight = intersects[0].point.y;
-                        }
-                    }
-                }
-            }
-        }
-
-        function onPointerUp(event) {
-            if (event.button === 0) {
-                isEditing = false;
-                flattenHeight = null;
-                if (event.pointerType === 'touch') {
-                    orbitControls.enabled = true;
-                }
+            if (event.code === 'KeyR') {
+                rotatePreview(1);
             }
         }
         
-        function applyBrush(intersection) {
-             if (terrainMeshes.length === 0) return;
-            const brushMode = getBrushMode();
-            switch(brushMode) {
-                case 'raise': case 'lower': sculptTerrain(intersection.point, brushMode); break;
-                case 'roughen': roughenTerrain(intersection.point); break;
-                case 'smooth': smoothTerrain(intersection.point); break;
-                case 'flatten': flattenTerrain(intersection.point); break;
-                case 'paint': paintTexture(intersection.point); break;
-                case 'place': placeObject(intersection); break;
+        function onPointerDown(event) {
+            if (isPlayMode || !previewMesh.visible) return;
+            const isRemoving = event.shiftKey;
+            
+            if (event.button === 2) { // Right click
+                rotatePreview(1);
+                return;
             }
-        }
-        
-        function forEachVertexInBrush(center, callback) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushSizeSq = brushSize * brushSize;
-            const vertex = new THREE.Vector3();
-
-            for (const key in chunks) {
-                const chunk = chunks[key];
-                const chunkPos = chunk.mesh.position;
-                
-                const distToChunkSq = (center.x - chunkPos.x)**2 + (center.z - chunkPos.z)**2;
-                if (distToChunkSq > (chunkSize/2 + brushSize)**2) continue;
-
-                const positions = chunk.mesh.geometry.attributes.position;
-                let modified = false;
+            
+            if (event.button !== 0) return; // Not left click
+            
+            const pos = previewMesh.position;
+            const key = `${pos.x},${pos.z}`;
 
-                for (let i = 0; i < positions.count; i++) {
-                    vertex.fromBufferAttribute(positions, i).add(chunkPos);
-                    const distanceSq = (vertex.x - center.x)**2 + (vertex.z - center.z)**2;
-                    if (distanceSq < brushSizeSq) {
-                        if (callback(chunk, i, vertex, Math.sqrt(distanceSq))) {
-                            modified = true;
-                        }
-                    }
-                }
-                if (modified) {
-                    positions.needsUpdate = true;
-                    chunk.mesh.geometry.computeVertexNormals();
-                    chunk.mesh.geometry.computeTangents();
-                    chunk.isModified = true;
-                }
+            if (isRemoving) {
+                removeItemAt(pos);
+            } else {
+                addItem(pos, currentRotation);
             }
+            updateLevelGeometry();
         }
-
-
-        function sculptTerrain(center, mode) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value);
-            const direction = (mode === 'raise') ? 1 : -1;
-
-            forEachVertexInBrush(center, (chunk, index, vertex, distance) => {
-                const falloff = Math.pow(1 - (distance / brushSize), 2);
-                const positions = chunk.mesh.geometry.attributes.position;
-                let currentY = positions.getY(index);
-                let newY = currentY + direction * falloff * brushStrength;
-                positions.setY(index, newY);
-                return true;
-            });
+        
+        function rotatePreview(direction) {
+            currentRotation += (Math.PI / 2) * direction;
+            previewMesh.rotation.y = currentRotation;
         }
 
-        function roughenTerrain(center) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value);
-            const noiseFrequency = 1.5;
-
-            forEachVertexInBrush(center, (chunk, index, vertex, distance) => {
-                const falloff = Math.pow(1 - (distance / brushSize), 2);
-                let noiseVal = noise2D(vertex.x * noiseFrequency, vertex.z * noiseFrequency);
-                const positions = chunk.mesh.geometry.attributes.position;
-                let currentY = positions.getY(index);
-                let newY = currentY + noiseVal * falloff * brushStrength;
-                positions.setY(index, newY);
-                return true;
-            });
-        }
-        
-        function smoothTerrain(center) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value) * 0.1;
+        function addItem(pos, rotation) {
+            const { category, type } = currentTool;
+            const key = `${pos.x},${pos.z}`;
             
-            const verticesInBrush = [];
-            let totalHeight = 0;
-
-            forEachVertexInBrush(center, (chunk, index, vertex, distance) => {
-                verticesInBrush.push({ chunk, index, vertex, distance });
-                totalHeight += vertex.y;
-                return false;
-            });
-            if (verticesInBrush.length === 0) return;
+            removeItemAt(pos);
 
-            const averageHeight = totalHeight / verticesInBrush.length;
-
-            verticesInBrush.forEach(v => {
-                const falloff = Math.pow(1 - (v.distance / brushSize), 2);
-                const positions = v.chunk.mesh.geometry.attributes.position;
-                const currentY = positions.getY(v.index);
-                const newY = THREE.MathUtils.lerp(currentY, averageHeight, falloff * brushStrength);
-                positions.setY(v.index, newY);
-                positions.needsUpdate = true;
-                v.chunk.isModified = true;
-            });
-
-            Object.values(chunks).forEach(chunk => {
-                 if(chunk.isModified) {
-                    chunk.mesh.geometry.computeVertexNormals();
-                    chunk.mesh.geometry.computeTangents();
-                 }
-            });
+            if (!levelData[category][type]) levelData[category][type] = [];
+            levelData[category][type].push([pos.x, pos.z, rotation]);
         }
 
-        function flattenTerrain(center) {
-            if (flattenHeight === null) return;
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value) * 0.1;
-
-            forEachVertexInBrush(center, (chunk, index, vertex, distance) => {
-                 const falloff = Math.pow(1 - (distance / brushSize), 2);
-                 const positions = chunk.mesh.geometry.attributes.position;
-                 const currentY = positions.getY(index);
-                 const newY = THREE.MathUtils.lerp(currentY, flattenHeight - chunk.mesh.position.y, falloff * brushStrength);
-                 positions.setY(index, newY);
-                 return true;
-            });
+        function removeItemAt(pos) {
+            const keyToRemove = `${pos.x},${pos.z}`;
+            for (const category in levelData) {
+                for (const type in levelData[category]) {
+                    levelData[category][type] = levelData[category][type].filter(item => {
+                        const itemKey = `${item[0]},${item[1]}`;
+                        return itemKey !== keyToRemove;
+                    });
+                }
+            }
         }
         
-        function paintTexture(center) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const brushStrength = parseFloat(document.getElementById('brush-strength').value) * 0.1;
-            const textureType = document.querySelector('input[name="texture-type"]:checked').value;
+        function updateLevelGeometry() {
+            const dummy = new THREE.Object3D();
+            wallBBoxes = [];
             
-            const targetColor = new THREE.Vector4(0,0,0,0);
-            if(textureType === 'rock')      targetColor.x = 1;
-            else if (textureType === 'dirt')   targetColor.y = 1;
-            else if (textureType === 'snow')   targetColor.z = 1;
-            else if (textureType === 'sand')   targetColor.w = 1;
-
-            const currentColor = new THREE.Vector4();
-            const modifiedChunks = new Set();
+            for (const category in ASSETS) {
+                for (const type in ASSETS[category]) {
+                    const mesh = instancedMeshes[category][type];
+                    const dataArray = levelData[category]?.[type] || [];
+                    mesh.count = dataArray.length;
+
+                    for (let i = 0; i < dataArray.length; i++) {
+                        const [x, z, rot] = dataArray[i];
+                        const asset = ASSETS[category][type];
+                        
+                        dummy.position.set(x, 0, z);
+                        dummy.rotation.set(0, rot, 0);
+
+                        if (category === 'floors') {
+                            dummy.position.y = asset.size[1] / 2;
+                        } else {
+                             dummy.position.y = asset.size[1] / 2;
+                        }
+                        
+                        dummy.updateMatrix();
+                        mesh.setMatrixAt(i, dummy.matrix);
 
-            forEachVertexInBrush(center, (chunk, index, vertex, distance) => {
-                const colors = chunk.mesh.geometry.attributes.color;
-                const falloff = Math.pow(1 - (distance / brushSize), 2);
-                currentColor.fromBufferAttribute(colors, index);
-                
-                if (textureType === 'grass') {
-                     currentColor.x = Math.max(0, currentColor.x - falloff * brushStrength);
-                     currentColor.y = Math.max(0, currentColor.y - falloff * brushStrength);
-                     currentColor.z = Math.max(0, currentColor.z - falloff * brushStrength);
-                     currentColor.w = Math.max(0, currentColor.w - falloff * brushStrength);
-                } else {
-                    currentColor.lerp(targetColor, falloff * brushStrength);
-                }
-                
-                let sum = currentColor.x + currentColor.y + currentColor.z + currentColor.w;
-                if (sum > 1.0) {
-                    currentColor.divideScalar(sum);
+                        if (category === 'walls') {
+                           const box = new THREE.Box3().setFromObject(dummy);
+                           wallBBoxes.push(box);
+                        }
+                    }
+                    mesh.instanceMatrix.needsUpdate = true;
                 }
-                colors.setXYZW(index, currentColor.x, currentColor.y, currentColor.z, currentColor.w);
-                modifiedChunks.add(chunk);
-                return false;
-            });
-
-            modifiedChunks.forEach(chunk => {
-                chunk.mesh.geometry.attributes.color.needsUpdate = true;
-                chunk.isModified = true;
-            });
+            }
+        }
+        
+        function clearLevel() {
+            if (!confirm("Вы уверены, что хотите полностью очистить уровень?")) return;
+            levelData.floors = {};
+            levelData.walls = {};
+            levelData.objects = {};
+            updateLevelGeometry();
         }
 
-        function placeObject(intersection) {
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const density = parseFloat(document.getElementById('brush-strength').value) * 2;
-            const objectType = document.querySelector('input[name="object-type"]:checked').value;
-            const dummy = new THREE.Object3D();
+        function togglePlayMode() {
+            isPlayMode = !isPlayMode;
+            const uiContainer = document.getElementById('ui-container');
+            const blocker = document.getElementById('blocker');
+            const joystickContainer = document.getElementById('joystick-container');
             
-            let targetInstances;
-            switch(objectType) {
-                case 'grass': targetInstances = grassInstances; break;
-                case 'tree': targetInstances = treeInstances; break;
-                case 'rock': targetInstances = rockInstances; break;
-            }
-            if (!targetInstances) return;
-
-            for (let i = 0; i < density; i++) {
-                if (targetInstances.count >= MAX_INSTANCE_COUNT) break;
-
-                const randomPoint = new THREE.Vector2(
-                    (Math.random() - 0.5) * brushSize * 2,
-                    (Math.random() - 0.5) * brushSize * 2
-                );
-                
-                dummy.position.set(
-                    intersection.point.x + randomPoint.x,
-                    intersection.point.y,
-                    intersection.point.z + randomPoint.y
-                );
-                
-                const placementRaycaster = new THREE.Raycaster(
-                    new THREE.Vector3(dummy.position.x, 100, dummy.position.z),
-                    new THREE.Vector3(0, -1, 0)
-                );
-                if (terrainMeshes.length > 0) {
-                    const placementIntersects = placementRaycaster.intersectObjects(terrainMeshes);
-                    
-                    if (placementIntersects.length > 0) {
-                        dummy.position.copy(placementIntersects[0].point);
-                        dummy.rotation.y = Math.random() * Math.PI * 2;
-                        let scale = Math.random() * 0.5 + 0.75;
-                        if (objectType === 'rock') scale *= 2.0;
-                        dummy.scale.set(scale, scale, scale);
-                        dummy.updateMatrix();
-                        targetInstances.setMatrixAt(targetInstances.count++, dummy.matrix);
-                    }
-                }
+            if (isPlayMode) {
+                uiContainer.style.display = 'none';
+                gridHelper.visible = false;
+                previewMesh.visible = false;
+                orbitControls.enabled = false;
+                player.visible = true;
+                player.position.set(0, 0, 0);
+                blocker.style.display = 'block';
+                joystickContainer.style.display = 'block';
+            } else {
+                uiContainer.style.display = 'flex';
+                gridHelper.visible = true;
+                previewMesh.visible = true;
+                orbitControls.enabled = true;
+                player.visible = false;
+                blocker.style.display = 'none';
+                joystickContainer.style.display = 'none';
+                camera.position.set(25, 30, 25);
+                orbitControls.target.set(0, 0, 0);
             }
-             targetInstances.instanceMatrix.needsUpdate = true;
         }
 
         async function saveProject() {
             const projectName = document.getElementById('project-name').value.trim();
             if (!projectName) { alert("Пожалуйста, введите имя проекта."); return; }
-            if (Object.keys(chunks).length === 0) { alert("Нечего сохранять."); return; }
             showSpinner(true);
-
-            const getMatrices = (instances) => {
-                const matrices = [];
-                for (let i = 0; i < instances.count; i++) {
-                    const matrix = new THREE.Matrix4();
-                    instances.getMatrixAt(i, matrix);
-                    matrices.push(...matrix.elements);
-                }
-                return matrices;
-            }
-
-            const textureNames = {};
-            document.querySelectorAll('#texture-selector label').forEach(label => {
-                const input = label.querySelector('input');
-                const slotValue = input.value;
-                const name = label.innerText.trim();
-                textureNames[slotValue] = name;
-            });
-
-            const terrainData = {};
-            for(const key in chunks) {
-                const chunk = chunks[key];
-                if (chunk.isModified) {
-                    terrainData[key] = {
-                        heights: Array.from(chunk.mesh.geometry.attributes.position.array.filter((_, i) => i % 3 === 1)),
-                        colors: Array.from(chunk.mesh.geometry.attributes.color.array)
-                    }
-                }
-            }
-            
-            const projectData = {
-                name: projectName,
-                terrain: terrainData,
-                objects: {
-                    grass: getMatrices(grassInstances),
-                    tree: getMatrices(treeInstances),
-                    rock: getMatrices(rockInstances)
-                },
-                customTextures: customTextures,
-                customNormalMaps: customNormalMaps,
-                textureNames: textureNames
-            };
-            
             try {
                 const response = await fetch('/api/project', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(projectData)
+                    body: JSON.stringify({ name: projectName, data: levelData })
                 });
-                const result = await response.json();
-                if (!response.ok) throw new Error(result.error || 'Ошибка при сохранении проекта.');
+                if (!response.ok) throw new Error('Ошибка при сохранении проекта.');
                 alert(`Проект '${projectName}' успешно сохранен!`);
-
                 const projectList = document.getElementById('project-list');
-                if (!Array.from(projectList.options).some(opt => opt.value === projectName)) {
+                if (![...projectList.options].some(opt => opt.value === projectName)) {
                     const newOption = document.createElement('option');
                     newOption.value = newOption.textContent = projectName;
                     projectList.appendChild(newOption);
@@ -1307,68 +582,19 @@ EDITOR_TEMPLATE = '''
                 showSpinner(false);
             }
         }
-        
+
         async function loadProject() {
             const projectName = document.getElementById('project-list').value;
             if (!projectName) { alert("Пожалуйста, выберите проект для загрузки."); return; }
             showSpinner(true);
-
             try {
                 const response = await fetch(`/api/project/${projectName}`);
                 const result = await response.json();
-                if (!response.ok) throw new Error(result.error || 'Ошибка при загрузке проекта.');
-                
-                for (const key in chunks) { disposeChunk(key); }
-                chunks = {};
-                terrainMeshes = [];
-                initFoliage();
-
-                loadedTerrainData = result.terrain || {};
+                if (!response.ok) throw new Error('Проект не найден или ошибка загрузки.');
                 
-                const loadInstances = (data, instances) => {
-                    if (data && data.length > 0) {
-                        instances.count = data.length / 16;
-                        for (let i = 0; i < instances.count; i++) {
-                            const matrix = new THREE.Matrix4();
-                            matrix.fromArray(data, i * 16);
-                            instances.setMatrixAt(i, matrix);
-                        }
-                        instances.instanceMatrix.needsUpdate = true;
-                    }
-                };
-
-                if (result.objects) {
-                    loadInstances(result.objects.grass, grassInstances);
-                    loadInstances(result.objects.tree, treeInstances);
-                    loadInstances(result.objects.rock, rockInstances);
-                }
-
-                if (result.customTextures) {
-                    customTextures = result.customTextures;
-                    Object.entries(customTextures).forEach(([slot, dataUrl]) => {
-                        const newTexture = loadTexture(dataUrl);
-                        const uniformName = slot + 'Texture';
-                        if (terrainMaterial.uniforms[uniformName]) {
-                            terrainMaterial.uniforms[uniformName].value.dispose();
-                            terrainMaterial.uniforms[uniformName].value = newTexture;
-                        }
-                    });
-                }
-                if (result.customNormalMaps) {
-                    customNormalMaps = result.customNormalMaps;
-                    Object.entries(customNormalMaps).forEach(([slot, dataUrl]) => {
-                        const newNormalMap = loadTexture(dataUrl);
-                        const uniformName = slot + 'NormalMap';
-                        if (terrainMaterial.uniforms[uniformName]) {
-                            terrainMaterial.uniforms[uniformName].value.dispose();
-                            terrainMaterial.uniforms[uniformName].value = newNormalMap;
-                        }
-                    });
-                }
-                terrainMaterial.needsUpdate = true;
-                updateTextureUIAfterLoad(result);
-                updateChunks();
-
+                clearLevel();
+                Object.assign(levelData, result.data);
+                updateLevelGeometry();
                 document.getElementById('project-name').value = projectName;
 
             } catch (error) {
@@ -1380,15 +606,12 @@ EDITOR_TEMPLATE = '''
 
         const moveDirection = new THREE.Vector3();
         function updatePlayer(deltaTime) {
-            if (terrainMeshes.length === 0) return;
-        
-            const speedDelta = deltaTime * playerSpeed;
-            
+            const speed = playerSpeed * deltaTime;
             moveDirection.set(0,0,0);
-            if (keyStates['KeyW']) moveDirection.z -= 1;
-            if (keyStates['KeyS']) moveDirection.z += 1;
-            if (keyStates['KeyA']) moveDirection.x -= 1;
-            if (keyStates['KeyD']) moveDirection.x += 1;
+            if (keyStates['KeyW'] || keyStates['ArrowUp']) moveDirection.z -= 1;
+            if (keyStates['KeyS'] || keyStates['ArrowDown']) moveDirection.z += 1;
+            if (keyStates['KeyA'] || keyStates['ArrowLeft']) moveDirection.x -= 1;
+            if (keyStates['KeyD'] || keyStates['ArrowRight']) moveDirection.x += 1;
 
             if (joystick.active) {
                 const maxRadius = 60;
@@ -1396,35 +619,53 @@ EDITOR_TEMPLATE = '''
                 moveDirection.z += joystick.vector.y / maxRadius;
             }
 
-            if(moveDirection.lengthSq() > 0) {
-                moveDirection.normalize();
-                moveDirection.applyAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 4);
-                player.position.addScaledVector(moveDirection, speedDelta);
-            }
+            if (moveDirection.lengthSq() === 0) return;
+            moveDirection.normalize().multiplyScalar(speed);
             
-            raycaster.set(new THREE.Vector3(player.position.x, 100, player.position.z), new THREE.Vector3(0, -1, 0));
-            const intersects = raycaster.intersectObjects(terrainMeshes);
-            if (intersects.length > 0) {
-                const groundHeight = intersects[0].point.y;
-                player.position.y = groundHeight + 1.5;
+            const playerBox = new THREE.Box3().setFromObject(player);
+            
+            const intendedXPos = player.position.clone().add(new THREE.Vector3(moveDirection.x, 0, 0));
+            const playerBoxX = playerBox.clone().translate(new THREE.Vector3(moveDirection.x, 0, 0));
+            let collisionX = false;
+            for(const wallBox of wallBBoxes) {
+                if (playerBoxX.intersectsBox(wallBox)) {
+                    collisionX = true;
+                    break;
+                }
             }
+            if(!collisionX) player.position.x = intendedXPos.x;
+
+            const intendedZPos = player.position.clone().add(new THREE.Vector3(0, 0, moveDirection.z));
+            const playerBoxZ = playerBox.clone().translate(new THREE.Vector3(0, 0, moveDirection.z));
+             let collisionZ = false;
+            for(const wallBox of wallBBoxes) {
+                if (playerBoxZ.intersectsBox(wallBox)) {
+                    collisionZ = true;
+                    break;
+                }
+            }
+            if(!collisionZ) player.position.z = intendedZPos.z;
 
-            camera.position.copy(player.position).add(cameraOffset);
+            camera.position.x = player.position.x + 15;
+            camera.position.z = player.position.z + 15;
+            camera.position.y = 20;
             camera.lookAt(player.position);
         }
 
+        function showSpinner(show) {
+            document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
+        }
+
         function animate() {
             requestAnimationFrame(animate);
             const deltaTime = clock.getDelta();
             
-            updateChunks();
-
             if (isPlayMode) {
                 updatePlayer(deltaTime);
             } else {
                 orbitControls.update();
             }
-            composer.render();
+            renderer.render(scene, camera);
         }
 
         init();
@@ -1457,7 +698,7 @@ def save_project_api():
     if success:
         return jsonify({"message": "Project saved successfully"}), 201
     else:
-        return jsonify({"error": "Failed to upload project to Hugging Face Hub"}), 500
+        return jsonify({"error": "Failed to upload project"}), 500
 
 @app.route('/api/project/<project_name>', methods=['GET'])
 def load_project_api(project_name):