export class GameRenderer {
constructor() {
this.scene = null;
this.camera = null;
this.renderer = null;
this.canvas = null;
this.tiles = new Map();
// Map of tile meshes
this.buildings = new Map();
// Map of building meshes
this.cursors = new Map();
// Map of player cursors
this.labels = new Map();
// Map of building labels
this.hoveredTile = null;
this.cameraPos = { x: 0, y: 50, z: 50 };
this.cameraZoom = 1; // Re-introduced for proper orthographic zoom
this.TILE_SIZE = 2;
this.VIEW_DISTANCE = 50;
}
init() {
this.canvas = document.getElementById('gameCanvas');
// Create scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x87CEEB);
// Sky blue
// Create camera
this.camera = new THREE.OrthographicCamera(
-40, 40, 30, -30, 0.1, 1000
);
this.camera.position.set(0, 50, 50);
this.camera.lookAt(0, 0, 0);
// Create renderer
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.shadowMap.enabled = true;
// Add lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
this.scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 20, 10);
directionalLight.castShadow = true;
this.scene.add(directionalLight);
// Create ground
this.createGround();
// Handle window resize
window.addEventListener('resize', () => this.onResize());
}
createGround() {
const geometry = new THREE.PlaneGeometry(1000, 1000);
const material = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Forest green
const ground = new THREE.Mesh(geometry, material);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
this.scene.add(ground);
}
createTile(x, y, color = 0x90EE90) {
const geometry = new THREE.PlaneGeometry(this.TILE_SIZE - 0.1, this.TILE_SIZE - 0.1);
const material = new THREE.MeshBasicMaterial({
color: color,
transparent: true,
opacity: 0.5
});
const tile = new THREE.Mesh(geometry, material);
tile.position.set(x * this.TILE_SIZE, 0.01, y * this.TILE_SIZE);
tile.rotation.x = -Math.PI / 2;
tile.userData = { x, y };
return tile;
}
createBuilding(buildingData) {
const { type, x, y, owner_id, name } = buildingData;
// Get player color for accents
const playerColor = this.getPlayerColor(owner_id);
// Create building group
const buildingGroup = new THREE.Group();
buildingGroup.position.set(x * this.TILE_SIZE, 0, y * this.TILE_SIZE);
buildingGroup.userData = { x, y, owner_id, type, name };
// Create building based on type
let buildingMesh;
if (type.includes('house')) {
buildingMesh = this.createHouse(type, playerColor);
} else if (type.includes('shop') || type === 'supermarket' || type === 'mall') {
buildingMesh = this.createCommercialBuilding(type, playerColor);
} else if (type.includes('factory')) {
buildingMesh = this.createFactory(type, playerColor);
} else if (type === 'road') {
buildingMesh = this.createRoad();
} else if (type === 'park' || type === 'plaza') {
buildingMesh = this.createPark(type, playerColor);
} else if (type === 'town_hall') {
buildingMesh = this.createTownHall(playerColor);
} else if (type === 'power_plant') {
buildingMesh = this.createPowerPlant(playerColor);
} else {
// Fallback to simple building
buildingMesh = this.createSimpleBuilding(2, 0x808080);
}
buildingGroup.add(buildingMesh);
return buildingGroup;
}
getPlayerColor(owner_id) {
// Try to find the player color from game state or use default
if (this.gameState && this.gameState.players && this.gameState.players[owner_id]) {
const color = this.gameState.players[owner_id].color;
return new THREE.Color(color);
}
return new THREE.Color(0xff6b6b); // Default reddish color
}
createSimpleBuilding(height, color) {
const geometry = new THREE.BoxGeometry(
this.TILE_SIZE - 0.2,
height,
this.TILE_SIZE - 0.2
);
const material = new THREE.MeshLambertMaterial({ color: color });
const building = new THREE.Mesh(geometry, material);
building.position.y = height / 2;
building.castShadow = true;
building.receiveShadow = true;
return building;
}
createHouse(type, playerColor) {
const group = new THREE.Group();
// Determine house size and height
let houseWidth = 1.4;
let houseDepth = 1.2;
let wallHeight = 1.5;
let roofHeight = 0.8;
if (type === 'medium_house') {
houseWidth = 1.6;
houseDepth = 1.4;
wallHeight = 2.0;
roofHeight = 1.0;
} else if (type === 'large_house') {
houseWidth = 1.7;
houseDepth = 1.6;
wallHeight = 2.5;
roofHeight = 1.2;
}
// Main house body
const wallGeometry = new THREE.BoxGeometry(houseWidth, wallHeight, houseDepth);
const wallMaterial = new THREE.MeshLambertMaterial({ color: 0xf4f4f4 });
const walls = new THREE.Mesh(wallGeometry, wallMaterial);
walls.position.y = wallHeight / 2;
walls.castShadow = true;
walls.receiveShadow = true;
group.add(walls);
// Roof (triangular prism) - player color
const roofGeometry = new THREE.CylinderGeometry(0, houseWidth * 0.8, roofHeight, 4);
const roofMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = wallHeight + roofHeight / 2;
roof.rotation.y = Math.PI / 4; // Rotate 45 degrees to make it diamond-shaped
roof.castShadow = true;
group.add(roof);
// Door
const doorGeometry = new THREE.BoxGeometry(0.3, 0.6, 0.05);
const doorMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(0, 0.3, houseDepth / 2 + 0.02);
group.add(door);
// Windows with player color frames
const createWindow = (x, y, z) => {
const windowGroup = new THREE.Group();
// Window frame - player color
const frameGeometry = new THREE.BoxGeometry(0.35, 0.35, 0.05);
const frameMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const frame = new THREE.Mesh(frameGeometry, frameMaterial);
windowGroup.add(frame);
// Window glass
const glassGeometry = new THREE.BoxGeometry(0.25, 0.25, 0.02);
const glassMaterial = new THREE.MeshLambertMaterial({
color: 0x87ceeb,
transparent: true,
opacity: 0.7
});
const glass = new THREE.Mesh(glassGeometry, glassMaterial);
glass.position.z = 0.01;
windowGroup.add(glass);
windowGroup.position.set(x, y, z);
return windowGroup;
};
// Add windows
group.add(createWindow(-houseWidth/3, wallHeight/2, houseDepth/2 + 0.02));
group.add(createWindow(houseWidth/3, wallHeight/2, houseDepth/2 + 0.02));
// Chimney for medium and large houses
if (type !== 'small_house') {
const chimneyGeometry = new THREE.BoxGeometry(0.2, 0.6, 0.2);
const chimneyMaterial = new THREE.MeshLambertMaterial({ color: 0x696969 });
const chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
chimney.position.set(houseWidth/3, wallHeight + roofHeight/2 + 0.3, -houseDepth/4);
chimney.castShadow = true;
group.add(chimney);
}
return group;
}
createCommercialBuilding(type, playerColor) {
const group = new THREE.Group();
let width = 1.6;
let height = 2.5;
let depth = 1.4;
let signColor = playerColor;
if (type === 'supermarket') {
width = 1.7;
height = 3.0;
depth = 1.6;
} else if (type === 'mall') {
width = 1.8;
height = 3.5;
depth = 1.7;
}
// Main building
const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0xe6e6e6 });
const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
building.position.y = height / 2;
building.castShadow = true;
building.receiveShadow = true;
group.add(building);
// Storefront sign - player color
const signGeometry = new THREE.BoxGeometry(width * 0.9, 0.3, 0.05);
const signMaterial = new THREE.MeshLambertMaterial({ color: signColor });
const sign = new THREE.Mesh(signGeometry, signMaterial);
sign.position.set(0, height * 0.8, depth / 2 + 0.02);
group.add(sign);
// Large windows
const windowGeometry = new THREE.BoxGeometry(width * 0.7, height * 0.4, 0.05);
const windowMaterial = new THREE.MeshLambertMaterial({
color: 0x4169e1,
transparent: true,
opacity: 0.6
});
const windows = new THREE.Mesh(windowGeometry, windowMaterial);
windows.position.set(0, height * 0.3, depth / 2 + 0.01);
group.add(windows);
// Entrance door
const doorGeometry = new THREE.BoxGeometry(0.4, 0.8, 0.05);
const doorMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(0, 0.4, depth / 2 + 0.02);
group.add(door);
// Air conditioning units on roof for larger buildings
if (type === 'supermarket' || type === 'mall') {
const acGeometry = new THREE.BoxGeometry(0.4, 0.2, 0.3);
const acMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
const ac1 = new THREE.Mesh(acGeometry, acMaterial);
ac1.position.set(-width/3, height + 0.1, 0);
group.add(ac1);
const ac2 = new THREE.Mesh(acGeometry, acMaterial);
ac2.position.set(width/3, height + 0.1, 0);
group.add(ac2);
}
return group;
}
createFactory(type, playerColor) {
const group = new THREE.Group();
let width = 1.6;
let height = 3.5;
let depth = 1.5;
if (type === 'large_factory') {
width = 1.8;
height = 4.5;
depth = 1.7;
}
// Main factory building
const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0x696969 });
const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
building.position.y = height / 2;
building.castShadow = true;
building.receiveShadow = true;
group.add(building);
// Smokestack - player color stripe
const stackHeight = height + 1.5;
const stackGeometry = new THREE.CylinderGeometry(0.1, 0.15, stackHeight);
const stackMaterial = new THREE.MeshLambertMaterial({ color: 0x404040 });
const stack = new THREE.Mesh(stackGeometry, stackMaterial);
stack.position.set(width/3, stackHeight/2, -depth/4);
stack.castShadow = true;
group.add(stack);
// Player color stripe on smokestack
const stripeGeometry = new THREE.CylinderGeometry(0.12, 0.16, 0.3);
const stripeMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial);
stripe.position.set(width/3, stackHeight * 0.7, -depth/4);
group.add(stripe);
// Factory windows
const createFactoryWindow = (x, y, z) => {
const windowGeometry = new THREE.BoxGeometry(0.3, 0.4, 0.05);
const windowMaterial = new THREE.MeshLambertMaterial({
color: 0xffff88,
transparent: true,
opacity: 0.8
});
const window = new THREE.Mesh(windowGeometry, windowMaterial);
window.position.set(x, y, z);
return window;
};
// Add multiple windows
for (let i = -1; i <= 1; i++) {
for (let j = 1; j <= 2; j++) {
group.add(createFactoryWindow(i * width/3, j * height/3, depth/2 + 0.01));
}
}
// Loading dock - player color
const dockGeometry = new THREE.BoxGeometry(0.6, 0.1, 0.4);
const dockMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const dock = new THREE.Mesh(dockGeometry, dockMaterial);
dock.position.set(-width/3, 0.05, depth/2 + 0.2);
group.add(dock);
return group;
}
createRoad() {
const geometry = new THREE.BoxGeometry(
this.TILE_SIZE,
0.1,
this.TILE_SIZE
);
const material = new THREE.MeshLambertMaterial({ color: 0x2F4F4F });
const road = new THREE.Mesh(geometry, material);
road.position.y = 0.05;
road.receiveShadow = true;
return road;
}
createPark(type, playerColor) {
const group = new THREE.Group();
// Base green area
const baseGeometry = new THREE.BoxGeometry(this.TILE_SIZE - 0.1, 0.1, this.TILE_SIZE - 0.1);
const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x32cd32 });
const base = new THREE.Mesh(baseGeometry, baseMaterial);
base.position.y = 0.05;
base.receiveShadow = true;
group.add(base);
if (type === 'park') {
// Add trees
const createTree = (x, z) => {
const treeGroup = new THREE.Group();
// Trunk
const trunkGeometry = new THREE.CylinderGeometry(0.05, 0.08, 0.5);
const trunkMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
trunk.position.y = 0.25;
trunk.castShadow = true;
treeGroup.add(trunk);
// Leaves - player color accent
const leavesGeometry = new THREE.SphereGeometry(0.3, 8, 6);
const leavesMaterial = new THREE.MeshLambertMaterial({
color: playerColor.clone().lerp(new THREE.Color(0x228b22), 0.7)
});
const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
leaves.position.y = 0.6;
leaves.castShadow = true;
treeGroup.add(leaves);
treeGroup.position.set(x, 0, z);
return treeGroup;
};
group.add(createTree(-0.4, -0.4));
group.add(createTree(0.4, 0.4));
} else { // plaza
// Add fountain with player color accents
const fountainGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.3);
const fountainMaterial = new THREE.MeshLambertMaterial({ color: 0xd3d3d3 });
const fountain = new THREE.Mesh(fountainGeometry, fountainMaterial);
fountain.position.y = 0.25;
fountain.castShadow = true;
group.add(fountain);
// Water with player color tint
const waterGeometry = new THREE.CylinderGeometry(0.25, 0.25, 0.05);
const waterMaterial = new THREE.MeshLambertMaterial({
color: playerColor.clone().lerp(new THREE.Color(0x4169e1), 0.5),
transparent: true,
opacity: 0.7
});
const water = new THREE.Mesh(waterGeometry, waterMaterial);
water.position.y = 0.35;
group.add(water);
}
return group;
}
createTownHall(playerColor) {
const group = new THREE.Group();
// Main building
const mainGeometry = new THREE.BoxGeometry(1.7, 4.0, 1.6);
const mainMaterial = new THREE.MeshLambertMaterial({ color: 0xf5f5dc });
const main = new THREE.Mesh(mainGeometry, mainMaterial);
main.position.y = 2.0;
main.castShadow = true;
main.receiveShadow = true;
group.add(main);
// Clock tower
const towerGeometry = new THREE.BoxGeometry(0.6, 1.5, 0.6);
const towerMaterial = new THREE.MeshLambertMaterial({ color: 0xe6e6e6 });
const tower = new THREE.Mesh(towerGeometry, towerMaterial);
tower.position.y = 4.75;
tower.castShadow = true;
group.add(tower);
// Clock face - player color
const clockGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.05);
const clockMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const clock = new THREE.Mesh(clockGeometry, clockMaterial);
clock.position.set(0, 4.5, 0.3);
clock.rotation.x = Math.PI / 2;
group.add(clock);
// Flag pole with player color flag
const poleGeometry = new THREE.CylinderGeometry(0.02, 0.02, 1.0);
const poleMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
const pole = new THREE.Mesh(poleGeometry, poleMaterial);
pole.position.set(0.6, 5.5, 0);
group.add(pole);
const flagGeometry = new THREE.PlaneGeometry(0.3, 0.2);
const flagMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const flag = new THREE.Mesh(flagGeometry, flagMaterial);
flag.position.set(0.75, 5.7, 0);
group.add(flag);
// Steps with player color carpet
const stepsGeometry = new THREE.BoxGeometry(1.8, 0.2, 0.6);
const stepsMaterial = new THREE.MeshLambertMaterial({ color: 0xd3d3d3 });
const steps = new THREE.Mesh(stepsGeometry, stepsMaterial);
steps.position.set(0, 0.1, 0.8);
group.add(steps);
const carpetGeometry = new THREE.BoxGeometry(0.4, 0.01, 0.6);
const carpetMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const carpet = new THREE.Mesh(carpetGeometry, carpetMaterial);
carpet.position.set(0, 0.21, 0.8);
group.add(carpet);
return group;
}
createPowerPlant(playerColor) {
const group = new THREE.Group();
// Main building
const mainGeometry = new THREE.BoxGeometry(1.8, 3.0, 1.7);
const mainMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
const main = new THREE.Mesh(mainGeometry, mainMaterial);
main.position.y = 1.5;
main.castShadow = true;
main.receiveShadow = true;
group.add(main);
// Cooling towers
const createCoolingTower = (x, z) => {
const towerGeometry = new THREE.CylinderGeometry(0.2, 0.3, 4.0);
const towerMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
const tower = new THREE.Mesh(towerGeometry, towerMaterial);
tower.position.set(x, 2.0, z);
tower.castShadow = true;
// Player color stripe on tower
const stripeGeometry = new THREE.CylinderGeometry(0.22, 0.32, 0.3);
const stripeMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial);
stripe.position.set(x, 3.0, z);
group.add(stripe);
return tower;
};
group.add(createCoolingTower(-0.5, -0.3));
group.add(createCoolingTower(0.5, -0.3));
// Control room with player color accents
const controlGeometry = new THREE.BoxGeometry(0.8, 1.0, 0.6);
const controlMaterial = new THREE.MeshLambertMaterial({ color: 0x777777 });
const control = new THREE.Mesh(controlGeometry, controlMaterial);
control.position.set(0, 3.5, 0.4);
control.castShadow = true;
group.add(control);
// Control room windows - player color frames
const windowGeometry = new THREE.BoxGeometry(0.6, 0.3, 0.05);
const windowMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
const windows = new THREE.Mesh(windowGeometry, windowMaterial);
windows.position.set(0, 3.5, 0.7);
group.add(windows);
// Power lines
const lineGeometry = new THREE.CylinderGeometry(0.01, 0.01, 2.0);
const lineMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 });
const line = new THREE.Mesh(lineGeometry, lineMaterial);
line.position.set(0.8, 4.0, 0);
line.rotation.z = Math.PI / 6;
group.add(line);
return group;
}
createCursor(playerId, color) {
const geometry = new THREE.RingGeometry(0.5, 0.7, 16);
const material = new THREE.MeshBasicMaterial({
color: color,
side: THREE.DoubleSide
});
const cursor = new THREE.Mesh(geometry, material);
cursor.rotation.x = -Math.PI / 2;
cursor.position.y = 0.02;
return cursor;
}
updateGameState(gameState) {
// Store game state for player color access
this.gameState = gameState;
// Clear existing buildings
this.buildings.forEach(mesh => this.scene.remove(mesh));
this.buildings.clear();
// Add all buildings
Object.values(gameState.buildings).forEach(building => {
this.addBuilding(building);
});
}
addBuilding(buildingData) {
const key = `${buildingData.x},${buildingData.y}`;
// Remove existing building at this position
if (this.buildings.has(key)) {
this.scene.remove(this.buildings.get(key));
}
// Create and add new building
const building = this.createBuilding(buildingData);
this.buildings.set(key, building);
this.scene.add(building);
}
removeBuilding(x, y) {
const key = `${x},${y}`;
if (this.buildings.has(key)) {
this.scene.remove(this.buildings.get(key));
this.buildings.delete(key);
}
}
updateBuildingName(x, y, name) {
const key = `${x},${y}`;
const building = this.buildings.get(key);
if (building) {
building.userData.name = name;
}
}
updateCursor(playerId, x, y) {
if (!this.cursors.has(playerId)) {
const cursor = this.createCursor(playerId, 0xff0000);
this.cursors.set(playerId, cursor);
this.scene.add(cursor);
}
const cursor = this.cursors.get(playerId);
cursor.position.x = x * this.TILE_SIZE;
cursor.position.z = y * this.TILE_SIZE;
}
removeCursor(playerId) {
if (this.cursors.has(playerId)) {
this.scene.remove(this.cursors.get(playerId));
this.cursors.delete(playerId);
}
}
highlightTile(x, y) {
// Remove previous highlight
if (this.hoveredTile) {
this.scene.remove(this.hoveredTile);
this.hoveredTile = null;
}
// Create new highlight
if (x !== null && y !== null) {
this.hoveredTile = this.createTile(x, y, 0xFFFF00);
this.scene.add(this.hoveredTile);
}
}
screenToWorld(screenX, screenY) {
const rect = this.canvas.getBoundingClientRect();
const x = ((screenX - rect.left) / rect.width) * 2 - 1;
const y = -((screenY - rect.top) / rect.height) * 2 + 1;
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera);
// Raycast to ground plane
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
const intersection = new THREE.Vector3();
raycaster.ray.intersectPlane(plane, intersection);
return {
x: Math.floor(intersection.x / this.TILE_SIZE),
y: Math.floor(intersection.z / this.TILE_SIZE)
};
}
moveCamera(dx, dy) {
this.cameraPos.x += dx;
this.cameraPos.z += dy;
this.updateCameraPosition();
}
zoomCamera(delta) {
// Adjust the zoom property. A positive delta (scroll up) increases zoom.
this.cameraZoom += delta;
// Clamp the zoom level to a reasonable range
this.cameraZoom = Math.max(0.5, Math.min(2.5, this.cameraZoom));
// Apply the zoom to the camera and update its projection matrix
this.camera.zoom = this.cameraZoom;
this.camera.updateProjectionMatrix();
}
updateCameraPosition() {
this.camera.position.set(
this.cameraPos.x, this.cameraPos.y, this.cameraPos.z
);
this.camera.lookAt(this.cameraPos.x, 0, this.cameraPos.z - 50);
}
startRenderLoop() {
const animate = () => {
requestAnimationFrame(animate);
this.renderer.render(this.scene, this.camera);
};
animate();
}
onResize() {
const aspect = window.innerWidth / window.innerHeight;
this.camera.left = -40 * aspect;
this.camera.right = 40 * aspect;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
}
}
Reference in New Issue View Git Blame Copy Permalink