Testais2

Sleeping

App Files Files Community

Kgshop commited on Aug 18, 2025

Commit

a9289e8

verified ·

1 Parent(s): 1727a09

Update app.py

Browse files

Files changed (1) hide show

app.py +365 -308

app.py CHANGED Viewed

@@ -97,7 +97,7 @@ EDITOR_TEMPLATE = '''
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>3D Level Designer</title>
     <style>
-        body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
         canvas { display: block; }
         #ui-panel {
             position: absolute;
@@ -105,31 +105,47 @@ EDITOR_TEMPLATE = '''
             left: 10px;
             background: rgba(20, 20, 25, 0.85);
             backdrop-filter: blur(10px);
             padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #444;
-            width: 280px;
             max-height: calc(100vh - 20px);
             overflow-y: auto;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
         }
-        .ui-group { padding: 10px; border: 1px solid #333; border-radius: 6px; }
-        h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1em; color: #00aaff; border-bottom: 1px solid #444; padding-bottom: 8px;}
-        label { display: block; margin-bottom: 5px; font-size: 0.9em; }
-        input, select, button { width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555; color: white; border-radius: 4px; font-family: inherit; font-size: 1em; }
-        button { background: #0077cc; border: none; cursor: pointer; font-weight: bold; margin-top: 10px; transition: background-color 0.2s; }
         button:hover { background: #0099ff; }
-        button.active { background: #00aaff; box-shadow: 0 0 8px #00aaff; }
         .slider-container { margin-top: 10px; }
-        input[type="range"] { padding: 0; }
-        .tool-selection, .texture-selection, .foliage-selection { display: flex; flex-wrap: wrap; gap: 8px; }
-        .tool-selection button, .texture-selection button, .foliage-selection button { width: auto; flex-grow: 1; margin-top: 0; }
-        #loading-spinner { position: fixed; 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; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @media (max-width: 768px) {
-            #ui-panel { width: calc(100% - 20px); max-height: 50vh; }
         }
     </style>
 </head>
@@ -160,131 +176,130 @@ EDITOR_TEMPLATE = '''
         </div>
         <div class="ui-group">
-            <h3>Инструменты</h3>
-            <div class="tool-selection">
-                <button id="tool-sculpt" class="active">Лепка</button>
-                <button id="tool-paint">Рисовать</button>
-                <button id="tool-foliage">Объекты</button>
             </div>
         </div>
-        <div id="sculpt-settings" class="ui-group">
-            <h3>Настройки лепки</h3>
-            <div>
-                <label><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
-                <label><input type="radio" name="brush-mode" value="lower"> Опустить</label>
-            </div>
-            <div class="slider-container">
-                <label for="brush-strength">Сила: <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 id="paint-settings" class="ui-group" style="display: none;">
-            <h3>Текстуры</h3>
-            <div class="texture-selection">
-                <button class="texture-btn" data-texture-id="0">Трава</button>
-                <button class="texture-btn" data-texture-id="1">Земля</button>
-                <button class="texture-btn" data-texture-id="2">Камни</button>
-                <button class="texture-btn" data-texture-id="3">Песок</button>
             </div>
         </div>
-        <div id="foliage-settings" class="ui-group" style="display: none;">
-            <h3>Растительность</h3>
-             <div class="foliage-selection">
-                <button class="foliage-btn" data-foliage-type="grass">Трава</button>
-            </div>
-            <div class="slider-container">
-                <label for="foliage-density">Плотность: <span id="foliage-density-value">5</span></label>
-                <input type="range" id="foliage-density" min="1" max="20" step="1" value="5">
-            </div>
-             <div class="slider-container">
-                <label for="foliage-scale">Масштаб: <span id="foliage-scale-value">1</span></label>
-                <input type="range" id="foliage-scale" min="0.5" max="3" step="0.1" value="1">
             </div>
         </div>
         <div class="ui-group">
-            <h3>Кисть</h3>
             <div class="slider-container">
                 <label for="brush-size">Размер: <span id="brush-size-value">10</span></label>
                 <input type="range" id="brush-size" min="1" max="50" value="10">
             </div>
         </div>
     </div>
     <div id="loading-spinner"></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/" } }
     </script>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        let scene, camera, renderer, controls, terrainMesh, brushHelper;
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
-        let isSculpting = false;
-        let terrainDimensions = { width: 100, height: 100, segmentsX: 100, segmentsY: 100 };
-        let currentTool = 'sculpt';
-        let selectedTextureId = 0;
-        let selectedFoliageType = 'grass';
-        let terrainTextures = [];
-        let splatMap, splatMapTexture;
-        const foliage = {};
-        const MAX_FOLIAGE_INSTANCES = 50000;
         const vertexShader = `
             varying vec2 vUv;
-            varying vec3 vNormal;
-            varying vec3 vWorldPosition;
             void main() {
                 vUv = uv;
-                vNormal = normalMatrix * normal;
-                vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-                vWorldPosition = worldPosition.xyz;
-                gl_Position = projectionMatrix * viewMatrix * worldPosition;
             }
         `;
         const fragmentShader = `
-            uniform sampler2D uSplatMap;
-            uniform sampler2D uTexture1; // Grass
-            uniform sampler2D uTexture2; // Dirt
-            uniform sampler2D uTexture3; // Rock
-            uniform sampler2D uTexture4; // Sand
             varying vec2 vUv;
-            varying vec3 vNormal;
-            varying vec3 vWorldPosition;
             void main() {
-                vec4 splatWeights = texture2D(uSplatMap, vUv);
-                vec2 textureScale = vec2(30.0, 30.0);
-                vec4 tex1 = texture2D(uTexture1, vUv * textureScale);
-                vec4 tex2 = texture2D(uTexture2, vUv * textureScale);
-                vec4 tex3 = texture2D(uTexture3, vUv * textureScale);
-                vec4 tex4 = texture2D(uTexture4, vUv * textureScale);
-                vec4 finalColor = tex1 * splatWeights.r + tex2 * splatWeights.g + tex3 * splatWeights.b + tex4 * splatWeights.a;
-                vec3 lightDirection = normalize(vec3(1.0, 1.0, 0.5));
-                float diffuse = max(0.0, dot(normalize(vNormal), lightDirection)) * 0.7 + 0.3;
-                gl_FragColor = vec4(finalColor.rgb * diffuse, 1.0);
             }
         `;
         function init() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87ceeb);
-            scene.fog = new THREE.Fog(0x87ceeb, 200, 500);
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
             camera.position.set(50, 50, 50);
@@ -297,7 +312,7 @@ EDITOR_TEMPLATE = '''
             controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
-            controls.maxPolarAngle = Math.PI / 2.1;
             const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.5);
             hemiLight.position.set(0, 200, 0);
@@ -314,65 +329,43 @@ EDITOR_TEMPLATE = '''
             dirLight.shadow.mapSize.height = 2048;
             scene.add(dirLight);
-            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);
-            loadTextures();
-            createFoliageAssets();
             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; });
             setupUIListeners();
             animate();
         }
-        function generateTexture(color1, color2, size = 256) {
-            const canvas = document.createElement('canvas');
-            canvas.width = size;
-            canvas.height = size;
-            const context = canvas.getContext('2d');
-            context.fillStyle = color1;
-            context.fillRect(0, 0, size, size);
-            for (let i = 0; i < size * size / 4; i++) {
-                context.fillStyle = `rgba(${color2.r}, ${color2.g}, ${color2.b}, ${Math.random() * 0.5})`;
-                context.fillRect(Math.random() * size, Math.random() * size, 2, 2);
-            }
-            return new THREE.CanvasTexture(canvas);
-        }
-        function loadTextures() {
-            terrainTextures.push(generateTexture('#3A5F0B', {r: 60, g: 120, b: 20})); // Grass
-            terrainTextures.push(generateTexture('#654321', {r: 139, g: 69, b: 19})); // Dirt
-            terrainTextures.push(generateTexture('#808080', {r: 105, g: 105, b: 105})); // Rock
-            terrainTextures.push(generateTexture('#FADDAA', {r: 245, g: 222, b: 179})); // Sand
-            terrainTextures.forEach(t => {
-                t.wrapS = THREE.RepeatWrapping;
-                t.wrapT = THREE.RepeatWrapping;
-            });
-        }
-        function createFoliageAssets() {
-            const grassMaterial = new THREE.MeshBasicMaterial({ color: 0x339933, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
-            const planeGeom = new THREE.PlaneGeometry(1, 1);
-            const grassBlade1 = new THREE.Mesh(planeGeom, grassMaterial);
-            const grassBlade2 = grassBlade1.clone();
-            grassBlade2.rotation.y = Math.PI / 2;
-            const grassGeom = new THREE.BufferGeometry().copy(grassBlade1.geometry).merge(grassBlade2.geometry, grassBlade2.matrix);
-            foliage['grass'] = {
-                geometry: grassGeom,
-                material: grassMaterial,
-                mesh: new THREE.InstancedMesh(grassGeom, grassMaterial, MAX_FOLIAGE_INSTANCES)
-            };
-            foliage['grass'].mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
-            scene.add(foliage['grass'].mesh);
         }
         function setupUIListeners() {
@@ -380,107 +373,135 @@ EDITOR_TEMPLATE = '''
                 const width = parseInt(document.getElementById('terrain-width').value);
                 const height = parseInt(document.getElementById('terrain-height').value);
                 createTerrain(width, height);
-                clearFoliage();
             });
             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('foliage-density').addEventListener('input', (e) => document.getElementById('foliage-density-value').textContent = e.target.value);
