Geometry Extrude

<!--
  说明：把二维建筑轮廓用 ExtrudeGeometry 拉起高度，形成街区体块
  核心逻辑：Shape 描述平面轮廓，深度参数即楼高，模型再绕 X 轴转平放到地面
  依赖：three.js 0.160.0、OrbitControls · jsDelivr CDN（ESM + importmap）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>建筑轮廓拉伸</title>
<style>
  html,body{height:100%;margin:0;background:#0d1319}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:14px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar input[type=range]{width:130px;accent-color:#4f9ef8}
  .bar .sp{flex:1 1 auto}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
</style>
</head>
<body>
<div class="bar">
  <span>建筑 <b id="count">0</b> 栋</span>
  <label>高度倍数 <input type="range" id="exag" min="0.4" max="1.8" step="0.1" value="1"></label>
  <span><b id="exagv">1.0</b> ×</span>
  <span class="sp"></span>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<div id="stage"></div>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const stage = document.getElementById('stage');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(stage.clientWidth, stage.clientHeight);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1319);
scene.fog = new THREE.Fog(0x0d1319, 34, 64);

const camera = new THREE.PerspectiveCamera(42, stage.clientWidth / stage.clientHeight, 0.1, 200);
camera.position.set(22, 20, 26);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 3, 0);
controls.enableDamping = true;
controls.maxPolarAngle = Math.PI * 0.48;
controls.minDistance = 8;
controls.maxDistance = 70;
controls.update();

scene.add(new THREE.HemisphereLight(0xa9c4e6, 0x161c22, 1.4));
const sun = new THREE.DirectionalLight(0xffe6bf, 2.4);
sun.position.set(-18, 26, 14);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -22;
sun.shadow.camera.right = 22;
sun.shadow.camera.top = 22;
sun.shadow.camera.bottom = -22;
sun.shadow.camera.far = 80;
sun.shadow.bias = -0.0008;
scene.add(sun);

/* 地面 */
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(52, 52),
  new THREE.MeshStandardMaterial({ color: 0x18222c, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

/* 街区路网：每 6 个单位一条，视觉上分出地块 */
const grid = new THREE.GridHelper(52, 26, 0x223244, 0x1a2632);
grid.position.y = 0.01;
scene.add(grid);

function hash(n) {
  const x = Math.sin(n * 78.233 + 19.7) * 43758.5453;
  return x - Math.floor(x);
}

const PALETTE = [0x7f9cb8, 0x8fa9a0, 0xa7988a, 0x6f8ea8, 0x9a8f7e];

const buildings = new THREE.Group();
scene.add(buildings);

let seed = 0;
const GRID = 5;
const CELL = 6;
const RANGE = (GRID * CELL) / 2;

function footprint(w, d, corner) {
  const s = new THREE.Shape();
  const r = Math.min(w, d) * 0.18 * corner;
  s.moveTo(-w / 2 + r, -d / 2);
  s.lineTo(w / 2 - r, -d / 2);
  s.absarc(w / 2 - r, -d / 2 + r, r, -Math.PI / 2, 0, false);
  s.lineTo(w / 2, d / 2 - r);
  s.absarc(w / 2 - r, d / 2 - r, r, 0, Math.PI / 2, false);
  s.lineTo(-w / 2 + r, d / 2);
  s.absarc(-w / 2 + r, d / 2 - r, r, Math.PI / 2, Math.PI, false);
  s.lineTo(-w / 2, -d / 2 + r);
  s.absarc(-w / 2 + r, -d / 2 + r, r, Math.PI, Math.PI * 1.5, false);
  return s;
}

const heights = [];

for (let gx = 0; gx < GRID; gx++) {
  for (let gz = 0; gz < GRID; gz++) {
    seed++;
    const n = hash(seed);
    if (n < 0.12) continue;

    const cxp = -RANGE + CELL * (gx + 0.5) + (hash(seed + 3) - 0.5) * 1.4;
    const czp = -RANGE + CELL * (gz + 0.5) + (hash(seed + 7) - 0.5) * 1.4;
    const w = 1.8 + hash(seed + 11) * 2.6;
    const d = 1.8 + hash(seed + 13) * 2.6;
    const h = 1.6 + Math.pow(hash(seed + 17), 1.6) * 11;

    const shape = footprint(w, d, 1);
    const geo = new THREE.ExtrudeGeometry(shape, {
      depth: h,
      bevelEnabled: false,
      curveSegments: 4
    });

    /* Shape 在 XY 平面，拉深沿 Z；绕 X 轴 -90° 后，深度变成竖直方向 */
    geo.rotateX(-Math.PI / 2);
    geo.computeVertexNormals();

    const mat = new THREE.MeshStandardMaterial({
      color: PALETTE[Math.floor(hash(seed + 23) * PALETTE.length)],
      roughness: 0.58,
      metalness: 0.18
    });

    const mesh = new THREE.Mesh(geo, mat);
    mesh.position.set(cxp, 0, czp);
    mesh.rotation.y = (hash(seed + 29) - 0.5) * 0.16;
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    buildings.add(mesh);

    heights.push({ mesh: mesh, base: h });
  }
}

document.getElementById('count').textContent = buildings.children.length;

const exagEl = document.getElementById('exag');
const exagvEl = document.getElementById('exagv');
exagEl.addEventListener('input', function () {
  const k = Number(exagEl.value);
  heights.forEach(function (b) {
    b.mesh.scale.y = k;
  });
  exagvEl.textContent = k.toFixed(1);
});

const clock = new THREE.Clock();

renderer.setAnimationLoop(function () {
  /* 极慢的自转，方便看清体块之间的遮挡关系 */
  buildings.rotation.y += clock.getDelta() * 0.06;
  controls.update();
  renderer.render(scene, camera);
});

window.addEventListener('resize', function () {
  const w = stage.clientWidth;
  const h = stage.clientHeight;
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  renderer.setSize(w, h);
});
</script>
</body>
</html>