Controls Map

<!--
  说明：地图式控制把平移固定在屏幕平面，左键拖动不会让视角倾斜
  核心逻辑：MapControls 关掉 screenSpacePanning，并限制俯仰角，接近二维地图操作
  依赖：three.js 0.160.0、MapControls · 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:#0b1117}
  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:140px;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 id="tiltv">0</b> °</span>
  <label>倾斜 <input type="range" id="tilt" min="0" max="70" step="1" value="0"></label>
  <button id="reset">复位</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 { MapControls } from 'three/addons/controls/MapControls.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(0x0b1117);
scene.fog = new THREE.Fog(0x0b1117, 60, 130);

const camera = new THREE.PerspectiveCamera(45, stage.clientWidth / stage.clientHeight, 0.5, 300);
camera.position.set(0, 46, 48);

const controls = new MapControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.zoomSpeed = 1.1;
controls.panSpeed = 1.0;
/* 这两个设置是地图手感的关键 */
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI * 0.495;
controls.minDistance = 12;
controls.maxDistance = 140;
controls.update();

scene.add(new THREE.HemisphereLight(0xbcd6f2, 0x141c23, 1.3));
const sun = new THREE.DirectionalLight(0xffeccd, 2.3);
sun.position.set(-24, 40, 18);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
sun.shadow.camera.left = -40;
sun.shadow.camera.right = 40;
sun.shadow.camera.top = 40;
sun.shadow.camera.bottom = -40;
sun.shadow.camera.far = 120;
scene.add(sun);

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

/* 道路网格：每 8 个单位一条，看起来像城市主干道 */
const roadMat = new THREE.MeshStandardMaterial({ color: 0x22303c, roughness: 0.9 });
for (let i = -6; i <= 6; i++) {
  const h = new THREE.Mesh(new THREE.BoxGeometry(120, 0.04, 1.2), roadMat);
  h.position.set(0, 0.02, i * 8);
  scene.add(h);
  const v = new THREE.Mesh(new THREE.BoxGeometry(1.2, 0.04, 120), roadMat);
  v.position.set(i * 8, 0.02, 0);
  scene.add(v);
}

/* 街区建筑：在道路围成的方格里放一栋楼 */
function hash(n) {
  const x = Math.sin(n * 21.31 + 9.7) * 43758.5453;
  return x - Math.floor(x);
}

const PALETTE = [0x8fa8bf, 0x9caf9e, 0xb3a08c, 0x7b8ea6];

for (let ix = -6; ix < 6; ix++) {
  for (let iz = -6; iz < 6; iz++) {
    if (hash(ix * 17 + iz * 31) < 0.18) continue;
    const w = 2.6 + hash(ix + iz) * 2.4;
    const d = 2.6 + hash(ix * 3 + iz * 5) * 2.4;
    const h = 2 + Math.pow(hash(ix * 7 + iz * 11), 1.4) * 18;

    const b = new THREE.Mesh(
      new THREE.BoxGeometry(w, h, d),
      new THREE.MeshStandardMaterial({
        color: PALETTE[Math.floor(hash(ix * 2 + iz * 9) * PALETTE.length)],
        roughness: 0.62,
        metalness: 0.1
      })
    );
    b.position.set(ix * 8 + 4, h / 2, iz * 8 + 4);
    b.castShadow = true;
    b.receiveShadow = true;
    scene.add(b);
  }
}

applyTilt(0);

function applyTilt(deg) {
  controls.maxPolarAngle = THREE.MathUtils.degToRad(90 - deg);
  camera.position.y = 46 - deg * 0.62;
  camera.position.z = 48 - deg * 0.28;
  controls.update();
}

const tiltEl = document.getElementById('tilt');
const tiltvEl = document.getElementById('tiltv');
tiltEl.addEventListener('input', function () {
  const deg = Number(tiltEl.value);
  tiltvEl.textContent = String(deg);
  applyTilt(deg);
});

document.getElementById('reset').addEventListener('click', function () {
  camera.position.set(0, 46, 48);
  controls.target.set(0, 0, 0);
  controls.update();
});

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);
});
</script>
</body>
</html>