-            document.getElementById('foliage-scale').addEventListener('input', (e) => document.getElementById('foliage-scale-value').textContent = e.target.value);
-            document.getElementById('project-list').addEventListener('change', (e) => document.getElementById('project-name').value = e.target.value);
-            document.querySelectorAll('.tool-selection button').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    document.querySelector('.tool-selection button.active').classList.remove('active');
-                    e.target.classList.add('active');
-                    currentTool = e.target.id.replace('tool-', '');
-                    updateUIToTool();
-                });
             });
-            document.querySelectorAll('.texture-btn').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    selectedTextureId = parseInt(e.target.dataset.textureId);
-                    console.log(`Texture selected: ${selectedTextureId}`);
-                });
             });
-             document.querySelectorAll('.foliage-btn').forEach(btn => {
-                btn.addEventListener('click', (e) => {
-                    selectedFoliageType = e.target.dataset.foliageType;
                 });
             });
         }
-        function updateUIToTool() {
-            document.getElementById('sculpt-settings').style.display = currentTool === 'sculpt' ? 'block' : 'none';
-            document.getElementById('paint-settings').style.display = currentTool === 'paint' ? 'block' : 'none';
-            document.getElementById('foliage-settings').style.display = currentTool === 'foliage' ? 'block' : 'none';
         }
