let-them-talk 4.3.0 → 5.2.0

package/office/post-processing.js

@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import { S } from './state.js';
+
+// ============================================================
+// POST-PROCESSING — bloom, tone mapping for cinematic visuals
+// Makes neon signs glow, street lights bloom, windows shine
+// ============================================================
+
+var composer = null;
+var bloomPass = null;
+
+export function initPostProcessing() {
+  if (!S.renderer || !S.scene || !S.camera) return null;
+
+  var w = S.container.clientWidth;
+  var h = S.container.clientHeight;
+
+  composer = new EffectComposer(S.renderer);
+
+  // Base render
+  var renderPass = new RenderPass(S.scene, S.camera);
+  composer.addPass(renderPass);
+
+  // Bloom — makes emissive materials glow
+  bloomPass = new UnrealBloomPass(
+    new THREE.Vector2(w, h),
+    0.4,    // strength (subtle, not overpowering)
+    0.6,    // radius (spread of glow)
+    0.85    // threshold (only bright things bloom)
+  );
+  composer.addPass(bloomPass);
+
+  // Output — handles tone mapping + color space
+  var outputPass = new OutputPass();
+  composer.addPass(outputPass);
+
+  // Boost tone mapping for cinematic look
+  S.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  S.renderer.toneMappingExposure = 1.0;
+
+  // Store reference
+  S._composer = composer;
+  S._bloomPass = bloomPass;
+
+  return composer;
+}
+
+export function renderWithPostProcessing() {
+  if (composer) {
+    composer.render();
+  } else {
+    S.renderer.render(S.scene, S.camera);
+  }
+}
+
+export function setBloomStrength(strength) {
+  if (bloomPass) bloomPass.strength = strength;
+}
+
+export function setBloomThreshold(threshold) {
+  if (bloomPass) bloomPass.threshold = threshold;
+}
+
+export function resizePostProcessing(w, h) {
+  if (composer) composer.setSize(w, h);
+}
+
+export function disposePostProcessing() {
+  if (composer) {
+    composer.dispose();
+    composer = null;
+    bloomPass = null;
+    S._composer = null;
+    S._bloomPass = null;
+  }
+}
+
+export function getComposer() { return composer; }

package/office/sky.js

