|
|
import os |
|
|
import json |
|
|
import time |
|
|
from datetime import datetime |
|
|
from uuid import uuid4 |
|
|
|
|
|
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 |
|
|
|
|
|
load_dotenv() |
|
|
|
|
|
app = Flask(__name__) |
|
|
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") |
|
|
|
|
|
def upload_project_to_hf(local_path, project_name): |
|
|
if not HF_TOKEN_WRITE: |
|
|
return False |
|
|
try: |
|
|
api = HfApi() |
|
|
api.upload_file( |
|
|
path_or_fileobj=local_path, |
|
|
path_in_repo=f"pz_projects/{project_name}.json", |
|
|
repo_id=REPO_ID, |
|
|
repo_type="dataset", |
|
|
token=HF_TOKEN_WRITE, |
|
|
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): |
|
|
token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE |
|
|
if not token_to_use: |
|
|
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 |
|
|
if not token_to_use: |
|
|
return [] |
|
|
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('pz_projects/') and f.endswith('.json')] |
|
|
return sorted(project_files) |
|
|
except Exception: |
|
|
return [] |
|
|
|
|
|
EDITOR_TEMPLATE = ''' |
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
|
|
<title>PZ Style Constructor</title> |
|
|
<style> |
|
|
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; display: flex; } |
|
|
#ui-panel { |
|
|
background: rgba(10, 10, 10, 0.85); |
|
|
backdrop-filter: blur(5px); |
|
|
padding: 15px; |
|
|
border-right: 1px solid #444; |
|
|
width: 320px; |
|
|
height: 100%; |
|
|
overflow-y: auto; |
|
|
box-sizing: border-box; |
|
|
transition: transform 0.3s ease-in-out; |
|
|
transform: translateX(0); |
|
|
pointer-events: auto; |
|
|
} |
|
|
.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.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="text"], input[type="number"], 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; transition: background-color 0.2s; |
|
|
} |
|
|
button:hover { background: #0099ff; } |
|
|
.play-button { background: #22aa22; } |
|
|
.play-button:hover { background: #33cc33; } |
|
|
.danger-button { background: #c00; } |
|
|
.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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
|
|
} |
|
|
.tool-item:hover { background: #3a3a3a; border-color: #666; } |
|
|
.tool-item.active { background: #0077cc; border-color: #00aaff; } |
|
|
.draw-mode-selector { display: flex; gap: 10px; margin-bottom: 10px; } |
|
|
.draw-mode-selector button { margin-top: 0; } |
|
|
#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: 10001; |
|
|
} |
|
|
#blocker { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; top:0; left:0; z-index: 9999; } |
|
|
#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; |
|
|
} |
|
|
#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%; } |
|
|
|
|
|
#building-modal { |
|
|
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); |
|
|
background: rgba(20, 20, 20, 0.95); |
|
|
padding: 20px; border-radius: 8px; z-index: 10000; |
|
|
border: 1px solid #555; box-shadow: 0 0 20px rgba(0,0,0,0.5); |
|
|
max-width: 90vw; max-height: 90vh; overflow-y: auto; |
|
|
} |
|
|
#building-preview-container { position: relative; cursor: crosshair; margin-bottom: 15px; } |
|
|
#building-preview-img { max-width: 100%; max-height: 60vh; display: block; } |
|
|
#building-entrance-canvas { position: absolute; top: 0; left: 0; pointer-events: none; } |
|
|
|
|
|
@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); } |
|
|
#burger-menu { display: block; } |
|
|
#joystick-container { display: none; } |
|
|
#joystick-handle { width: 50px; height: 50px; top: 25px; left: 25px; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div id="ui-container"> |
|
|
<div id="burger-menu"><span></span><span></span><span></span></div> |
|
|
<div id="ui-panel"> |
|
|
<div class="ui-group"> |
|
|
<h3>Проект</h3> |
|
|
<select id="project-list"> |
|
|
<option value="">Выберите проект...</option> |
|
|
{% for project in projects %} |
|
|
<option value="{{ project }}">{{ project }}</option> |
|
|
{% endfor %} |
|
|
</select> |
|
|
<button id="load-project">Загрузить</button> |
|
|
<hr style="border-color: #333; margin: 15px 0;"> |
|
|
<input type="text" id="project-name" placeholder="new-level-01"> |
|
|
<button id="save-project">Сохранить</button> |
|
|
</div> |
|
|
<div class="ui-group"> |
|
|
<h3>Режим</h3> |
|
|
<button id="play-mode-toggle" class="play-button">Играть</button> |
|
|
</div> |
|
|
<div class="ui-group"> |
|
|
<h3>Инструменты</h3> |
|
|
<label>Режим расстановки:</label> |
|
|
<div class="draw-mode-selector"> |
|
|
<button id="draw-mode-single" class="tool-item active">Один</button> |
|
|
<button id="draw-mode-area" class="tool-item">Область</button> |
|
|
</div> |
|
|
<div id="tool-selector" class="tool-selector"></div> |
|
|
<div id="custom-building-options" style="display:none; margin-top:10px;"> |
|
|
<label>Ширина:</label> |
|
|
<input type="number" id="building-width-input" value="10" step="0.5"> |
|
|
</div> |
|
|
<p style="font-size: 0.8em; color: #888; margin-top: 10px;"> |
|
|
ЛКМ: Разместить / Начать область<br> |
|
|
Отпустить ЛКМ: Закончить область<br> |
|
|
ПКМ: Вращать<br> |
|
|
Shift + ЛКМ: Удалить<br> |
|
|
Колесо мыши: Вращать |
|
|
</p> |
|
|
<button id="clear-level" class="danger-button">Очистить уровень</button> |
|
|
</div> |
|
|
<div class="ui-group"> |
|
|
<h3>Кастомные здания</h3> |
|
|
<button id="add-building-btn">Добавить здание</button> |
|
|
<input type="file" id="building-image-input" accept="image/png" style="display: none;"> |
|
|
<div id="custom-tools-selector" class="tool-selector" style="margin-top: 10px;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="building-modal" style="display: none;"> |
|
|
<h3>Новое здание</h3> |
|
|
<p style="font-size: 0.9em; color: #ccc;">Кликните на изображение, чтобы указать точку входа.</p> |
|
|
<div id="building-preview-container"> |
|
|
<img id="building-preview-img" alt="Building Preview"> |
|
|
<canvas id="building-entrance-canvas"></canvas> |
|
|
</div> |
|
|
<label style="display: flex; align-items: center; gap: 10px;"> |
|
|
<input type="checkbox" id="building-solid-checkbox" checked> |
|
|
<span>Плотное здание (с коллзией)</span> |
|
|
</label> |
|
|
<button id="save-new-building">Сохранить и выбрать</button> |
|
|
<button id="cancel-new-building" class="danger-button" style="background-color: #555;">Отмена</button> |
|
|
</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> |
|
|
|
|
|
<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, orbitControls; |
|
|
let raycaster, mouse, placementPlane, gridHelper, previewMesh, selectionBox; |
|
|
|
|
|
let isPlayMode = false; |
|
|
let player, playerVelocity = new THREE.Vector3(); |
|
|
const playerSpeed = 5.0; |
|
|
const keyStates = {}; |
|
|
const clock = new THREE.Clock(); |
|
|
let collisionBBoxes = []; |
|
|
|
|
|
let currentTool = { category: 'floors', type: 'grass' }; |
|
|
let currentRotation = 0; |
|
|
const gridSize = 1; |
|
|
let levelData = { floors: {}, walls: {}, objects: {}, buildingDefinitions: {}, buildingInstances: [] }; |
|
|
let drawMode = 'single'; |
|
|
let isDrawingArea = false; |
|
|
let areaStartPoint = new THREE.Vector3(); |
|
|
|
|
|
const joystick = { active: false, center: new THREE.Vector2(), current: new THREE.Vector2(), vector: new THREE.Vector2() }; |
|
|
|
|
|
const TEXTURE_BASE_URL = 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/'; |
|
|
|
|
|
const ASSETS = { |
|
|
floors: { |
|
|
grass: { texture: TEXTURE_BASE_URL + 'terrain/grasslight-big.jpg', size: [gridSize, 0.1, gridSize], solid: false }, |
|
|
concrete: { texture: TEXTURE_BASE_URL + 'concrete.jpg', size: [gridSize, 0.1, gridSize], solid: false }, |
|
|
wood: { texture: TEXTURE_BASE_URL + 'hardwood2_diffuse.jpg', size: [gridSize, 0.1, gridSize], solid: false }, |
|
|
dirt: { texture: TEXTURE_BASE_URL + 'terrain/dirt_grass.jpg', size: [gridSize, 0.1, gridSize], solid: false } |
|
|
}, |
|
|
walls: { |
|
|
brick: { texture: TEXTURE_BASE_URL + 'brick_diffuse.jpg', size: [gridSize, 2.5, 0.2], solid: true }, |
|
|
concrete_wall: { texture: TEXTURE_BASE_URL + 'concrete.jpg', size: [gridSize, 2.5, 0.2], solid: true } |
|
|
}, |
|
|
objects: { |
|
|
crate: { texture: TEXTURE_BASE_URL + 'crate.gif', size: [gridSize, gridSize, gridSize], solid: true }, |
|
|
barrel: { texture: TEXTURE_BASE_URL + 'metal.jpg', size: [gridSize * 0.4, gridSize * 0.8, 0], geometry: 'cylinder', solid: true }, |
|
|
bush: { texture: TEXTURE_BASE_URL + 'terrain/grasslight-big.jpg', size: [gridSize * 0.8, gridSize * 0.8, 0], geometry: 'cylinder', solid: false } |
|
|
} |
|
|
}; |
|
|
|
|
|
const instancedMeshes = {}; |
|
|
const loadedTextures = {}; |
|
|
const customBuildingMeshes = []; |
|
|
let entranceHelper; |
|
|
let currentEntranceCoords = {x: 0.5, y: 0.95}; |
|
|
|
|
|
function init() { |
|
|
showSpinner(true); |
|
|
const loadingManager = new THREE.LoadingManager(); |
|
|
const textureLoader = new THREE.TextureLoader(loadingManager); |
|
|
|
|
|
for (const category in ASSETS) { |
|
|
loadedTextures[category] = {}; |
|
|
for (const type in ASSETS[category]) { |
|
|
const asset = ASSETS[category][type]; |
|
|
if (asset.texture) { |
|
|
loadedTextures[category][type] = textureLoader.load(asset.texture); |
|
|
loadedTextures[category][type].wrapS = THREE.RepeatWrapping; |
|
|
loadedTextures[category][type].wrapT = THREE.RepeatWrapping; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
loadingManager.onLoad = () => { |
|
|
setupScene(); |
|
|
animate(); |
|
|
showSpinner(false); |
|
|
}; |
|
|
} |
|
|
|
|
|
function setupScene() { |
|
|
scene = new THREE.Scene(); |
|
|
scene.background = new THREE.Color(0x334455); |
|
|
scene.fog = new THREE.Fog(0x334455, 50, 150); |
|
|
|
|
|
const aspect = window.innerWidth / window.innerHeight; |
|
|
const d = 25; |
|
|
camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 2000); |
|
|
camera.position.set(50, 50, 50); |
|
|
camera.lookAt(scene.position); |
|
|
|
|
|
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; |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
orbitControls = new OrbitControls(camera, renderer.domElement); |
|
|
orbitControls.enableDamping = true; |
|
|
orbitControls.minZoom = 0.5; |
|
|
orbitControls.maxZoom = 4; |
|
|
|
|
|
const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0x494949, 0.8); |
|
|
scene.add(hemiLight); |
|
|
|
|
|
const dirLight = new THREE.DirectionalLight(0xffffff, 1.2); |
|
|
dirLight.position.set(-30, 50, -30); |
|
|
dirLight.castShadow = true; |
|
|
dirLight.shadow.mapSize.width = 2048; |
|
|
dirLight.shadow.mapSize.height = 2048; |
|
|
const shadowSize = 50; |
|
|
dirLight.shadow.camera.left = -shadowSize; |
|
|
dirLight.shadow.camera.right = shadowSize; |
|
|
dirLight.shadow.camera.top = shadowSize; |
|
|
dirLight.shadow.camera.bottom = -shadowSize; |
|
|
scene.add(dirLight); |
|
|
|
|
|
gridHelper = new THREE.GridHelper(100, 100, 0x556677, 0x556677); |
|
|
scene.add(gridHelper); |
|
|
|
|
|
const planeGeo = new THREE.PlaneGeometry(1000, 1000); |
|
|
planeGeo.rotateX(-Math.PI / 2); |
|
|
placementPlane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ visible: false })); |
|
|
scene.add(placementPlane); |
|
|
|
|
|
raycaster = new THREE.Raycaster(); |
|
|
mouse = new THREE.Vector2(); |
|
|
|
|
|
initUI(); |
|
|
initPlayer(); |
|
|
initJoystick(); |
|
|
initInstancedMeshes(); |
|
|
|
|
|
selectionBox = new THREE.LineSegments( |
|
|
new THREE.EdgesGeometry(new THREE.BoxGeometry(1,1,1)), |
|
|
new THREE.LineBasicMaterial({ color: 0xffff00, linewidth: 2 }) |
|
|
); |
|
|
selectionBox.visible = false; |
|
|
scene.add(selectionBox); |
|
|
|
|
|
const spriteMaterial = new THREE.SpriteMaterial({ color: 0x00ff00, transparent: true, opacity: 0.7, depthTest: false }); |
|
|
entranceHelper = new THREE.Sprite(spriteMaterial); |
|
|
entranceHelper.scale.set(1.5, 3, 1); |
|
|
entranceHelper.visible = false; |
|
|
scene.add(entranceHelper); |
|
|
|
|
|
window.addEventListener('resize', onWindowResize); |
|
|
renderer.domElement.addEventListener('pointermove', onPointerMove); |
|
|
renderer.domElement.addEventListener('pointerdown', onPointerDown); |
|
|
renderer.domElement.addEventListener('pointerup', onPointerUp); |
|
|
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) { |
|
|
rotatePreview(e.deltaY > 0 ? 1 : -1); |
|
|
} |
|
|
}, { passive: false }); |
|
|
renderer.domElement.addEventListener('contextmenu', e => e.preventDefault()); |
|
|
document.getElementById('blocker').addEventListener('click', enterPlayMode); |
|
|
} |
|
|
|
|
|
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({ map: loadedTextures[category][type] }); |
|
|
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); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function initPlayer() { |
|
|
const playerGeo = new THREE.CylinderGeometry(0.3, 0.3, 1.8, 16); |
|
|
playerGeo.translate(0, 0.9, 0); |
|
|
const playerMat = new THREE.MeshStandardMaterial({ color: 0x00aaff }); |
|
|
player = new THREE.Mesh(playerGeo, playerMat); |
|
|
player.castShadow = true; |
|
|
player.visible = false; |
|
|
scene.add(player); |
|
|
} |
|
|
|
|
|
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('play-mode-toggle').addEventListener('click', togglePlayMode); |
|
|
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); |
|
|
|
|
|
document.getElementById('draw-mode-single').addEventListener('click', () => setDrawMode('single')); |
|
|
document.getElementById('draw-mode-area').addEventListener('click', () => setDrawMode('area')); |
|
|
|
|
|
document.getElementById('add-building-btn').addEventListener('click', () => document.getElementById('building-image-input').click()); |
|
|
document.getElementById('building-image-input').addEventListener('change', handleImageUpload); |
|
|
document.getElementById('save-new-building').addEventListener('click', saveNewBuildingDefinition); |
|
|
document.getElementById('cancel-new-building').addEventListener('click', () => { |
|
|
document.getElementById('building-modal').style.display = 'none'; |
|
|
document.getElementById('blocker').style.display = 'none'; |
|
|
}); |
|
|
document.getElementById('building-preview-container').addEventListener('click', setEntrancePoint); |
|
|
document.getElementById('building-width-input').addEventListener('input', updatePreviewMesh); |
|
|
} |
|
|
|
|
|
function handleImageUpload(event) { |
|
|
const file = event.target.files[0]; |
|
|
if (!file) return; |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
const modal = document.getElementById('building-modal'); |
|
|
const img = document.getElementById('building-preview-img'); |
|
|
img.onload = () => { |
|
|
const canvas = document.getElementById('building-entrance-canvas'); |
|
|
canvas.width = img.clientWidth; |
|
|
canvas.height = img.clientHeight; |
|
|
currentEntranceCoords = {x: 0.5, y: 0.95}; |
|
|
drawEntranceMarker(); |
|
|
}; |
|
|
img.src = e.target.result; |
|
|
modal.style.display = 'block'; |
|
|
document.getElementById('blocker').style.display = 'block'; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
event.target.value = ''; |
|
|
} |
|
|
|
|
|
function setEntrancePoint(event) { |
|
|
const rect = event.target.getBoundingClientRect(); |
|
|
const x = event.clientX - rect.left; |
|
|
const y = event.clientY - rect.top; |
|
|
currentEntranceCoords = { x: x / rect.width, y: y / rect.height }; |
|
|
drawEntranceMarker(); |
|
|
} |
|
|
|
|
|
function drawEntranceMarker() { |
|
|
const canvas = document.getElementById('building-entrance-canvas'); |
|
|
const ctx = canvas.getContext('2d'); |
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
const x = currentEntranceCoords.x * canvas.width; |
|
|
const y = currentEntranceCoords.y * canvas.height; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(x, y, 5, 0, 2 * Math.PI, false); |
|
|
ctx.fillStyle = 'rgba(0, 255, 0, 0.8)'; |
|
|
ctx.fill(); |
|
|
ctx.lineWidth = 2; |
|
|
ctx.strokeStyle = '#ffffff'; |
|
|
ctx.stroke(); |
|
|
} |
|
|
|
|
|
function saveNewBuildingDefinition() { |
|
|
const img = document.getElementById('building-preview-img'); |
|
|
const def = { |
|
|
src: img.src, |
|
|
isSolid: document.getElementById('building-solid-checkbox').checked, |
|
|
entrance: currentEntranceCoords, |
|
|
aspectRatio: img.naturalHeight / img.naturalWidth, |
|
|
}; |
|
|
const defId = `building_${Date.now()}`; |
|
|
levelData.buildingDefinitions[defId] = def; |
|
|
|
|
|
document.getElementById('building-modal').style.display = 'none'; |
|
|
document.getElementById('blocker').style.display = 'none'; |
|
|
|
|
|
updateCustomToolsUI(); |
|
|
selectTool('custom', defId); |
|
|
} |
|
|
|
|
|
function updateCustomToolsUI() { |
|
|
const selector = document.getElementById('custom-tools-selector'); |
|
|
selector.innerHTML = ''; |
|
|
for (const defId in levelData.buildingDefinitions) { |
|
|
const def = levelData.buildingDefinitions[defId]; |
|
|
const item = document.createElement('div'); |
|
|
item.className = 'tool-item'; |
|
|
item.dataset.category = 'custom'; |
|
|
item.dataset.type = defId; |
|
|
item.title = defId; |
|
|
|
|
|
const img = document.createElement('img'); |
|
|
img.src = def.src; |
|
|
img.style.width = '100%'; |
|
|
img.style.height = '40px'; |
|
|
img.style.objectFit = 'cover'; |
|
|
img.style.pointerEvents = 'none'; |
|
|
|
|
|
item.appendChild(img); |
|
|
item.addEventListener('click', () => selectTool('custom', defId)); |
|
|
selector.appendChild(item); |
|
|
} |
|
|
} |
|
|
|
|
|
function setDrawMode(mode) { |
|
|
drawMode = mode; |
|
|
document.getElementById('draw-mode-single').classList.toggle('active', mode === 'single'); |
|
|
document.getElementById('draw-mode-area').classList.toggle('active', mode === 'area'); |
|
|
document.getElementById('custom-building-options').style.display = 'none'; |
|
|
} |
|
|
|
|
|
function initJoystick() { |
|
|
const joystickContainer = document.getElementById('joystick-container'); |
|
|
const joystickHandle = document.getElementById('joystick-handle'); |
|
|
if(!joystickContainer) return; |
|
|
const maxRadius = joystickContainer.clientWidth / 2; |
|
|
function onTouchStart(event) { |
|
|
if(!isPlayMode) return; |
|
|
const touch = event.touches[0]; |
|
|
joystick.active = true; |
|
|
joystick.center.set(touch.clientX, touch.clientY); |
|
|
} |
|
|
function onTouchMove(event) { |
|
|
if (!joystick.active || !isPlayMode) return; |
|
|
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); |
|
|
joystickHandle.style.transform = `translate(${joystick.vector.x}px, ${joystick.vector.y}px)`; |
|
|
} |
|
|
function onTouchEnd() { |
|
|
joystick.active = false; |
|
|
joystick.vector.set(0, 0); |
|
|
joystickHandle.style.transform = 'translate(0, 0)'; |
|
|
} |
|
|
renderer.domElement.addEventListener('touchstart', onTouchStart, { passive: true }); |
|
|
renderer.domElement.addEventListener('touchmove', onTouchMove, { passive: true }); |
|
|
renderer.domElement.addEventListener('touchend', onTouchEnd); |
|
|
} |
|
|
|
|
|
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'); |
|
|
|
|
|
document.getElementById('custom-building-options').style.display = category === 'custom' ? 'block' : 'none'; |
|
|
document.getElementById('draw-mode-area').style.display = category === 'custom' ? 'none' : 'flex'; |
|
|
if (category === 'custom') setDrawMode('single'); |
|
|
|
|
|
updatePreviewMesh(); |
|
|
} |
|
|
|
|
|
function updatePreviewMesh() { |
|
|
if (previewMesh) { |
|
|
scene.remove(previewMesh); |
|
|
previewMesh.geometry.dispose(); |
|
|
if(previewMesh.material.map) previewMesh.material.map.dispose(); |
|
|
previewMesh.material.dispose(); |
|
|
} |
|
|
|
|
|
let geometry, material; |
|
|
if (currentTool.category === 'custom') { |
|
|
const def = levelData.buildingDefinitions[currentTool.type]; |
|
|
if (!def) return; |
|
|
const width = parseFloat(document.getElementById('building-width-input').value) || 10; |
|
|
const height = width * def.aspectRatio; |
|
|
|
|
|
geometry = new THREE.PlaneGeometry(width, height); |
|
|
const texture = new THREE.TextureLoader().load(def.src); |
|
|
material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.7, side: THREE.DoubleSide }); |
|
|
previewMesh = new THREE.Mesh(geometry, material); |
|
|
previewMesh.userData.isBuilding = true; |
|
|
previewMesh.userData.size = {x: width, y: height, z: 0.2}; |
|
|
} else { |
|
|
const asset = ASSETS[currentTool.category][currentTool.type]; |
|
|
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); |
|
|
} |
|
|
material = new THREE.MeshStandardMaterial({ map: loadedTextures[currentTool.category][currentTool.type], transparent: true, opacity: 0.6 }); |
|
|
previewMesh = new THREE.Mesh(geometry, material); |
|
|
previewMesh.userData.isBuilding = false; |
|
|
} |
|
|
previewMesh.rotation.y = currentRotation; |
|
|
scene.add(previewMesh); |
|
|
} |
|
|
|
|
|
function onWindowResize() { |
|
|
const aspect = window.innerWidth / window.innerHeight; |
|
|
const d = 25; |
|
|
camera.left = -d * aspect; |
|
|
camera.right = d * aspect; |
|
|
camera.top = d; |
|
|
camera.bottom = -d; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
} |
|
|
|
|
|
function onPointerMove(event) { |
|
|
if (isPlayMode) return; |
|
|
mouse.x = (event.clientX / window.innerWidth) * 2 - 1; |
|
|
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; |
|
|
raycaster.setFromCamera(mouse, camera); |
|
|
const intersects = raycaster.intersectObject(placementPlane); |
|
|
if (intersects.length > 0 && previewMesh) { |
|
|
const point = intersects[0].point; |
|
|
const gridX = Math.round(point.x / gridSize); |
|
|
const gridZ = Math.round(point.z / gridSize); |
|
|
|
|
|
if (isDrawingArea) { |
|
|
selectionBox.visible = true; |
|
|
const endPoint = new THREE.Vector3(gridX * gridSize, 0, gridZ * gridSize); |
|
|
const minX = Math.min(areaStartPoint.x, endPoint.x); |
|
|
const maxX = Math.max(areaStartPoint.x, endPoint.x); |
|
|
const minZ = Math.min(areaStartPoint.z, endPoint.z); |
|
|
const maxZ = Math.max(areaStartPoint.z, endPoint.z); |
|
|
const center = new THREE.Vector3((minX + maxX)/2, 0.5, (minZ + maxZ)/2); |
|
|
const size = new THREE.Vector3(maxX - minX + gridSize, 1, maxZ - minZ + gridSize); |
|
|
selectionBox.position.copy(center); |
|
|
selectionBox.scale.copy(size); |
|
|
previewMesh.visible = false; |
|
|
} else { |
|
|
previewMesh.position.set(gridX * gridSize, 0, gridZ * gridSize); |
|
|
if (previewMesh.userData.isBuilding) { |
|
|
previewMesh.position.y = previewMesh.userData.size.y / 2; |
|
|
} else { |
|
|
const asset = ASSETS[currentTool.category][currentTool.type]; |
|
|
previewMesh.position.y = asset.size[1] / 2; |
|
|
} |
|
|
previewMesh.visible = true; |
|
|
} |
|
|
} else if (previewMesh) { |
|
|
previewMesh.visible = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function handleKeyDown(event) { |
|
|
if (isPlayMode) { |
|
|
if (event.code === 'Escape') { |
|
|
togglePlayMode(); |
|
|
} |
|
|
return; |
|
|
} |
|
|
if (event.code === 'KeyR') { |
|
|
rotatePreview(1); |
|
|
} |
|
|
} |
|
|
|
|
|
function onPointerDown(event) { |
|
|
if (isPlayMode || (previewMesh && !previewMesh.visible)) return; |
|
|
if (event.target !== renderer.domElement) return; |
|
|
|
|
|
if (event.button === 2) { rotatePreview(1); return; } |
|
|
if (event.button !== 0) return; |
|
|
|
|
|
const isRemoving = event.shiftKey; |
|
|
|
|
|
if (isRemoving) { |
|
|
removeItemAtPointer(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const pos = previewMesh.position.clone(); |
|
|
|
|
|
if (drawMode === 'area' && currentTool.category !== 'custom') { |
|
|
isDrawingArea = true; |
|
|
areaStartPoint.copy(pos); |
|
|
} else { |
|
|
addItem(pos, currentRotation); |
|
|
updateLevelGeometry(); |
|
|
} |
|
|
} |
|
|
|
|
|
function onPointerUp(event) { |
|
|
if (isPlayMode || event.button !== 0) return; |
|
|
if (isDrawingArea) { |
|
|
isDrawingArea = false; |
|
|
selectionBox.visible = false; |
|
|
const intersects = raycaster.intersectObject(placementPlane); |
|
|
if (intersects.length > 0) { |
|
|
const point = intersects[0].point; |
|
|
const gridX = Math.round(point.x / gridSize); |
|
|
const gridZ = Math.round(point.z / gridSize); |
|
|
|
|
|
const startX = Math.round(areaStartPoint.x / gridSize); |
|
|
const startZ = Math.round(areaStartPoint.z / gridSize); |
|
|
const endX = gridX; |
|
|
const endZ = gridZ; |
|
|
|
|
|
for (let x = Math.min(startX, endX); x <= Math.max(startX, endX); x++) { |
|
|
for (let z = Math.min(startZ, endZ); z <= Math.max(startZ, endZ); z++) { |
|
|
addItem(new THREE.Vector3(x * gridSize, 0, z * gridSize), 0); |
|
|
} |
|
|
} |
|
|
updateLevelGeometry(); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function rotatePreview(direction) { |
|
|
if (!previewMesh) return; |
|
|
currentRotation += (Math.PI / 2) * direction; |
|
|
previewMesh.rotation.y = currentRotation; |
|
|
} |
|
|
|
|
|
function addItem(pos, rotation) { |
|
|
const { category, type } = currentTool; |
|
|
if (category === 'custom') { |
|
|
const def = levelData.buildingDefinitions[type]; |
|
|
if (!def) return; |
|
|
const width = parseFloat(document.getElementById('building-width-input').value) || 10; |
|
|
const height = width * def.aspectRatio; |
|
|
levelData.buildingInstances.push({ |
|
|
defId: type, |
|
|
pos: {x: pos.x, y: height/2, z: pos.z}, |
|
|
scale: {x: width, y: height, z: 0.2}, |
|
|
rotation: rotation |
|
|
}); |
|
|
} else { |
|
|
removeItemAtGrid(pos); |
|
|
if (!levelData[category][type]) levelData[category][type] = []; |
|
|
levelData[category][type].push([pos.x, pos.z, rotation]); |
|
|
} |
|
|
} |
|
|
|
|
|
function removeItemAtPointer() { |
|
|
raycaster.setFromCamera(mouse, camera); |
|
|
const intersectsBuildings = raycaster.intersectObjects(customBuildingMeshes); |
|
|
if (intersectsBuildings.length > 0) { |
|
|
const intersectedMesh = intersectsBuildings[0].object; |
|
|
const instanceIndex = customBuildingMeshes.indexOf(intersectedMesh); |
|
|
if (instanceIndex > -1) { |
|
|
levelData.buildingInstances.splice(instanceIndex, 1); |
|
|
updateLevelGeometry(); |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
const intersectsPlane = raycaster.intersectObject(placementPlane); |
|
|
if (intersectsPlane.length > 0) { |
|
|
const pos = intersectsPlane[0].point; |
|
|
removeItemAtGrid(pos); |
|
|
updateLevelGeometry(); |
|
|
} |
|
|
} |
|
|
|
|
|
function removeItemAtGrid(pos) { |
|
|
const gridX = Math.round(pos.x / gridSize); |
|
|
const gridZ = Math.round(pos.z / gridSize); |
|
|
const keyToRemove = `${gridX * gridSize},${gridZ * gridSize}`; |
|
|
for (const category in levelData) { |
|
|
if (category === 'buildingDefinitions' || category === 'buildingInstances') continue; |
|
|
for (const type in levelData[category]) { |
|
|
levelData[category][type] = levelData[category][type].filter(item => { |
|
|
const itemKey = `${item[0]},${item[1]}`; |
|
|
return itemKey !== keyToRemove; |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function updateLevelGeometry() { |
|
|
const dummy = new THREE.Object3D(); |
|
|
|
|
|
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, asset.size[1] / 2, z); |
|
|
dummy.rotation.set(0, rot, 0); |
|
|
dummy.updateMatrix(); |
|
|
mesh.setMatrixAt(i, dummy.matrix); |
|
|
} |
|
|
mesh.instanceMatrix.needsUpdate = true; |
|
|
} |
|
|
} |
|
|
renderCustomBuildings(); |
|
|
rebuildCollisionData(); |
|
|
} |
|
|
|
|
|
function renderCustomBuildings() { |
|
|
while(customBuildingMeshes.length){ |
|
|
const mesh = customBuildingMeshes.pop(); |
|
|
scene.remove(mesh); |
|
|
mesh.geometry.dispose(); |
|
|
mesh.material.map?.dispose(); |
|
|
mesh.material.dispose(); |
|
|
} |
|
|
|
|
|
const textureLoader = new THREE.TextureLoader(); |
|
|
for(const instance of levelData.buildingInstances) { |
|
|
const def = levelData.buildingDefinitions[instance.defId]; |
|
|
if (!def) continue; |
|
|
|
|
|
const geometry = new THREE.PlaneGeometry(instance.scale.x, instance.scale.y); |
|
|
const texture = textureLoader.load(def.src); |
|
|
const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, side: THREE.DoubleSide }); |
|
|
const mesh = new THREE.Mesh(geometry, material); |
|
|
|
|
|
mesh.position.set(instance.pos.x, instance.pos.y, instance.pos.z); |
|
|
mesh.rotation.y = instance.rotation; |
|
|
mesh.castShadow = true; |
|
|
mesh.receiveShadow = true; |
|
|
|
|
|
scene.add(mesh); |
|
|
customBuildingMeshes.push(mesh); |
|
|
} |
|
|
} |
|
|
|
|
|
function rebuildCollisionData() { |
|
|
collisionBBoxes = []; |
|
|
for (const category in ASSETS) { |
|
|
for (const type in ASSETS[category]) { |
|
|
const asset = ASSETS[category][type]; |
|
|
if (!asset.solid) continue; |
|
|
const dataArray = levelData[category]?.[type] || []; |
|
|
for(const item of dataArray) { |
|
|
const [x, z, rot] = item; |
|
|
const box = new THREE.Box3(); |
|
|
const size = new THREE.Vector3(asset.size[0], asset.size[1], asset.size[2]); |
|
|
const center = new THREE.Vector3(x, asset.size[1]/2, z); |
|
|
box.setFromCenterAndSize(center, size); |
|
|
collisionBBoxes.push(box); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
for (let i = 0; i < levelData.buildingInstances.length; i++) { |
|
|
const instance = levelData.buildingInstances[i]; |
|
|
const def = levelData.buildingDefinitions[instance.defId]; |
|
|
if (!def || !def.isSolid) continue; |
|
|
|
|
|
const mesh = customBuildingMeshes[i]; |
|
|
if(mesh) { |
|
|
mesh.updateMatrixWorld(); |
|
|
const box = new THREE.Box3().setFromObject(mesh); |
|
|
collisionBBoxes.push(box); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function clearLevel() { |
|
|
if (!confirm("Вы уверены, что хотите полностью очистить уровень?")) return; |
|
|
levelData = { floors: {}, walls: {}, objects: {}, buildingDefinitions: {}, buildingInstances: [] }; |
|
|
updateCustomToolsUI(); |
|
|
updateLevelGeometry(); |
|
|
} |
|
|
|
|
|
function togglePlayMode() { |
|
|
const blocker = document.getElementById('blocker'); |
|
|
if(isPlayMode) { |
|
|
isPlayMode = false; |
|
|
document.exitPointerLock?.(); |
|
|
const uiContainer = document.getElementById('ui-container'); |
|
|
const joystickContainer = document.getElementById('joystick-container'); |
|
|
uiContainer.style.display = 'flex'; |
|
|
gridHelper.visible = true; |
|
|
if(previewMesh) previewMesh.visible = true; |
|
|
orbitControls.enabled = true; |
|
|
player.visible = false; |
|
|
blocker.style.display = 'none'; |
|
|
joystickContainer.style.display = 'none'; |
|
|
entranceHelper.visible = false; |
|
|
camera.position.set(50, 50, 50); |
|
|
camera.lookAt(0,0,0); |
|
|
orbitControls.target.set(0, 0, 0); |
|
|
onWindowResize(); |
|
|
} else { |
|
|
blocker.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
function enterPlayMode() { |
|
|
rebuildCollisionData(); |
|
|
isPlayMode = true; |
|
|
renderer.domElement.requestPointerLock?.(); |
|
|
const uiContainer = document.getElementById('ui-container'); |
|
|
const blocker = document.getElementById('blocker'); |
|
|
const joystickContainer = document.getElementById('joystick-container'); |
|
|
uiContainer.style.display = 'none'; |
|
|
gridHelper.visible = false; |
|
|
if(previewMesh) previewMesh.visible = false; |
|
|
orbitControls.enabled = false; |
|
|
player.visible = true; |
|
|
player.position.set(0, 0, 0); |
|
|
blocker.style.display = 'none'; |
|
|
if ('ontouchstart' in window) { |
|
|
joystickContainer.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
async function saveProject() { |
|
|
const projectName = document.getElementById('project-name').value.trim(); |
|
|
if (!projectName) { alert("Пожалуйста, введите имя проекта."); return; } |
|
|
showSpinner(true); |
|
|
try { |
|
|
const response = await fetch('/api/project', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ name: projectName, data: levelData }) |
|
|
}); |
|
|
if (!response.ok) throw new Error('Ошибка при сохранении проекта.'); |
|
|
alert(`Проект '${projectName}' успешно сохранен!`); |
|
|
const projectList = document.getElementById('project-list'); |
|
|
if (![...projectList.options].some(opt => opt.value === projectName)) { |
|
|
const newOption = document.createElement('option'); |
|
|
newOption.value = newOption.textContent = projectName; |
|
|
projectList.appendChild(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}`); |
|
|
const result = await response.json(); |
|
|
if (!response.ok) throw new Error('Проект не найден или ошибка загрузки.'); |
|
|
|
|
|
clearLevel(); |
|
|
Object.assign(levelData, result.data); |
|
|
if (!levelData.buildingDefinitions) levelData.buildingDefinitions = {}; |
|
|
if (!levelData.buildingInstances) levelData.buildingInstances = []; |
|
|
updateCustomToolsUI(); |
|
|
updateLevelGeometry(); |
|
|
document.getElementById('project-name').value = projectName; |
|
|
|
|
|
} catch (error) { |
|
|
alert(`Не удалось загрузить проект: ${error.message}`); |
|
|
} finally { |
|
|
showSpinner(false); |
|
|
} |
|
|
} |
|
|
|
|
|
const moveDirection = new THREE.Vector3(); |
|
|
function updatePlayer(deltaTime) { |
|
|
const speed = playerSpeed * deltaTime; |
|
|
moveDirection.set(0,0,0); |
|
|
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; |
|
|
moveDirection.x += joystick.vector.x / maxRadius; |
|
|
moveDirection.z += joystick.vector.y / maxRadius; |
|
|
} |
|
|
|
|
|
if (moveDirection.lengthSq() > 0) { |
|
|
moveDirection.normalize().multiplyScalar(speed); |
|
|
|
|
|
const playerBox = new THREE.Box3().setFromObject(player); |
|
|
|
|
|
const playerBoxX = playerBox.clone().translate(new THREE.Vector3(moveDirection.x, 0, 0)); |
|
|
let collisionX = false; |
|
|
for(const colBox of collisionBBoxes) { |
|
|
if (playerBoxX.intersectsBox(colBox)) { |
|
|
collisionX = true; |
|
|
break; |
|
|
} |
|
|
} |
|
|
if(!collisionX) player.position.x += moveDirection.x; |
|
|
|
|
|
const playerBoxZ = playerBox.clone().translate(new THREE.Vector3(0, 0, moveDirection.z)); |
|
|
let collisionZ = false; |
|
|
for(const colBox of collisionBBoxes) { |
|
|
if (playerBoxZ.intersectsBox(colBox)) { |
|
|
collisionZ = true; |
|
|
break; |
|
|
} |
|
|
} |
|
|
if(!collisionZ) player.position.z += moveDirection.z; |
|
|
} |
|
|
|
|
|
const cameraOffset = new THREE.Vector3(30, 30, 30); |
|
|
camera.position.copy(player.position).add(cameraOffset); |
|
|
camera.lookAt(player.position); |
|
|
|
|
|
updateEntranceHighlight(); |
|
|
} |
|
|
|
|
|
function updateEntranceHighlight() { |
|
|
let closestEntranceDist = Infinity; |
|
|
let entranceToShow = null; |
|
|
|
|
|
for(let i=0; i < levelData.buildingInstances.length; i++) { |
|
|
const instance = levelData.buildingInstances[i]; |
|
|
const def = levelData.buildingDefinitions[instance.defId]; |
|
|
if (!def || !def.entrance) continue; |
|
|
|
|
|
const dx = (def.entrance.x - 0.5) * instance.scale.x; |
|
|
const dy = (def.entrance.y - 0.5) * instance.scale.y; |
|
|
|
|
|
let entrancePos = new THREE.Vector3(dx, dy, 0); |
|
|
const rotationMatrix = new THREE.Matrix4().makeRotationY(instance.rotation); |
|
|
entrancePos.applyMatrix4(rotationMatrix); |
|
|
entrancePos.add(new THREE.Vector3(instance.pos.x, instance.pos.y, instance.pos.z)); |
|
|
|
|
|
const dist = player.position.distanceTo(entrancePos); |
|
|
if (dist < 5 && dist < closestEntranceDist) { |
|
|
closestEntranceDist = dist; |
|
|
entranceToShow = entrancePos; |
|
|
} |
|
|
} |
|
|
|
|
|
if (entranceToShow) { |
|
|
entranceHelper.position.copy(entranceToShow); |
|
|
entranceHelper.visible = true; |
|
|
} else { |
|
|
entranceHelper.visible = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function showSpinner(show) { |
|
|
document.getElementById('loading-spinner').style.display = show ? 'block' : 'none'; |
|
|
document.getElementById('blocker').style.display = show ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
const deltaTime = clock.getDelta(); |
|
|
|
|
|
if (isPlayMode) { |
|
|
updatePlayer(deltaTime); |
|
|
} else { |
|
|
orbitControls.update(); |
|
|
} |
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
init(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
''' |
|
|
|
|
|
@app.route('/') |
|
|
def editor(): |
|
|
projects = list_projects_from_hf() |
|
|
return render_template_string(EDITOR_TEMPLATE, projects=projects) |
|
|
|
|
|
@app.route('/api/project', methods=['POST']) |
|
|
def save_project_api(): |
|
|
data = request.get_json() |
|
|
project_name = data.get('name') |
|
|
if not project_name: |
|
|
return jsonify({"error": "Project name is required"}), 400 |
|
|
|
|
|
local_filename = f"{uuid4().hex}.json" |
|
|
with open(local_filename, 'w', encoding='utf-8') as f: |
|
|
json.dump(data, f) |
|
|
|
|
|
success = upload_project_to_hf(local_filename, project_name) |
|
|
|
|
|
if os.path.exists(local_filename): |
|
|
os.remove(local_filename) |
|
|
|
|
|
if success: |
|
|
return jsonify({"message": "Project saved successfully"}), 201 |
|
|
else: |
|
|
return jsonify({"error": "Failed to upload project"}), 500 |
|
|
|
|
|
@app.route('/api/project/<project_name>', methods=['GET']) |
|
|
def load_project_api(project_name): |
|
|
project_data = download_project_from_hf(project_name) |
|
|
if project_data: |
|
|
return jsonify(project_data) |
|
|
else: |
|
|
return jsonify({"error": "Project not found or failed to download"}), 404 |
|
|
|
|
|
if __name__ == '__main__': |
|
|
port = int(os.environ.get('PORT', 7860)) |
|
|
app.run(debug=False, host='0.0.0.0', port=port) |