-        function showSpinner(show) { document.getElementById('loading-spinner').style.display = show ? 'block' : 'none'; }
-        function createTerrain(width, height, heightData = null, splatData = null) {
-            if (terrainMesh) { scene.remove(terrainMesh); terrainMesh.geometry.dispose(); terrainMesh.material.dispose(); }
-            terrainDimensions = { width, height, segmentsX: Math.max(1, Math.round(width)), segmentsY: Math.max(1, Math.round(height)) };
-            const geometry = new THREE.PlaneGeometry(width, height, terrainDimensions.segmentsX, terrainDimensions.segmentsY);
             geometry.rotateX(-Math.PI / 2);
             const positions = geometry.attributes.position;
-            if (heightData) {
-                for (let i = 0; i < positions.count; i++) positions.setY(i, heightData[i]);
             }
-            splatMap = new Uint8Array(4 * (terrainDimensions.segmentsX + 1) * (terrainDimensions.segmentsY + 1));
-            if (splatData) {
-                splatMap.set(splatData);
             } else {
-                for (let i = 0; i < splatMap.length; i += 4) {
-                    splatMap[i] = 255; // Default to grass
-                    splatMap[i+1] = 0; splatMap[i+2] = 0; splatMap[i+3] = 0;
                 }
             }
-            splatMapTexture = new THREE.DataTexture(splatMap, terrainDimensions.segmentsX + 1, terrainDimensions.segmentsY + 1, THREE.RGBAFormat);
-            splatMapTexture.needsUpdate = true;
             const material = new THREE.ShaderMaterial({
-                vertexShader,
-                fragmentShader,
                 uniforms: {
-                    uSplatMap: { value: splatMapTexture },
-                    uTexture1: { value: terrainTextures[0] },
-                    uTexture2: { value: terrainTextures[1] },
-                    uTexture3: { value: terrainTextures[2] },
-                    uTexture4: { value: terrainTextures[3] },
-                }
             });
             terrainMesh = new THREE.Mesh(geometry, material);
             terrainMesh.castShadow = true;
             terrainMesh.receiveShadow = true;
             scene.add(terrainMesh);
             geometry.computeVertexNormals();
         }
         function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
         function onPointerMove(event) {
-            const rect = renderer.domElement.getBoundingClientRect();
-            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             if (!terrainMesh) return;
@@ -488,19 +509,17 @@ EDITOR_TEMPLATE = '''
             const intersects = raycaster.intersectObject(terrainMesh);
             if (intersects.length > 0) {
-                controls.enabled = !isSculpting;
                 const intersectionPoint = intersects[0].point;
                 brushHelper.position.copy(intersectionPoint);
-                brushHelper.position.y = 0;
                 brushHelper.visible = true;
                 updateBrushHelper();
-                if (isSculpting) {
-                   applyTool(intersectionPoint);
                 }
             } else {
                 brushHelper.visible = false;
-                controls.enabled = true;
             }
         }
@@ -510,173 +529,210 @@ EDITOR_TEMPLATE = '''
         }
         function onPointerDown(event) {
-            if (event.button === 0) { isSculpting = true; }
-            const intersects = raycaster.intersectObject(terrainMesh);
-            if (intersects.length > 0 && currentTool === 'foliage') {
-                 applyTool(intersects[0].point);
-            }
         }
         function onPointerUp(event) {
-            if (event.button === 0) { isSculpting = false; controls.enabled = true; }
         }
-        function applyTool(center) {
-            switch(currentTool) {
                 case 'sculpt': sculptTerrain(center); break;
-                case 'paint': paintTerrain(center); break;
-                case 'foliage': placeFoliage(center); break;
             }
         }
         function sculptTerrain(center) {
-            if (!terrainMesh) return;
             const positions = terrainMesh.geometry.attributes.position;
             const brushSize = parseFloat(document.getElementById('brush-size').value);
             const brushStrength = parseFloat(document.getElementById('brush-strength').value);
-            const brushMode = document.querySelector('input[name="brush-mode"]:checked').value;
-            const direction = (brushMode === 'raise') ? 1 : -1;
             const vertex = new THREE.Vector3();
             for (let i = 0; i < positions.count; i++) {
                 vertex.fromBufferAttribute(positions, i);
-                const distance = Math.sqrt(Math.pow(vertex.x - center.x, 2) + Math.pow(vertex.z - center.z, 2));
                 if (distance < brushSize) {
-                    const falloff = Math.pow(1 - (distance / brushSize), 2);
-                    positions.setY(i, positions.getY(i) + direction * falloff * brushStrength);
                 }
             }
             positions.needsUpdate = true;
             terrainMesh.geometry.computeVertexNormals();
         }
