Terrain

<!--
  说明：把一张规则网格的顶点沿高度抬升，得到连续地形面，颜色按海拔渐变
  核心逻辑：PlaneGeometry 逐顶点改写 position.y，再 computeVertexNormals 重算法线
  依赖：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:#0d1117}
  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:150px;accent-color:#4f9ef8}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:5px;cursor:pointer;
       border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  .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>140 × 140</b></span>
  <label>高度夸张 <input type="range" id="exag" min="0.4" max="2.2" step="0.1" value="1"></label>
  <span><b id="exagv">1.0</b> ×</span>
  <button id="wire">线框</button>
  <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.toneMappingExposure = 1.05;
stage.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d1117);
scene.fog = new THREE.Fog(0x0d1117, 38, 74);

const camera = new THREE.PerspectiveCamera(
  45, stage.clientWidth / stage.clientHeight, 0.1, 300
);
camera.position.set(20, 15, 24);

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

scene.add(new THREE.HemisphereLight(0xbcd8ff, 0x1a2418, 1.1));

const sun = new THREE.DirectionalLight(0xfff1d6, 2.4);
sun.position.set(-18, 26, 14);
scene.add(sun);

const SIZE = 34;
const SEG = 140;

/* 海拔函数：两组正弦叠加一座高斯山体 */
function heightAt(x, z) {
  const rolling = 1.3 * Math.sin(x * 0.36) * Math.cos(z * 0.31);
  const ridge = 0.8 * Math.sin(x * 0.85 + z * 0.62);
  const peak = 3.6 * Math.exp(-((x - 4.5) * (x - 4.5) + (z + 4.0) * (z + 4.0)) / 26);
  const bowl = -2.0 * Math.exp(-((x + 6.0) * (x + 6.0) + (z - 5.0) * (z - 5.0)) / 34);
  return rolling + ridge + peak + bowl;
}

const geometry = new THREE.PlaneGeometry(SIZE, SIZE, SEG, SEG);
geometry.rotateX(-Math.PI / 2);

const pos = geometry.attributes.position;
const colorAttr = new Float32Array(pos.count * 3);
const c = new THREE.Color();
let minH = Infinity;
let maxH = -Infinity;

for (let i = 0; i < pos.count; i++) {
  const x = pos.getX(i);
  const z = pos.getZ(i);
  const h = heightAt(x, z);
  pos.setY(i, h);
  if (h < minH) minH = h;
  if (h > maxH) maxH = h;
}

for (let i = 0; i < pos.count; i++) {
  const h = pos.getY(i);
  const t = (h - minH) / (maxH - minH);
  /* 低处深绿，中段黄褐，高处灰白 */
  c.setHSL(0.34 - 0.34 * t, 0.42 + 0.18 * t, 0.20 + 0.55 * t);
  colorAttr[i * 3] = c.r;
  colorAttr[i * 3 + 1] = c.g;
  colorAttr[i * 3 + 2] = c.b;
}

geometry.setAttribute('color', new THREE.BufferAttribute(colorAttr, 3));
geometry.computeVertexNormals();

const material = new THREE.MeshStandardMaterial({
  vertexColors: true,
  roughness: 0.94,
  metalness: 0.02
});

const terrain = new THREE.Mesh(geometry, material);
scene.add(terrain);

/* 山体底面加一层暗色托盘，斜视时不会看到悬空的网格边缘 */
const base = new THREE.Mesh(
  new THREE.BoxGeometry(SIZE, 1.2, SIZE),
  new THREE.MeshStandardMaterial({ color: 0x121a22, roughness: 1 })
);
base.position.y = minH - 0.6;
scene.add(base);

renderer.setAnimationLoop(function () {
  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);
});

const exag = document.getElementById('exag');
const exagv = document.getElementById('exagv');
exag.addEventListener('input', function () {
  terrain.scale.y = Number(exag.value);
  base.scale.y = 1;
  exagv.textContent = Number(exag.value).toFixed(1);
});

const wireBtn = document.getElementById('wire');
let wire = false;
wireBtn.addEventListener('click', function () {
  wire = !wire;
  material.wireframe = wire;
  wireBtn.textContent = wire ? '实体' : '线框';
});
</script>
</body>
</html>