@@ -0,0 +1,319 @@
+import * as THREE from 'three';
+
+/**
+ * Sky system for AI City day/night cycle.
+ * - Sky dome with gradient color lerp (dawn/day/dusk/night)
+ * - Star field particle system (visible at night)
+ * - Time-of-day HUD indicator
+ * - Exports getTimeOfDay() for other modules (lights, windows, agents)
+ * Target: minimal GPU cost — single sphere + point cloud, no shaders.
+ */
+
+let skyDome = null;
+let starField = null;
+let timeHudEl = null;
+let gameTime = 0.5; // 0-1, 0=midnight, 0.25=dawn, 0.5=noon, 0.75=dusk
+let timeSpeed = 1 / 600; // Full cycle in 600s (10 min) by default
+let paused = false;
+
+// Sky color presets (interpolated based on gameTime)
+const SKY_COLORS = {
+  midnight: new THREE.Color(0x0a0a1a),
+  dawn:     new THREE.Color(0xff7744),
+  morning:  new THREE.Color(0x87CEEB),
+  noon:     new THREE.Color(0x4a90d9),
+  afternoon:new THREE.Color(0x6bb3e0),
+  dusk:     new THREE.Color(0xff6633),
+  evening:  new THREE.Color(0x1a1a3a),
+};
+
+// Fog color follows sky
+const FOG_COLORS = {
+  midnight: new THREE.Color(0x050510),
+  dawn:     new THREE.Color(0xcc8866),
+  noon:     new THREE.Color(0x8899aa),
+  dusk:     new THREE.Color(0xcc6644),
+  evening:  new THREE.Color(0x101020),
+};
+
+const TIME_LABELS = [
+  { t: 0,    label: '12:00 AM', icon: '🌙' },
+  { t: 0.125,label: '3:00 AM',  icon: '🌙' },
+  { t: 0.25, label: '6:00 AM',  icon: '🌅' },
+  { t: 0.375,label: '9:00 AM',  icon: '☀️' },
+  { t: 0.5,  label: '12:00 PM', icon: '☀️' },
+  { t: 0.625,label: '3:00 PM',  icon: '☀️' },
+  { t: 0.75, label: '6:00 PM',  icon: '🌅' },
+  { t: 0.875,label: '9:00 PM',  icon: '🌙' },
+];
+
+const TIME_HUD_STYLES = `
+  .sky-time-hud {
+    position: fixed;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 90;
+    pointer-events: none;
+    font-family: 'Segoe UI', sans-serif;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(0,0,0,0.5);
+    border: 1px solid rgba(255,255,255,0.1);
+    border-radius: 20px;
+    padding: 4px 14px;
+    backdrop-filter: blur(6px);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+  .sky-time-hud.visible { opacity: 1; }
+  .sky-time-icon { font-size: 16px; }
+  .sky-time-label {
+    font-size: 12px;
+    color: #ddd;
+    font-variant-numeric: tabular-nums;
+    min-width: 60px;
+    text-align: center;
+  }
+  .sky-time-bar {
+    width: 80px;
+    height: 4px;
+    background: rgba(255,255,255,0.15);
+    border-radius: 2px;
+    overflow: hidden;
+  }
+  .sky-time-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #1a1a3a 0%, #ff7744 25%, #4a90d9 50%, #ff6633 75%, #1a1a3a 100%);
+    border-radius: 2px;
+    transition: width 0.5s linear;
+  }
+`;
+
+/**
+ * Create the sky dome and star field. Call once during city init.
+ * @param {THREE.Scene} scene
+ * @param {number} radius - Sky dome radius (default 500)
+ * @returns {{ skyDome: THREE.Mesh, starField: THREE.Points }}
+ */
+export function createSky(scene, radius) {
+  const r = radius || 500;
+
+  // Sky dome — large inverted sphere
+  const skyGeo = new THREE.SphereGeometry(r, 32, 16);
+  const skyMat = new THREE.MeshBasicMaterial({
+    color: SKY_COLORS.noon,
+    side: THREE.BackSide,
+    fog: false,
+  });
+  skyDome = new THREE.Mesh(skyGeo, skyMat);
+  skyDome.name = 'sky-dome';
+  skyDome.renderOrder = -1;
+  scene.add(skyDome);
+
+  // Star field — point cloud (only visible at night)
+  const starCount = 500;
+  const starGeo = new THREE.BufferGeometry();
+  const positions = new Float32Array(starCount * 3);
+  for (let i = 0; i < starCount; i++) {
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.acos(Math.random() * 0.8 + 0.2); // Upper hemisphere only
+    const sr = r * 0.95;
+    positions[i * 3]     = sr * Math.sin(phi) * Math.cos(theta);
+    positions[i * 3 + 1] = sr * Math.cos(phi);
+    positions[i * 3 + 2] = sr * Math.sin(phi) * Math.sin(theta);
+  }
+  starGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  const starMat = new THREE.PointsMaterial({
+    color: 0xffffff,
+    size: 1.5,
+    transparent: true,
+    opacity: 0,
+    fog: false,
+    sizeAttenuation: false,
+  });
+  starField = new THREE.Points(starGeo, starMat);
+  starField.name = 'star-field';
+  scene.add(starField);
+
+  // Time HUD
+  initTimeHUD();
+
+  return { skyDome, starField };
+}
+
+/**
+ * Update sky colors and stars based on current game time.
+ * Call once per frame (or at 10Hz for performance).
+ * @param {number} dt - Delta time in seconds
+ * @param {THREE.Scene} scene - For fog color updates
+ */
+export function updateSky(dt, scene) {
+  if (paused) return;
+  gameTime = (gameTime + timeSpeed * dt) % 1;
+
+  // Interpolate sky color
+  const skyColor = getSkyColorAtTime(gameTime);
+  if (skyDome) skyDome.material.color.copy(skyColor);
+
+  // Fog
+  if (scene && scene.fog) {
+    const fogColor = getFogColorAtTime(gameTime);
+    scene.fog.color.copy(fogColor);
+  }
+
+  // Stars: fade in at night (0.8-1.0 and 0.0-0.2)
+  if (starField) {
+    const nightness = getNightness(gameTime);
+    starField.material.opacity = nightness;
+    starField.visible = nightness > 0.01;
+  }
+
+  // Update HUD
+  updateTimeHUD();
+}
+
+/**
+ * Get current time of day (0-1). 0=midnight, 0.5=noon.
+ * @returns {number}
+ */
+export function getTimeOfDay() {
+  return gameTime;
+}
+
+/**
+ * Set game time directly.
+ * @param {number} t - 0-1
+ */
+export function setTimeOfDay(t) {
+  gameTime = ((t % 1) + 1) % 1;
+}
+
+/**
+ * Set the speed of the day/night cycle.
+ * @param {number} cycleDurationSeconds - Full cycle duration (default 600)
+ */
+export function setCycleSpeed(cycleDurationSeconds) {
+  timeSpeed = 1 / (cycleDurationSeconds || 600);
+}
+
+/**
+ * Pause/resume the cycle.
+ * @param {boolean} p
+ */
+export function setPaused(p) {
+  paused = p;
+}
+
+/**
+ * Is it currently night? (for street lights, windows, agent behavior)
+ * @returns {boolean}
+ */
+export function isNight() {
+  return gameTime < 0.22 || gameTime > 0.78;
+}
+
+/**
+ * Get nightness factor (0 = full day, 1 = full night).
+ * Smooth transition during dawn/dusk.
+ * @param {number} t
+ * @returns {number}
+ */
+function getNightness(t) {
+  // Night: 0.85-1.0 and 0.0-0.15 = full night
+  // Dawn: 0.15-0.3, Dusk: 0.7-0.85 = transition
+  if (t < 0.15) return 1;
+  if (t < 0.3) return 1 - (t - 0.15) / 0.15;
+  if (t < 0.7) return 0;
+  if (t < 0.85) return (t - 0.7) / 0.15;
+  return 1;
+}
+
+function getSkyColorAtTime(t) {
+  const c = new THREE.Color();
+  if (t < 0.2)       c.lerpColors(SKY_COLORS.midnight, SKY_COLORS.dawn, t / 0.2);
+  else if (t < 0.35) c.lerpColors(SKY_COLORS.dawn, SKY_COLORS.morning, (t - 0.2) / 0.15);
+  else if (t < 0.5)  c.lerpColors(SKY_COLORS.morning, SKY_COLORS.noon, (t - 0.35) / 0.15);
+  else if (t < 0.65) c.lerpColors(SKY_COLORS.noon, SKY_COLORS.afternoon, (t - 0.5) / 0.15);
+  else if (t < 0.8)  c.lerpColors(SKY_COLORS.afternoon, SKY_COLORS.dusk, (t - 0.65) / 0.15);
+  else if (t < 0.9)  c.lerpColors(SKY_COLORS.dusk, SKY_COLORS.evening, (t - 0.8) / 0.1);
+  else               c.lerpColors(SKY_COLORS.evening, SKY_COLORS.midnight, (t - 0.9) / 0.1);
+  return c;
+}
+
+function getFogColorAtTime(t) {
+  const c = new THREE.Color();
+  if (t < 0.25)      c.lerpColors(FOG_COLORS.midnight, FOG_COLORS.dawn, t / 0.25);
+  else if (t < 0.5)  c.lerpColors(FOG_COLORS.dawn, FOG_COLORS.noon, (t - 0.25) / 0.25);
+  else if (t < 0.75) c.lerpColors(FOG_COLORS.noon, FOG_COLORS.dusk, (t - 0.5) / 0.25);
+  else               c.lerpColors(FOG_COLORS.dusk, FOG_COLORS.midnight, (t - 0.75) / 0.25);
+  return c;
+}
+
+function getTimeLabel(t) {
+  const hours = Math.floor(t * 24);
+  const minutes = Math.floor((t * 24 - hours) * 60);
+  const h12 = hours % 12 || 12;
+  const ampm = hours < 12 ? 'AM' : 'PM';
+  return h12 + ':' + (minutes < 10 ? '0' : '') + minutes + ' ' + ampm;
+}
+
+function getTimeIcon(t) {
+  if (t < 0.22 || t > 0.78) return '\u{1F319}'; // crescent moon
+  if (t < 0.3 || t > 0.7) return '\u{1F305}';   // sunrise/sunset
+  return '\u{2600}';                              // sun
+}
+
+function initTimeHUD() {
+  if (timeHudEl) return;
+  const style = document.createElement('style');
+  style.textContent = TIME_HUD_STYLES;
+  document.head.appendChild(style);
+
+  timeHudEl = document.createElement('div');
+  timeHudEl.className = 'sky-time-hud';
+  timeHudEl.innerHTML = `
+    <span class="sky-time-icon" id="sky-time-icon"></span>
+    <span class="sky-time-label" id="sky-time-label">12:00 PM</span>
+    <div class="sky-time-bar">
+      <div class="sky-time-fill" id="sky-time-fill" style="width:50%"></div>
+    </div>
+  `;
+  document.body.appendChild(timeHudEl);
+}
+
+function updateTimeHUD() {
+  if (!timeHudEl) return;
+  const iconEl = document.getElementById('sky-time-icon');
+  const labelEl = document.getElementById('sky-time-label');
+  const fillEl = document.getElementById('sky-time-fill');
+  if (iconEl) iconEl.textContent = getTimeIcon(gameTime);
+  if (labelEl) labelEl.textContent = getTimeLabel(gameTime);
+  if (fillEl) fillEl.style.width = (gameTime * 100) + '%';
+}
+
+/**
+ * Show the time HUD.
+ */
+export function showTimeHUD() {
+  if (!timeHudEl) initTimeHUD();
+  timeHudEl.classList.add('visible');
+}
+
+/**
+ * Hide the time HUD.
+ */
+export function hideTimeHUD() {
+  if (timeHudEl) timeHudEl.classList.remove('visible');
+}
+
+/**
+ * Dispose sky system.
+ * @param {THREE.Scene} scene
+ */
+export function disposeSky(scene) {
+  if (skyDome) { scene.remove(skyDome); skyDome.geometry.dispose(); skyDome.material.dispose(); skyDome = null; }
+  if (starField) { scene.remove(starField); starField.geometry.dispose(); starField.material.dispose(); starField = null; }
+  if (timeHudEl) { timeHudEl.remove(); timeHudEl = null; }
+}