-        function paintTerrain(center) {
-             if (!terrainMesh) return;
-            const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const positions = terrainMesh.geometry.attributes.position;
-            const vertex = new THREE.Vector3();
-            const segmentsX = terrainDimensions.segmentsX;
-            let needsUpdate = false;
-            for (let i = 0; i < positions.count; i++) {
-                vertex.fromBufferAttribute(positions, i);
-                const distance = Math.sqrt(Math.pow(vertex.x - center.x, 2) + Math.pow(vertex.z - center.z, 2));
-                if (distance < brushSize) {
-                    const index = i * 4;
-                    for (let j=0; j<4; j++) { splatMap[index + j] = (j === selectedTextureId) ? 255 : 0; }
-                    needsUpdate = true;
                 }
             }
-            if(needsUpdate) splatMapTexture.needsUpdate = true;
         }
-        function placeFoliage(center) {
             const brushSize = parseFloat(document.getElementById('brush-size').value);
-            const density = parseInt(document.getElementById('foliage-density').value);
-            const scale = parseFloat(document.getElementById('foliage-scale').value);
-            const asset = foliage[selectedFoliageType];
-            if (!asset || asset.mesh.count >= MAX_FOLIAGE_INSTANCES) return;
-            const dummy = new THREE.Object3D();
-            const raycasterDown = new THREE.Raycaster();
-            const down = new THREE.Vector3(0, -1, 0);
-            for (let i = 0; i < density; i++) {
-                if (asset.mesh.count >= MAX_FOLIAGE_INSTANCES) break;
-                const angle = Math.random() * 2 * Math.PI;
-                const radius = Math.random() * brushSize;
-                const x = center.x + radius * Math.cos(angle);
-                const z = center.z + radius * Math.sin(angle);
-                raycasterDown.set(new THREE.Vector3(x, 50, z), down);
-                const intersects = raycasterDown.intersectObject(terrainMesh);
                 if (intersects.length > 0) {
-                    dummy.position.copy(intersects[0].point);
-                    dummy.rotation.y = Math.random() * Math.PI * 2;
-                    const randomScale = scale * (0.8 + Math.random() * 0.4);
-                    dummy.scale.set(randomScale, randomScale, randomScale);
-                    dummy.updateMatrix();
-                    asset.mesh.setMatrixAt(asset.mesh.count++, dummy.matrix);
                 }
             }
-            asset.mesh.instanceMatrix.needsUpdate = true;
         }
