stBuilding() {
let best = null, bd = Infinity;
for (const b of district.meta.buildings) {
const d = (b.x - king.x) ** 2 + (b.z - king.z) ** 2;
if (d < bd) { bd = d; best = b; }
}
return best;
}
/* ---------- the loop ---------- */
const clock = new THREE.Clock();
let censusTimer = 0;
function frame() {
requestAnimationFrame(frame);
const dt = Math.min(clock.getDelta(), 0.05);
const t = clock.elapsedTime;
if (mode === 'sky') {
stage.update(dt, t);
} else if (mode === 'diving' || mode === 'rising') {
trans.k += dt / trans.dur;
const s = smooth(Math.min(1, trans.k));
king.update(dt);
if (mode === 'diving') {
const bt = boomTarget();
_v1.copy(bt.position);
_v2.lerpVectors(trans.fromLook, bt.look, s);
camera.position.lerpVectors(trans.fromPos, _v1, s);
camera.lookAt(_v2);
if (trans.k >= 1) { mode = 'street'; document.body.classList.add('inside'); enterBtn.textContent = 'EXIT TO THE SKY'; }
} else {
camera.position.lerpVectors(trans.fromPos, trans.toPos, s);
_v1.lerpVectors(trans.fromLook, trans.toLook, s);
camera.lookAt(_v1);
if (trans.k >= 1) { mode = 'sky'; document.body.classList.remove('inside'); enterBtn.textContent = 'ENTER THE CITY'; king.hide(); }
}
} else {
king.update(dt);
king.boom(camera, dt);
}
renderer.render(scene, camera);
diag.frames++;
diag.calls = renderer.info.render.calls;
diag.triangles = renderer.info.render.triangles;
censusTimer += dt;
if (censusTimer > 0.5) {
censusTimer = 0;
let insideLine = '';
if (mode !== 'sky') {
const nb = nearestBuilding();
insideLine = '\nYou are in the city — the nearest face rises ' + nb.floors + ' floors, crowned with ' + (CROWNS[nb.crown] || 'a plain crown') + '';
}
censusEl.innerHTML =
'THE WITNESS · TEST 2\n' +
'buildings ' + diag.buildings + ' · faces unique ' + diag.uniqueFaces + '\n' +
'draw calls ' + diag.calls + ' · triangles ' + diag.triangles.toLocaleString('en-US') + '\n' +
'tallest ' + Math.round(district.meta.tallest) + ' · one fashion · sixteen plates' +
insideLine +
(diag.errors.length ? '\nerrors: ' + diag.errors[0] + '' : '');
}
}
frame();
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
stage.setAspect(window.innerWidth, window.innerHeight);
});