package/office/street-furniture.js

@@ -0,0 +1,308 @@
+import * as THREE from 'three';
+
+/**
+ * Street furniture — small detail props that make the city feel alive.
+ * Crosswalks, benches, bus stops, trash cans, fire hydrants, street signs, awnings.
+ * All use InstancedMesh for 120fps performance.
+ */
+
+const _dummy = new THREE.Object3D();
+const pools = {};
+
+// District color palettes for building variety
+export const DISTRICT_PALETTES = {
+  downtown:    [0x4a6fa5, 0x5577aa, 0x3d5f8a, 0x6688bb, 0x4477aa, 0x556699],
+  industrial:  [0x8a7755, 0x997744, 0x776644, 0x887766, 0x665533, 0x998866],
+  residential: [0xcc9977, 0xddaa88, 0xbb8866, 0xeebbaa, 0xddbb99, 0xccaa88],
+  campus:      [0x55aa77, 0x66bb88, 0x449966, 0x77cc99, 0x55bb77, 0x66aa88],
+  commercial:  [0xaa6688, 0xbb7799, 0x995577, 0xcc88aa, 0xaa7799, 0xbb6688],
+};
+
+/**
+ * Get a randomized building color from a district palette.
+ * @param {string} district
+ * @param {number} seed - Building index for deterministic randomization
+ * @returns {THREE.Color}
+ */
+export function getBuildingColor(district, seed) {
+  const palette = DISTRICT_PALETTES[district] || DISTRICT_PALETTES.downtown;
+  const idx = Math.abs(seed * 2654435761 | 0) % palette.length; // hash-based pick
+  return new THREE.Color(palette[idx]);
+}
+
+/**
+ * Create a bench mesh (low-poly).
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ * @param {number} rotation - Y rotation in radians
+ */
+export function createBench(scene, position, rotation) {
+  const group = new THREE.Group();
+  // Seat
+  const seat = new THREE.Mesh(
+    new THREE.BoxGeometry(1.2, 0.08, 0.4),
+    new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+  );
+  seat.position.y = 0.4;
+  group.add(seat);
+  // Back
+  const back = new THREE.Mesh(
+    new THREE.BoxGeometry(1.2, 0.4, 0.06),
+    new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+  );
+  back.position.set(0, 0.6, -0.17);
+  group.add(back);
+  // Legs (2)
+  const legGeo = new THREE.BoxGeometry(0.06, 0.4, 0.35);
+  const legMat = new THREE.MeshLambertMaterial({ color: 0x333333 });
+  const leg1 = new THREE.Mesh(legGeo, legMat);
+  leg1.position.set(-0.45, 0.2, 0);
+  group.add(leg1);
+  const leg2 = new THREE.Mesh(legGeo, legMat);
+  leg2.position.set(0.45, 0.2, 0);
+  group.add(leg2);
+
+  group.position.copy(position);
+  group.rotation.y = rotation || 0;
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create a trash can (cylinder).
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ */
+export function createTrashCan(scene, position) {
+  const group = new THREE.Group();
+  const body = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.15, 0.15, 0.5, 8),
+    new THREE.MeshLambertMaterial({ color: 0x555555 })
+  );
+  body.position.y = 0.25;
+  group.add(body);
+  // Lid
+  const lid = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.17, 0.17, 0.04, 8),
+    new THREE.MeshLambertMaterial({ color: 0x666666 })
+  );
+  lid.position.y = 0.52;
+  group.add(lid);
+
+  group.position.copy(position);
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create a fire hydrant.
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ */
+export function createFireHydrant(scene, position) {
+  const group = new THREE.Group();
+  // Body
+  const body = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.08, 0.1, 0.4, 8),
+    new THREE.MeshLambertMaterial({ color: 0xcc2222 })
+  );
+  body.position.y = 0.2;
+  group.add(body);
+  // Top
+  const top = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.1, 0.08, 0.1, 8),
+    new THREE.MeshLambertMaterial({ color: 0xcc2222 })
+  );
+  top.position.y = 0.45;
+  group.add(top);
+  // Side nozzle
+  const nozzle = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.03, 0.03, 0.12, 6),
+    new THREE.MeshLambertMaterial({ color: 0xdddd33 })
+  );
+  nozzle.rotation.z = Math.PI / 2;
+  nozzle.position.set(0.12, 0.3, 0);
+  group.add(nozzle);
+
+  group.position.copy(position);
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create a bus stop shelter.
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ * @param {number} rotation
+ */
+export function createBusStop(scene, position, rotation) {
+  const group = new THREE.Group();
+  const mat = new THREE.MeshLambertMaterial({ color: 0x4488cc });
+  // Roof
+  const roof = new THREE.Mesh(new THREE.BoxGeometry(2, 0.06, 1), mat);
+  roof.position.y = 2.2;
+  group.add(roof);
+  // Back wall (glass-like)
+  const glass = new THREE.Mesh(
+    new THREE.BoxGeometry(2, 2, 0.04),
+    new THREE.MeshLambertMaterial({ color: 0x88ccff, transparent: true, opacity: 0.3 })
+  );
+  glass.position.set(0, 1.1, -0.48);
+  group.add(glass);
+  // Posts
+  const postGeo = new THREE.BoxGeometry(0.06, 2.2, 0.06);
+  const postMat = new THREE.MeshLambertMaterial({ color: 0x333333 });
+  [-0.95, 0.95].forEach(x => {
+    const post = new THREE.Mesh(postGeo, postMat);
+    post.position.set(x, 1.1, 0.45);
+    group.add(post);
+  });
+  // Bench inside
+  const bench = new THREE.Mesh(
+    new THREE.BoxGeometry(1.6, 0.06, 0.3),
+    new THREE.MeshLambertMaterial({ color: 0x8B4513 })
+  );
+  bench.position.set(0, 0.5, -0.25);
+  group.add(bench);
+
+  group.position.copy(position);
+  group.rotation.y = rotation || 0;
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create a crosswalk on the road surface.
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ * @param {number} rotation
+ */
+export function createCrosswalk(scene, position, rotation) {
+  const group = new THREE.Group();
+  const stripeMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
+  const stripeGeo = new THREE.BoxGeometry(0.3, 0.005, 2);
+  for (let i = -3; i <= 3; i++) {
+    const stripe = new THREE.Mesh(stripeGeo, stripeMat);
+    stripe.position.set(i * 0.5, 0.01, 0);
+    group.add(stripe);
+  }
+  group.position.copy(position);
+  group.rotation.y = rotation || 0;
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create an awning/canopy at a building entrance.
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ * @param {number} rotation
+ * @param {number} color - Hex color
+ */
+export function createAwning(scene, position, rotation, color) {
+  const group = new THREE.Group();
+  const awning = new THREE.Mesh(
+    new THREE.BoxGeometry(1.5, 0.05, 1),
+    new THREE.MeshLambertMaterial({ color: color || 0xcc4444 })
+  );
+  awning.position.set(0, 2.5, 0.5);
+  group.add(awning);
+  // Support poles
+  const poleMat = new THREE.MeshLambertMaterial({ color: 0x444444 });
+  const poleGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.8, 6);
+  [-0.6, 0.6].forEach(x => {
+    const pole = new THREE.Mesh(poleGeo, poleMat);
+    pole.position.set(x, 2.1, 0.95);
+    group.add(pole);
+  });
+
+  group.position.copy(position);
+  group.rotation.y = rotation || 0;
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Create a street name sign.
+ * @param {THREE.Scene} scene
+ * @param {THREE.Vector3} position
+ * @param {string} streetName
+ */
+export function createStreetSign(scene, position, streetName) {
+  const group = new THREE.Group();
+  // Pole
+  const pole = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.03, 0.03, 3, 6),
+    new THREE.MeshLambertMaterial({ color: 0x666666 })
+  );
+  pole.position.y = 1.5;
+  group.add(pole);
+  // Sign plate
+  const plate = new THREE.Mesh(
+    new THREE.BoxGeometry(1.2, 0.3, 0.04),
+    new THREE.MeshLambertMaterial({ color: 0x225588 })
+  );
+  plate.position.set(0, 3, 0);
+  group.add(plate);
+
+  group.position.copy(position);
+  group.matrixAutoUpdate = false;
+  group.updateMatrix();
+  scene.add(group);
+  return group;
+}
+
+/**
+ * Populate a city block with street furniture.
+ * Call this per block to add variety.
+ * @param {THREE.Scene} scene
+ * @param {number} blockX - Block center X
+ * @param {number} blockZ - Block center Z
+ * @param {number} blockSize - Block dimension
+ * @param {number} seed - For deterministic randomization
+ */
+export function populateBlock(scene, blockX, blockZ, blockSize, seed) {
+  const rng = seedRng(seed);
+  const half = blockSize / 2;
+  const items = [];
+
+  // Benches on sidewalks (2 per block)
+  if (rng() > 0.3) {
+    items.push(createBench(scene, new THREE.Vector3(blockX + half - 0.5, 0, blockZ + rng() * blockSize - half), 0));
+  }
+  if (rng() > 0.3) {
+    items.push(createBench(scene, new THREE.Vector3(blockX - half + 0.5, 0, blockZ + rng() * blockSize - half), Math.PI));
+  }
+
+  // Trash can (1 per block)
+  if (rng() > 0.4) {
+    items.push(createTrashCan(scene, new THREE.Vector3(blockX + half - 0.3, 0, blockZ + half - 0.3)));
+  }
+
+  // Fire hydrant (every other block)
+  if (rng() > 0.5) {
+    items.push(createFireHydrant(scene, new THREE.Vector3(blockX - half + 0.3, 0, blockZ - half + 0.5)));
+  }
+
+  return items;
+}
+
+function seedRng(seed) {
+  let s = seed | 0;
+  return function() {
+    s = (s * 1103515245 + 12345) & 0x7fffffff;
+    return s / 0x7fffffff;
+  };
+}