-        function clearFoliage() {
-            for(const type in foliage) {
-                foliage[type].mesh.count = 0;
-                foliage[type].mesh.instanceMatrix.needsUpdate = true;
             }
         }
         async function saveProject() {
             const projectName = document.getElementById('project-name').value.trim();
-            if (!projectName || !terrainMesh) { alert("Введите имя проекта и создайте ландшафт."); return; }
             showSpinner(true);
             const positions = terrainMesh.geometry.attributes.position;
-            const heightData = Array.from(positions.array).filter((_, i) => i % 3 === 1);
-            const foliageData = {};
-            for(const type in foliage) {
-                const mesh = foliage[type].mesh;
-                foliageData[type] = Array.from(mesh.instanceMatrix.array.slice(0, mesh.count * 16));
-            }
             const projectData = {
                 name: projectName,
                 width: terrainDimensions.width,
                 height: terrainDimensions.height,
                 heightData: heightData,
-                splatMapData: Array.from(splatMap),
-                foliageData: foliageData
             };
             try {
-                const response = await fetch('/api/project', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(projectData) });
-                if (!response.ok) throw new Error((await response.json()).error || 'Ошибка сохранения.');
                 alert(`Проект '${projectName}' успешно сохранен!`);
                 const projectList = document.getElementById('project-list');
-                if (!Array.from(projectList.options).some(opt => opt.value === projectName)) {
-                    const newOption = new Option(projectName, projectName);
-                    projectList.add(newOption);
                 }
-            } catch (error) { alert(`Не удалось сохранить проект: ${error.message}`); } finally { 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}`);
-                if (!response.ok) throw new Error((await response.json()).error || 'Ошибка загрузки.');
                 const result = await response.json();
                 document.getElementById('project-name').value = projectName;
                 document.getElementById('terrain-width').value = result.width;
                 document.getElementById('terrain-height').value = result.height;
-                createTerrain(result.width, result.height, result.heightData, result.splatMapData);
-                clearFoliage();
-                if (result.foliageData) {
-                    for(const type in result.foliageData) {
-                        if (foliage[type]) {
-                            const mesh = foliage[type].mesh;
-                            const data = new Float32Array(result.foliageData[type]);
-                            mesh.instanceMatrix.set(data);
-                            mesh.count = data.length / 16;
-                            mesh.instanceMatrix.needsUpdate = true;
-                        }
-                    }
-                }
-            } catch (error) { alert(`Не удалось загрузить проект: ${error.message}`); } finally { showSpinner(false); }
         }
         function animate() {
@@ -687,6 +743,7 @@ EDITOR_TEMPLATE = '''
         init();
         createTerrain(100, 100);
     </script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>3D Level Designer</title>
     <style>
+        body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
         canvas { display: block; }
         #ui-panel {
             position: absolute;
             left: 10px;
             background: rgba(20, 20, 25, 0.85);
             backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             padding: 15px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            width: 300px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
             max-height: calc(100vh - 20px);
             overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: #555 #333;
+        }
+        .ui-group { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #333; }
+        .ui-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
+        h3 { margin-top: 0; font-size: 1.1em; color: #00aaff; letter-spacing: 0.5px; }
+        label { display: block; margin-bottom: 5px; font-size: 0.9em; color: #ccc; }
+        input[type="number"], input[type="text"], select {
+            width: 100%; padding: 8px; box-sizing: border-box; background: #2a2a30; border: 1px solid #555; color: white; border-radius: 4px; appearance: none;
+        }
+        button {
+            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; }
         .slider-container { margin-top: 10px; }
+        input[type="range"] { width: 100%; }
+        .radio-group { display: flex; flex-wrap: wrap; gap: 10px; }
+        .radio-group label { display: flex; align-items: center; cursor: pointer; padding: 5px 10px; background: #333; border-radius: 20px; transition: background-color 0.2s; }
+        .radio-group input[type="radio"] { display: none; }
+        .radio-group input[type="radio"]:checked + span { color: #00aaff; }
+        .radio-group label:hover { background: #444; }
+        .texture-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
+        .texture-grid label { flex-direction: column; align-items: center; text-align: center; background: #2a2a30; border: 2px solid #555; border-radius: 8px; padding: 8px; }
+        .texture-grid img { width: 50px; height: 50px; border-radius: 4px; margin-bottom: 5px; image-rendering: pixelated; }
+        .texture-grid input[type="radio"]:checked + img + span { color: #00aaff; font-weight: bold; }
+        #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;
+        }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @media (max-width: 768px) {
+            #ui-panel { width: calc(100% - 20px); max-height: 45vh; top: auto; bottom: 10px; }
+            h3 { font-size: 1em; }
+            button { padding: 12px; }
         }
     </style>
 </head>
         </div>
         <div class="ui-group">
+            <h3>Кисть</h3>
+            <label>Режим:</label>
+            <div class="radio-group" id="brush-main-mode-container">
+                <label><input type="radio" name="brush-main-mode" value="sculpt" checked><span>Скульпт</span></label>
+                <label><input type="radio" name="brush-main-mode" value="paint"><span>Текстура</span></label>
+                <label><input type="radio" name="brush-main-mode" value="foliage"><span>Растительность</span></label>
             </div>
         </div>
+        <div id="sculpt-options" class="ui-group">
+            <label>Скульпт:</label>
+            <div class="radio-group" id="brush-sculpt-mode-container">
+                <label><input type="radio" name="brush-sculpt-mode" value="raise" checked><span>Поднять</span></label>
+                <label><input type="radio" name="brush-sculpt-mode" value="lower"><span>Опустить</span></label>
             </div>
         </div>
+        <div id="paint-options" class="ui-group" style="display: none;">
+            <label>Текстура:</label>
+            <div class="texture-grid" id="brush-paint-mode-container">
+                <label><input type="radio" name="brush-paint-mode" value="0" checked>
+                    <img src="https://threejs.org/examples/textures/terrain/grasslight-big.jpg" alt="Grass"><span>Трава</span></label>
+                <label><input type="radio" name="brush-paint-mode" value="1">
+                    <img src="https://threejs.org/examples/textures/terrain/sand-512.jpg" alt="Sand"><span>Песок</span></label>
+                <label><input type="radio" name="brush-paint-mode" value="2">
+                    <img src="https://threejs.org/examples/textures/terrain/rock-512.jpg" alt="Rock"><span>Скала</span></label>
+                <label><input type="radio" name="brush-paint-mode" value="3">
+                    <img src="https://threejs.org/examples/textures/terrain/dirt-512.jpg" alt="Dirt"><span>Земля</span></label>
             </div>
         </div>
+        <div id="foliage-options" class="ui-group" style="display: none;">
+            <label>Растительность:</label>
+             <div class="radio-group" id="brush-foliage-mode-container">
+                <label><input type="radio" name="brush-foliage-mode" value="add" checked><span>Добавить</span></label>
+                <label><input type="radio" name="brush-foliage-mode" value="remove"><span>Удалить</span></label>
             </div>
         </div>
         <div class="ui-group">
+            <h3>Настройки кисти</h3>
             <div class="slider-container">
                 <label for="brush-size">Размер: <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">Сила: <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>
     <div id="loading-spinner"></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/"
+        }
+    }
     </script>
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        let scene, camera, renderer, controls, terrainMesh, brushHelper, foliageMesh;
         let raycaster = new THREE.Raycaster();
         let mouse = new THREE.Vector2();
+        let isInteracting = false;
+        const terrainDimensions = { width: 100, height: 100, segmentsX: 100, segmentsY: 100 };
+        const MAX_FOLIAGE = 50000;
+        let foliageInstanceData = [];
+        const textureLoader = new THREE.TextureLoader();
+        const textures = {
+            grass: textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big.jpg'),
+            sand: textureLoader.load('https://threejs.org/examples/textures/terrain/sand-512.jpg'),
+            rock: textureLoader.load('https://threejs.org/examples/textures/terrain/rock-512.jpg'),
+            dirt: textureLoader.load('https://threejs.org/examples/textures/terrain/dirt-512.jpg'),
+        };
+        for (const key in textures) {
+            textures[key].wrapS = textures[key].wrapT = THREE.RepeatWrapping;
+        }
         const vertexShader = `
             varying vec2 vUv;
             void main() {
                 vUv = uv;
+                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
             }
         `;
         const fragmentShader = `
