marti
38960df5d9
- Generador procedural que crea hasta 10 salas aleatorias conectadas por puertas - Sistema de fog of war: solo se muestran salas visitadas - Puertas automáticas entre salas con detección de transición - 0-2 esqueletos aleatorios por sala - Sistema de vistas NSEW con UI de compás - 4 vistas isométricas fijas (Norte, Sur, Este, Oeste) - Zoom y paneo habilitados, rotación deshabilitada - Paredes con opacidad diferenciada (N/W opacas, S/E semi-transparentes) - Validación de movimiento: solo celdas transitables - Centrado automático de cámara al mover personaje
597 lines
21 KiB
JavaScript
597 lines
21 KiB
JavaScript
import './style.css';
|
|
import * as THREE from 'three';
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
|
|
// --- CONFIGURACIÓN DE LA ESCENA ---
|
|
const CONFIG = {
|
|
CELL_SIZE: 2, // Unidades de Three.js por celda lógica
|
|
TILE_DIMENSIONS: 4, // Una tile es de 4x4 celdas
|
|
};
|
|
|
|
// --- ESTADO DEL JUEGO (DATA MODEL) ---
|
|
const ASSETS = {
|
|
tiles: {
|
|
'tile_base': { src: '/assets/images/tiles/tile4x4.png', width: 4, height: 4 },
|
|
'tile_cyan': { src: '/assets/images/tiles/tile4x4_blue.png', width: 4, height: 4 },
|
|
'tile_orange': { src: '/assets/images/tiles/tile4x4_orange.png', width: 4, height: 4 },
|
|
'tile_8x2': { src: '/assets/images/tiles/tile4x4.png', width: 8, height: 2 },
|
|
'wall_1': { src: '/assets/images/tiles/pared1.png' },
|
|
'door_1': { src: '/assets/images/tiles/puerta1.png' },
|
|
},
|
|
standees: {
|
|
'hero_1': { src: '/assets/images/standees/barbaro.png', height: 3 },
|
|
'hero_2': { src: '/assets/images/standees/esqueleto.png', height: 3 },
|
|
}
|
|
};
|
|
|
|
// Sistema de salas
|
|
const ROOMS = {
|
|
rooms: [
|
|
{
|
|
id: 1,
|
|
tile: { type: 'tile_base', x: 0, y: 0 },
|
|
walls: ['N', 'S', 'E', 'W'],
|
|
doors: [
|
|
{ side: 'N', gridPos: { x: 1, y: -1 }, leadsTo: 2 }
|
|
],
|
|
entities: [{ id: 101, type: 'hero_1', x: 1, y: 1 }]
|
|
},
|
|
{
|
|
id: 2,
|
|
tile: { type: 'tile_cyan', x: 0, y: -4 },
|
|
walls: ['N', 'S', 'E', 'W'],
|
|
doors: [
|
|
{ side: 'S', gridPos: { x: 1, y: -1 }, leadsTo: 1 }
|
|
],
|
|
entities: [{ id: 102, type: 'hero_2', x: 1, y: -5 }]
|
|
},
|
|
{
|
|
id: 3,
|
|
tile: { type: 'tile_orange', x: -4, y: 0 },
|
|
walls: ['N', 'S', 'E', 'W'],
|
|
doors: [
|
|
{ side: 'E', gridPos: { x: -1, y: 1 }, leadsTo: 1 }
|
|
],
|
|
entities: []
|
|
}
|
|
],
|
|
visitedRooms: [1], // Empezamos en la sala 1
|
|
currentRoom: 1
|
|
};
|
|
|
|
const GAME_STATE = {
|
|
placedTiles: [],
|
|
entities: []
|
|
};
|
|
|
|
// State de la sesión (UI)
|
|
const SESSION = {
|
|
selectedUnitId: null,
|
|
path: [], // Array de {x, y}
|
|
pathMeshes: [], // Array de meshes visuales
|
|
roomMeshes: {}, // { roomId: { tile: mesh, walls: [], doors: [], entities: [] } }
|
|
isAnimating: false // Flag para bloquear interacciones durante animación
|
|
};
|
|
|
|
// --- CONFIGURACIÓN BÁSICA THREE.JS ---
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x202020);
|
|
|
|
// Renderer
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.shadowMap.enabled = true;
|
|
document.querySelector('#app').appendChild(renderer.domElement);
|
|
|
|
// Cámara
|
|
const aspect = window.innerWidth / window.innerHeight;
|
|
const d = 15;
|
|
const camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
|
|
camera.position.set(20, 20, 20);
|
|
camera.lookAt(scene.position);
|
|
|
|
// --- CONTROLES MODIFICADOS ---
|
|
// Roto con el ratón derecho, zoom con la rueda del ratón y si hago presión en la rueda, hago el paneo.
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
controls.dampingFactor = 0.05;
|
|
controls.screenSpacePanning = true;
|
|
controls.maxPolarAngle = Math.PI / 2;
|
|
|
|
// Reasignación de botones
|
|
controls.mouseButtons = {
|
|
LEFT: null, // Dejamos el click izquierdo libre para nuestra lógica
|
|
MIDDLE: THREE.MOUSE.PAN, // Paneo con botón central/rueda
|
|
RIGHT: THREE.MOUSE.ROTATE // Rotación con derecho
|
|
};
|
|
controls.zoomToCursor = true; // Zoom a donde apunta el ratón
|
|
|
|
// Luces
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
|
|
scene.add(ambientLight);
|
|
|
|
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
|
dirLight.position.set(10, 20, 5);
|
|
dirLight.castShadow = true;
|
|
scene.add(dirLight);
|
|
|
|
const gridHelper = new THREE.GridHelper(40, 40, 0x444444, 0x111111);
|
|
scene.add(gridHelper);
|
|
|
|
// Plano invisible para Raycasting en Y=0
|
|
const planeGeometry = new THREE.PlaneGeometry(200, 200);
|
|
const planeMaterial = new THREE.MeshBasicMaterial({ visible: false });
|
|
const raycastPlane = new THREE.Mesh(planeGeometry, planeMaterial);
|
|
raycastPlane.rotation.x = -Math.PI / 2;
|
|
scene.add(raycastPlane);
|
|
|
|
|
|
// --- HELPERS LÓGICOS ---
|
|
function worldToGrid(x, z) {
|
|
return {
|
|
x: Math.floor(x / CONFIG.CELL_SIZE),
|
|
y: Math.floor(z / CONFIG.CELL_SIZE)
|
|
};
|
|
}
|
|
|
|
function gridToWorld(gridX, gridY) {
|
|
return {
|
|
x: (gridX * CONFIG.CELL_SIZE) + (CONFIG.CELL_SIZE / 2),
|
|
z: (gridY * CONFIG.CELL_SIZE) + (CONFIG.CELL_SIZE / 2)
|
|
};
|
|
}
|
|
|
|
function isAdjacent(p1, p2) {
|
|
const dx = Math.abs(p1.x - p2.x);
|
|
const dy = Math.abs(p1.y - p2.y);
|
|
// Adyacencia ortogonal (cruz)
|
|
return (dx === 1 && dy === 0) || (dx === 0 && dy === 1);
|
|
}
|
|
|
|
// --- CREACIÓN DE MARCADORES (CANVAS TEXTURE) ---
|
|
function createPathMarker(stepNumber) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 128;
|
|
canvas.height = 128;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Fondo Amarillo Semi-transparente
|
|
ctx.fillStyle = 'rgba(255, 255, 0, 0.5)';
|
|
ctx.fillRect(0, 0, 128, 128);
|
|
|
|
// Borde
|
|
ctx.strokeStyle = 'rgba(255, 200, 0, 0.8)';
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeRect(0, 0, 128, 128);
|
|
|
|
// Número
|
|
ctx.fillStyle = '#000000';
|
|
ctx.font = 'bold 60px Arial';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(stepNumber.toString(), 64, 64);
|
|
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
// Importante para pixel art o gráficos nítidos, aunque aquí es texto
|
|
texture.minFilter = THREE.LinearFilter;
|
|
|
|
// Crear el mesh
|
|
const geometry = new THREE.PlaneGeometry(CONFIG.CELL_SIZE * 0.9, CONFIG.CELL_SIZE * 0.9);
|
|
const material = new THREE.MeshBasicMaterial({
|
|
map: texture,
|
|
transparent: true,
|
|
side: THREE.DoubleSide // Visible desde ambos lados
|
|
});
|
|
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
mesh.rotation.x = -Math.PI / 2;
|
|
mesh.position.y = 0.05; // Ligeramente elevado sobre el suelo
|
|
return mesh;
|
|
}
|
|
|
|
function updatePathVisuals() {
|
|
// 1. Limpiar anteriores
|
|
SESSION.pathMeshes.forEach(mesh => scene.remove(mesh));
|
|
SESSION.pathMeshes = [];
|
|
|
|
// 2. Crear nuevos
|
|
SESSION.path.forEach((pos, index) => {
|
|
const marker = createPathMarker(index + 1);
|
|
const worldPos = gridToWorld(pos.x, pos.y);
|
|
marker.position.x = worldPos.x;
|
|
marker.position.z = worldPos.z;
|
|
scene.add(marker);
|
|
SESSION.pathMeshes.push(marker);
|
|
});
|
|
}
|
|
|
|
// --- MANEJO VISUAL DE SELECCIÓN ---
|
|
function updateSelectionVisuals() {
|
|
GAME_STATE.entities.forEach(entity => {
|
|
if (!entity.mesh) return;
|
|
|
|
if (entity.id === SESSION.selectedUnitId) {
|
|
// SELECCIONADO: Amarillo + Opacidad 50%
|
|
entity.mesh.material.color.setHex(0xffff00);
|
|
entity.mesh.material.opacity = 0.5;
|
|
entity.mesh.material.transparent = true;
|
|
} else {
|
|
// NO SELECCIONADO: Blanco (color original) + Opacidad 100%
|
|
entity.mesh.material.color.setHex(0xffffff);
|
|
entity.mesh.material.opacity = 1.0;
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- ANIMACIÓN DE MOVIMIENTO ---
|
|
async function animateMovement() {
|
|
if (SESSION.path.length === 0 || !SESSION.selectedUnitId) return;
|
|
|
|
SESSION.isAnimating = true;
|
|
|
|
const unit = GAME_STATE.entities.find(e => e.id === SESSION.selectedUnitId);
|
|
if (!unit || !unit.mesh) {
|
|
SESSION.isAnimating = false;
|
|
return;
|
|
}
|
|
|
|
// Copiar el path para ir consumiéndolo
|
|
const pathCopy = [...SESSION.path];
|
|
|
|
// Función helper para animar un solo paso
|
|
const animateStep = (targetGridPos) => {
|
|
return new Promise((resolve) => {
|
|
const startPos = { x: unit.mesh.position.x, z: unit.mesh.position.z };
|
|
const targetWorldPos = gridToWorld(targetGridPos.x, targetGridPos.y);
|
|
const endPos = { x: targetWorldPos.x, z: targetWorldPos.z };
|
|
|
|
const duration = 300; // ms por paso
|
|
const startTime = Date.now();
|
|
const standeeHeight = ASSETS.standees[unit.type].height;
|
|
|
|
const hop = () => {
|
|
const elapsed = Date.now() - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
|
|
// Easing suave (ease-in-out)
|
|
const eased = progress < 0.5
|
|
? 2 * progress * progress
|
|
: 1 - Math.pow(-2 * progress + 2, 2) / 2;
|
|
|
|
// Interpolación lineal en X y Z
|
|
unit.mesh.position.x = startPos.x + (endPos.x - startPos.x) * eased;
|
|
unit.mesh.position.z = startPos.z + (endPos.z - startPos.z) * eased;
|
|
|
|
// Saltito parabólico en Y
|
|
const hopHeight = 0.8; // Altura del salto
|
|
const hopProgress = Math.sin(progress * Math.PI); // 0 -> 1 -> 0
|
|
unit.mesh.position.y = (standeeHeight / 2) + (hopProgress * hopHeight);
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(hop);
|
|
} else {
|
|
// Asegurar posición final exacta
|
|
unit.mesh.position.x = endPos.x;
|
|
unit.mesh.position.z = endPos.z;
|
|
unit.mesh.position.y = standeeHeight / 2;
|
|
resolve();
|
|
}
|
|
};
|
|
|
|
hop();
|
|
});
|
|
};
|
|
|
|
// Mover paso a paso
|
|
for (let i = 0; i < pathCopy.length; i++) {
|
|
const step = pathCopy[i];
|
|
|
|
// Animar el movimiento
|
|
await animateStep(step);
|
|
|
|
// Actualizar posición lógica de la unidad
|
|
unit.x = step.x;
|
|
unit.y = step.y;
|
|
|
|
// Borrar el marcador de esta celda (el primero del array)
|
|
SESSION.path.shift();
|
|
updatePathVisuals();
|
|
}
|
|
|
|
// Centrar la cámara en la posición final (manteniendo el ángulo/zoom)
|
|
const endTarget = unit.mesh.position.clone();
|
|
endTarget.y = 0; // Target siempre a nivel de suelo
|
|
const currentCameraOffset = camera.position.clone().sub(controls.target);
|
|
|
|
controls.target.copy(endTarget);
|
|
camera.position.copy(endTarget).add(currentCameraOffset);
|
|
|
|
// Al terminar, deseleccionar
|
|
SESSION.selectedUnitId = null;
|
|
updateSelectionVisuals();
|
|
SESSION.isAnimating = false;
|
|
}
|
|
|
|
// --- INTERACCIÓN ---
|
|
const raycaster = new THREE.Raycaster();
|
|
const pointer = new THREE.Vector2();
|
|
|
|
window.addEventListener('pointerdown', (event) => {
|
|
// Bloquear interacciones durante animación
|
|
if (SESSION.isAnimating) return;
|
|
|
|
// CLICK IZQUIERDO: Selección y Pathfinding
|
|
if (event.button === 0) {
|
|
|
|
// Calcular coordenadas normalizadas (-1 a +1)
|
|
pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
|
|
|
|
raycaster.setFromCamera(pointer, camera);
|
|
|
|
// 1. Detectar Click en Entidades (Selección)
|
|
// Buscamos intersecciones con los meshes de las entidades
|
|
const entityMeshes = GAME_STATE.entities.map(e => e.mesh).filter(m => m);
|
|
const intersectsEntities = raycaster.intersectObjects(entityMeshes);
|
|
|
|
if (intersectsEntities.length > 0) {
|
|
// Hemos clickado una entidad
|
|
const clickedMesh = intersectsEntities[0].object;
|
|
const entity = GAME_STATE.entities.find(e => e.mesh === clickedMesh);
|
|
if (entity) {
|
|
console.log("Seleccionado:", entity.type);
|
|
SESSION.selectedUnitId = entity.id;
|
|
SESSION.path = []; // Resetear camino
|
|
updatePathVisuals();
|
|
updateSelectionVisuals(); // Actualizar color del standee
|
|
return; // Cortamos aquí para no procesar click de suelo a la vez
|
|
}
|
|
}
|
|
|
|
// 2. Si hay unidad seleccionada, procesar Click en Suelo (Move)
|
|
if (SESSION.selectedUnitId) {
|
|
const intersectsGround = raycaster.intersectObject(raycastPlane);
|
|
|
|
if (intersectsGround.length > 0) {
|
|
const point = intersectsGround[0].point;
|
|
const gridPos = worldToGrid(point.x, point.z);
|
|
|
|
// LOGICA DEL PATHFINDING MANUAL
|
|
|
|
// Punto de Origen: La última casilla del path, O la casilla de la unidad si empieza
|
|
let prevNode;
|
|
if (SESSION.path.length > 0) {
|
|
prevNode = SESSION.path[SESSION.path.length - 1];
|
|
} else {
|
|
const unit = GAME_STATE.entities.find(e => e.id === SESSION.selectedUnitId);
|
|
prevNode = { x: unit.x, y: unit.y };
|
|
}
|
|
|
|
// A. Caso Deshacer (Click en la última)
|
|
if (SESSION.path.length > 0) {
|
|
const lastNode = SESSION.path[SESSION.path.length - 1];
|
|
if (lastNode.x === gridPos.x && lastNode.y === gridPos.y) {
|
|
SESSION.path.pop(); // Borrar último
|
|
updatePathVisuals();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// B. Caso Añadir (Tiene que ser adyacente al anterior)
|
|
if (isAdjacent(prevNode, gridPos)) {
|
|
// Comprobación opcional: Evitar bucles (no clickar en uno que ya está en el path)
|
|
const alreadyInPath = SESSION.path.some(p => p.x === gridPos.x && p.y === gridPos.y);
|
|
const isUnitPos = (gridPos.x === prevNode.x && gridPos.y === prevNode.y && SESSION.path.length === 0);
|
|
|
|
if (!alreadyInPath && !isUnitPos) {
|
|
SESSION.path.push(gridPos);
|
|
updatePathVisuals();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// CLICK DERECHO: Ejecutar movimiento
|
|
if (event.button === 2) {
|
|
event.preventDefault(); // Evitar menú contextual
|
|
|
|
if (SESSION.selectedUnitId && SESSION.path.length > 0) {
|
|
animateMovement();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prevenir menú contextual del navegador
|
|
window.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault();
|
|
});
|
|
|
|
|
|
// --- CARGA Y RENDERIZADO ---
|
|
const textureLoader = new THREE.TextureLoader();
|
|
|
|
function loadTexture(path) {
|
|
return new Promise((resolve) => {
|
|
textureLoader.load(path, (tex) => {
|
|
tex.colorSpace = THREE.SRGBColorSpace;
|
|
tex.magFilter = THREE.NearestFilter;
|
|
tex.minFilter = THREE.NearestFilter;
|
|
resolve(tex);
|
|
});
|
|
});
|
|
}
|
|
|
|
async function initWorld() {
|
|
const tileTextures = {};
|
|
const standeeTextures = {};
|
|
|
|
// Cargar Tiles
|
|
for (const [key, def] of Object.entries(ASSETS.tiles)) {
|
|
const tex = await loadTexture(def.src);
|
|
tex.wrapS = THREE.RepeatWrapping;
|
|
tex.wrapT = THREE.RepeatWrapping;
|
|
// Repetición dinámica basada en tamaño (supone 2 unidades por repetición de textura base)
|
|
tex.repeat.set(def.width / 2, def.height / 2);
|
|
tileTextures[key] = tex;
|
|
}
|
|
// Cargar Standees
|
|
for (const [key, def] of Object.entries(ASSETS.standees)) {
|
|
standeeTextures[key] = await loadTexture(def.src);
|
|
}
|
|
|
|
// Instanciar Tiles (Suelo)
|
|
GAME_STATE.placedTiles.forEach(tileData => {
|
|
const def = ASSETS.tiles[tileData.type];
|
|
const tex = tileTextures[tileData.type];
|
|
const worldWidth = def.width * CONFIG.CELL_SIZE;
|
|
const worldHeight = def.height * CONFIG.CELL_SIZE;
|
|
|
|
const geometry = new THREE.PlaneGeometry(worldWidth, worldHeight);
|
|
const material = new THREE.MeshStandardMaterial({
|
|
map: tex,
|
|
transparent: true,
|
|
side: THREE.DoubleSide
|
|
});
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
|
|
mesh.rotation.x = -Math.PI / 2;
|
|
mesh.receiveShadow = true;
|
|
|
|
const originPos = gridToWorld(tileData.x, tileData.y);
|
|
|
|
// Ajuste de centro
|
|
mesh.position.x = originPos.x + (worldWidth / 2) - (CONFIG.CELL_SIZE / 2);
|
|
mesh.position.z = originPos.z + (worldHeight / 2) - (CONFIG.CELL_SIZE / 2);
|
|
mesh.position.y = 0;
|
|
|
|
if (tileData.rotation) {
|
|
mesh.rotation.z = tileData.rotation;
|
|
}
|
|
|
|
scene.add(mesh);
|
|
});
|
|
|
|
// Instanciar Entidades
|
|
GAME_STATE.entities.forEach(entity => {
|
|
const def = ASSETS.standees[entity.type];
|
|
const tex = standeeTextures[entity.type];
|
|
|
|
const imgAspect = tex.image.width / tex.image.height;
|
|
const height = def.height;
|
|
const width = height * imgAspect;
|
|
|
|
const geometry = new THREE.PlaneGeometry(width, height);
|
|
const material = new THREE.MeshStandardMaterial({
|
|
map: tex,
|
|
transparent: true,
|
|
alphaTest: 0.5,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
mesh.castShadow = true;
|
|
|
|
const pos = gridToWorld(entity.x, entity.y);
|
|
mesh.position.set(pos.x, height / 2, pos.z);
|
|
|
|
scene.add(mesh);
|
|
entity.mesh = mesh;
|
|
});
|
|
|
|
// --- PAREDES DE PRUEBA (ALREDEDOR DE TILE 1) ---
|
|
// Tile 1 es 'tile_base' en 0,0. Tamaño 4x4 celdas -> 8x8 unidades world
|
|
const tile1 = GAME_STATE.placedTiles.find(t => t.id === 1);
|
|
if (tile1) {
|
|
const wallTex = await loadTexture(ASSETS.tiles['wall_1'].src);
|
|
wallTex.wrapS = THREE.RepeatWrapping;
|
|
wallTex.wrapT = THREE.RepeatWrapping;
|
|
wallTex.repeat.set(2, 2); // 2x2 repeticiones como solicitado
|
|
|
|
const baseTileWorldSize = 4 * CONFIG.CELL_SIZE; // 8 unidades
|
|
const wallHeight = 2.5; // Altura de la pared
|
|
const halfSize = baseTileWorldSize / 2;
|
|
|
|
// Calcular el centro exacto de la tile 1 tal como se hace al renderizarla
|
|
// Copiamos la lógica de renderizado de tiles:
|
|
const def = ASSETS.tiles[tile1.type];
|
|
const worldWidth = def.width * CONFIG.CELL_SIZE;
|
|
const worldHeight = def.height * CONFIG.CELL_SIZE;
|
|
const originPos = gridToWorld(tile1.x, tile1.y);
|
|
|
|
const centerX = originPos.x + (worldWidth / 2) - (CONFIG.CELL_SIZE / 2);
|
|
const centerZ = originPos.z + (worldHeight / 2) - (CONFIG.CELL_SIZE / 2);
|
|
|
|
const wallGeometry = new THREE.PlaneGeometry(baseTileWorldSize, wallHeight);
|
|
const wallMaterial = new THREE.MeshStandardMaterial({
|
|
map: wallTex,
|
|
transparent: true,
|
|
opacity: 1.0,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
const createWall = (offsetX, offsetZ, rotationY, opacity) => {
|
|
const wall = new THREE.Mesh(wallGeometry, wallMaterial.clone());
|
|
wall.material.opacity = opacity;
|
|
wall.material.transparent = opacity < 1.0; // Solo transparente si opacity < 1
|
|
// Posicionamos relativo al CENTRO de la tile
|
|
wall.position.set(centerX + offsetX, wallHeight / 2, centerZ + offsetZ);
|
|
wall.rotation.y = rotationY;
|
|
wall.castShadow = true;
|
|
wall.receiveShadow = true;
|
|
scene.add(wall);
|
|
SESSION.walls.push(wall);
|
|
};
|
|
|
|
// Norte (Arriba en pantalla, Z menor) -> 100%
|
|
createWall(0, -halfSize, 0, 1.0);
|
|
// Sur (Abajo en pantalla, Z mayor) -> 50%
|
|
createWall(0, halfSize, 0, 0.5);
|
|
// Este (Derecha en pantalla, X mayor) -> 50%
|
|
createWall(halfSize, 0, Math.PI / 2, 0.5);
|
|
// Oeste (Izquierda en pantalla, X menor) -> 100%
|
|
createWall(-halfSize, 0, Math.PI / 2, 1.0);
|
|
|
|
// --- PUERTA EN PARED NORTE ---
|
|
const doorTex = await loadTexture(ASSETS.tiles['door_1'].src);
|
|
const doorWidth = 1.5; // Ancho de la puerta
|
|
const doorHeight = 2.0; // Alto de la puerta
|
|
|
|
const doorGeometry = new THREE.PlaneGeometry(doorWidth, doorHeight);
|
|
const doorMaterial = new THREE.MeshStandardMaterial({
|
|
map: doorTex,
|
|
transparent: true,
|
|
alphaTest: 0.1,
|
|
side: THREE.DoubleSide
|
|
});
|
|
|
|
const door = new THREE.Mesh(doorGeometry, doorMaterial);
|
|
// Posicionar en la celda (1, -1) - segunda celda de la pared norte
|
|
const doorGridPos = gridToWorld(1, -1);
|
|
door.position.set(doorGridPos.x, doorHeight / 2, centerZ - halfSize + 0.05);
|
|
door.rotation.y = 0; // Misma rotación que pared norte
|
|
scene.add(door);
|
|
}
|
|
}
|
|
|
|
initWorld();
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
controls.update();
|
|
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
const aspect = window.innerWidth / window.innerHeight;
|
|
camera.left = -d * aspect;
|
|
camera.right = d * aspect;
|
|
camera.top = d;
|
|
camera.bottom = -d;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|