nameplates only carry as far as they can be read */
for (const b of buildings) {
const d2 = (P.x - b.x) * (P.x - b.x) + (P.z - b.z) * (P.z - b.z);
b.plate.visible = d2 < 150 * 150;
}
}
function buildLegend() {
const el = document.getElementById('legend');
el.innerHTML = CATEGORIES.concat([{ name: 'THE CITY', color: 0x5b7290 }])
.map(c => c.name + '').join('
');
}
/* ---------------- the heart: frame loop + watchdog -------------------- */
let lastFrameAt = performance.now(), lastT = performance.now(), rafId = 0, hudAt = 0;
function frame() {
rafId = requestAnimationFrame(frame);
const now = performance.now();
const dt = Math.min(0.05, (now - lastT) / 1000); lastT = now; lastFrameAt = now;
step(dt);
renderer.render(scene, camera);
if (now - hudAt > 250) { hudAt = now; hudTick(); drawCompass(); }
}
rafId = requestAnimationFrame(frame);
setInterval(() => {
if (document.hidden) return;
if (performance.now() - lastFrameAt > 3000) {
cancelAnimationFrame(rafId); lastT = performance.now();
rafId = requestAnimationFrame(frame);
}
}, 1000);
/* ---------------- boot -------------------------------------------------- */
bindControls();
buildLegend();
loadPages().then(pages => {
buildCity(pages);
window.__cityUp = true;
document.getElementById('loading').style.display = 'none';
toast('The city stands: ' + pages.length + ' pages, ' + pages.length + ' buildings. Walk to a gold door.');
}).catch(e => {
document.getElementById('loading').textContent = 'The city could not rise. ' + e.message;
});