+            uniform sampler2D grassTexture;
+            uniform sampler2D sandTexture;
+            uniform sampler2D rockTexture;
+            uniform sampler2D dirtTexture;
+            uniform sampler2D splatMap;
+            uniform float textureRepeat;
             varying vec2 vUv;
             void main() {
+                vec4 splat = texture2D(splatMap, vUv);
+                vec2 repeatedUv = vUv * textureRepeat;
+                vec4 grassColor = texture2D(grassTexture, repeatedUv);
+                vec4 sandColor = texture2D(sandTexture, repeatedUv);
+                vec4 rockColor = texture2D(rockTexture, repeatedUv);
+                vec4 dirtColor = texture2D(dirtTexture, repeatedUv);
+                vec4 finalColor = grassColor * splat.r;
+                finalColor = mix(finalColor, sandColor, splat.g);
+                finalColor = mix(finalColor, rockColor, splat.b);
+                finalColor = mix(finalColor, dirtColor, splat.a);
+                gl_FragColor = finalColor;
             }
         `;
         function init() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87ceeb);
+            scene.fog = new THREE.Fog(0x87ceeb, 200, 600);
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
             camera.position.set(50, 50, 50);
             controls = new OrbitControls(camera, renderer.domElement);
             controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
             const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1.5);
             hemiLight.position.set(0, 200, 0);
             dirLight.shadow.mapSize.height = 2048;
             scene.add(dirLight);
+            const brushGeometry = new THREE.CylinderGeometry(1, 1, 200, 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);
+            setupFoliage();
             window.addEventListener('resize', onWindowResize);
+            renderer.domElement.addEventListener('pointermove', onPointerMove, false);
+            renderer.domElement.addEventListener('pointerdown', onPointerDown, false);
+            renderer.domElement.addEventListener('pointerup', onPointerUp, false);
+            renderer.domElement.addEventListener('pointerout', () => { brushHelper.visible = false; isInteracting = false; });
             setupUIListeners();
             animate();
         }
+        function setupFoliage() {
+            const grassBlade = new THREE.PlaneGeometry(0.5, 2, 1, 3);
+            grassBlade.translate(0, 1, 0);
+            const pos = grassBlade.attributes.position;
+            for(let i=0; i < pos.count; i++) {
+                const y = pos.getY(i);
+                pos.setX(i, pos.getX(i) + Math.sin(y * Math.PI) * 0.2);
+            }
+            grassBlade.computeVertexNormals();
+            const grassMaterial = new THREE.MeshStandardMaterial({
+                color: 0x339922,
+                side: THREE.DoubleSide,
+                roughness: 0.8
+            });
+            foliageMesh = new THREE.InstancedMesh(grassBlade, grassMaterial, MAX_FOLIAGE);
+            foliageMesh.castShadow = true;
+            foliageMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+            scene.add(foliageMesh);
         }
         function setupUIListeners() {
                 const width = parseInt(document.getElementById('terrain-width').value);
                 const height = parseInt(document.getElementById('terrain-height').value);
                 createTerrain(width, height);
             });
             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.querySelectorAll('input[name="brush-main-mode"]').forEach(radio => {
+                radio.addEventListener('change', (e) => {
+                    document.getElementById('sculpt-options').style.display = 'none';
+                    document.getElementById('paint-options').style.display = 'none';
+                    document.getElementById('foliage-options').style.display = 'none';
+                    document.getElementById(`${e.target.value}-options`).style.display = 'block';
                 });
             });
         }
+        function showSpinner(show) {
+            document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
         }
+        function createTerrain(width, height, heightData = null, splatMapData = null) {
+            if (terrainMesh) {
+                scene.remove(terrainMesh);
+                terrainMesh.geometry.dispose();
+                terrainMesh.material.dispose();
+            }
+            terrainDimensions.width = width;
+            terrainDimensions.height = height;
+            terrainDimensions.segmentsX = Math.max(1, Math.round(width));
+            terrainDimensions.segmentsY = Math.max(1, Math.round(height));
+            const geometry = new THREE.PlaneGeometry(
+                terrainDimensions.width,
+                terrainDimensions.height,
+                terrainDimensions.segmentsX,
+                terrainDimensions.segmentsY
+            );
             geometry.rotateX(-Math.PI / 2);
             const positions = geometry.attributes.position;
+            if (heightData && heightData.length === positions.count) {
+                for (let i = 0; i < positions.count; i++) {
+                    positions.setY(i, heightData[i]);
+                }
             }
+            const splatMapWidth = terrainDimensions.segmentsX + 1;
+            const splatMapHeight = terrainDimensions.segmentsY + 1;
+            let splatData;
+            if (splatMapData && splatMapData.length === splatMapWidth * splatMapHeight * 4) {
+                 splatData = new Uint8Array(splatMapData);
             } else {
+                 splatData = new Uint8Array(splatMapWidth * splatMapHeight * 4);
+                 for (let i = 0; i < splatData.length; i += 4) {
+                    splatData[i] = 255; // R channel (grass)
+                    splatData[i + 1] = 0; // G
+                    splatData[i + 2] = 0; // B
+                    splatData[i + 3] = 0; // A
                 }
             }
+            const splatMap = new THREE.DataTexture(splatData, splatMapWidth, splatMapHeight, THREE.RGBAFormat);
+            splatMap.needsUpdate = true;
             const material = new THREE.ShaderMaterial({
                 uniforms: {
+                    grassTexture: { value: textures.grass },
+                    sandTexture: { value: textures.sand },
+                    rockTexture: { value: textures.rock },
+                    dirtTexture: { value: textures.dirt },
+                    splatMap: { value: splatMap },
+                    textureRepeat: { value: width / 10 },
+                },
+                vertexShader: vertexShader,
+                fragmentShader: fragmentShader,
             });
             terrainMesh = new THREE.Mesh(geometry, material);
             terrainMesh.castShadow = true;
             terrainMesh.receiveShadow = true;
             scene.add(terrainMesh);
             geometry.computeVertexNormals();
         }
+        function updateFoliage(data) {
+            foliageInstanceData = data || [];
+            const dummy = new THREE.Object3D();
+            for(let i=0; i < MAX_FOLIAGE; i++) {
+                if (i < foliageInstanceData.length) {
+                    dummy.matrix.fromArray(foliageInstanceData[i]);
+                    dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
+                } else {
+                    dummy.scale.set(0,0,0);
+                }
+                dummy.updateMatrix();
+                foliageMesh.setMatrixAt(i, dummy.matrix);
+            }
+            foliageMesh.instanceMatrix.needsUpdate = true;
+            foliageMesh.count = foliageInstanceData.length;
+        }
         function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
+        function getPointer( event ) {
+            if (event.touches) {
+                return { x: event.touches[0].clientX, y: event.touches[0].clientY };
+            }
+            return { x: event.clientX, y: event.clientY };
+        }
         function onPointerMove(event) {
+            const pointer = getPointer(event);
+            mouse.x = (pointer.x / window.innerWidth) * 2 - 1;
+            mouse.y = -(pointer.y / window.innerHeight) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             if (!terrainMesh) return;
             const intersects = raycaster.intersectObject(terrainMesh);
             if (intersects.length > 0) {
                 const intersectionPoint = intersects[0].point;
                 brushHelper.position.copy(intersectionPoint);
+                brushHelper.position.y = -100;
                 brushHelper.visible = true;
                 updateBrushHelper();
+                if (isInteracting) {
+                    modifyTerrain(intersectionPoint, intersects[0].face.normal, intersects[0].uv);
                 }
             } else {
                 brushHelper.visible = false;
             }
         }
         }
         function onPointerDown(event) {
+            event.preventDefault();
+            if (event.button === 0 || event.touches) { isInteracting = true; }
+            onPointerMove(event);
         }
         function onPointerUp(event) {
+            isInteracting = false;
         }
+        function modifyTerrain(center, normal, uv) {
+            if (!terrainMesh) return;
+            const mainMode = document.querySelector('input[name="brush-main-mode"]:checked').value;
+            switch(mainMode) {
                 case 'sculpt': sculptTerrain(center); break;
+                case 'paint': paintTerrain(uv); break;
+                case 'foliage': manageFoliage(center, normal); break;
             }
         }
         function sculptTerrain(center) {
             const positions = terrainMesh.geometry.attributes.position;
             const brushSize = parseFloat(document.getElementById('brush-size').value);
             const brushStrength = parseFloat(document.getElementById('brush-strength').value);
+            const sculptMode = document.querySelector('input[name="brush-sculpt-mode"]:checked').value;
+            const direction = (sculptMode === 'raise') ? 1 : -1;
             const vertex = new THREE.Vector3();
             for (let i = 0; i < positions.count; i++) {
                 vertex.fromBufferAttribute(positions, i);
+                const distance = vertex.distanceTo(center);
                 if (distance < brushSize) {
+                    const falloff = (1 - (distance / brushSize));
+                    const smoothedFalloff = falloff * falloff * (3 - 2 * falloff);
+                    let currentY = positions.getY(i);
+                    let newY = currentY + direction * smoothedFalloff * brushStrength;
+                    positions.setY(i, newY);
                 }
             }
             positions.needsUpdate = true;
             terrainMesh.geometry.computeVertexNormals();
         }
+        function paintTerrain(uv) {
+            const splatMap = terrainMesh.material.uniforms.splatMap.value;
+            const data = splatMap.image.data;
+            const width = splatMap.image.width;
+            const height = splatMap.image.height;
+            const brushSize = parseFloat(document.getElementById('brush-size').value);
+            const brushStrength = parseFloat(document.getElementById('brush-strength').value) * 25;
+            const paintMode = parseInt(document.querySelector('input[name="brush-paint-mode"]:checked').value);
+            const radius = (brushSize / terrainDimensions.width) * width;
+            const centerX = uv.x * width;
+            const centerY = uv.y * height;
+            for (let y = Math.floor(centerY - radius); y <= Math.ceil(centerY + radius); y++) {
+                for (let x = Math.floor(centerX - radius); x <= Math.ceil(centerX + radius); x++) {
+                    if (x < 0 || x >= width || y < 0 || y >= height) continue;
+                    const distance = Math.sqrt((x - centerX)**2 + (y - centerY)**2);
+                    if (distance > radius) continue;
+                    const falloff = (1 - (distance / radius));
+                    const strength = Math.min(255, falloff * brushStrength);
+                    const index = (y * width + x) * 4;
+                    let currentVal = data[index + paintMode];
+                    data[index + paintMode] = Math.min(255, currentVal + strength);
+                    let total = 0;
+                    for (let i=0; i<4; i++) total += data[index + i];
+                    if (total > 0) {
+                        for (let i=0; i<4; i++) data[index + i] = (data[index + i] / total) * 255;
+                    }
                 }
             }
+            splatMap.needsUpdate = true;
+        }
+        function manageFoliage(center, normal) {
+             const foliageMode = document.querySelector('input[name="brush-foliage-mode"]:checked').value;
+             if (foliageMode === 'add') addFoliage(center, normal);
+             else removeFoliage(center);
         }
+        function addFoliage(center, normal) {
             const brushSize = parseFloat(document.getElementById('brush-size').value);
+            const brushStrength = parseFloat(document.getElementById('brush-strength').value);
+            for (let i = 0; i < brushStrength * 2; i++) {
+                if (foliageInstanceData.length >= MAX_FOLIAGE) break;
+                const randomAngle = Math.random() * Math.PI * 2;
+                const randomRadius = Math.random() * brushSize;
+                const position = new THREE.Vector3(
+                    center.x + Math.cos(randomAngle) * randomRadius,
+                    center.y,
+                    center.z + Math.sin(randomAngle) * randomRadius
+                );
+                raycaster.set(new THREE.Vector3(position.x, 500, position.z), new THREE.Vector3(0, -1, 0));
+                const intersects = raycaster.intersectObject(terrainMesh);
                 if (intersects.length > 0) {
+                    const obj = new THREE.Object3D();
+                    obj.position.copy(intersects[0].point);
+                    obj.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), intersects[0].face.normal);
+                    obj.rotateY(Math.random() * Math.PI * 2);
+                    const scale = 0.8 + Math.random() * 0.4;
+                    obj.scale.set(scale, scale, scale);
+                    obj.updateMatrix();
+                    foliageInstanceData.push(obj.matrix.toArray());
                 }
             }
+            updateFoliage(foliageInstanceData);
         }
+        function removeFoliage(center) {
+            const brushSize = parseFloat(document.getElementById('brush-size').value);
+            const dummy = new THREE.Object3D();
+            const newFoliageData = [];
+            for(let i=0; i < foliageInstanceData.length; i++) {
+                 dummy.matrix.fromArray(foliageInstanceData[i]);
+                 dummy.matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
+                 if (dummy.position.distanceTo(center) > brushSize) {
+                     newFoliageData.push(foliageInstanceData[i]);
+                 }
             }
+            updateFoliage(newFoliageData);
         }
         async function saveProject() {
             const projectName = document.getElementById('project-name').value.trim();
+            if (!projectName) { alert("Пожалуйста, введите имя проекта."); return; }
+            if (!terrainMesh) { alert("Сначала создайте ландшафт для сохранения."); return; }
             showSpinner(true);
             const positions = terrainMesh.geometry.attributes.position;
+            const heightData = Array.from(positions.array).filter((_, i) => (i % 3) === 1);
+            const splatMap = terrainMesh.material.uniforms.splatMap.value;
+            const splatMapData = Array.from(splatMap.image.data);
             const projectData = {
                 name: projectName,
                 width: terrainDimensions.width,
                 height: terrainDimensions.height,
                 heightData: heightData,
+                splatMapData: splatMapData,
+                foliageData: foliageInstanceData
             };
             try {
+                const response = await fetch('/api/project', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(projectData)
+                });
+                const result = await response.json();
+                if (!response.ok) { throw new Error(result.error || 'Ошибка при сохранении проекта.'); }
                 alert(`Проект '${projectName}' успешно сохранен!`);
                 const projectList = document.getElementById('project-list');
+                const existingOption = Array.from(projectList.options).find(opt => opt.value === projectName);
+                if (!existingOption) {
+                    const newOption = document.createElement('option');
+                    newOption.value = projectName;
+                    newOption.textContent = projectName;
+                    projectList.appendChild(newOption);
                 }
+            } catch (error) {
+                console.error("Ошибка сохранения:", error);
+                alert(`Не удалось сохранить проект: ${error.message}`);
+            } finally {
+                showSpinner(false);
+            }
         }
         async function loadProject() {
+            const projectList = document.getElementById('project-list');
+            const projectName = projectList.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 || 'Ошибка при загрузке проекта.'); }
+                createTerrain(result.width, result.height, result.heightData, result.splatMapData);
+                updateFoliage(result.foliageData);
                 document.getElementById('project-name').value = projectName;
                 document.getElementById('terrain-width').value = result.width;
                 document.getElementById('terrain-height').value = result.height;
+            } catch (error) {
+                 console.error("Ошибка загрузки:", error);
+                alert(`Не удалось загрузить проект: ${error.message}`);
+            } finally {
+                showSpinner(false);
+            }
         }
         function animate() {
         init();
         createTerrain(100, 100);
+        updateFoliage([]);
     </script>
 </body>
 </html>