Multiple Elements

<!--
  说明：两个画布共享同一个场景，左边自由视角、右边固定俯视，两边内容始终一致
  核心逻辑：两个 WebGLRenderer 各自绑定画布，渲染同一 scene、不同相机
  依赖：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:#0a1016}
  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 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}
  .wrap{flex:1 1 auto;min-height:0;display:flex;gap:1px;background:#22303d}
  .pane{flex:1 1 50%;position:relative;min-width:0}
  .pane canvas{display:block}
  .tag{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:4px;font-size:11px;
       background:rgba(10,16,22,.7);border:1px solid #223140;color:#9fb4c8;pointer-events:none}
</style>
</head>
<body>
<div class="bar">
  <span>画布 <b>2</b> 个 · 场景 1 份</span>
  <button id="sync">同步旋转</button>
  <span class="sp"></span>
  <span>左侧可拖拽，右侧固定俯视</span>
</div>
<div class="wrap">
  <div class="pane" id="paneA"><span class="tag">自由视角</span></div>
  <div class="pane" id="paneB"><span class="tag">俯视对比</span></div>
</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 paneA = document.getElementById('paneA');
const paneB = document.getElementById('paneB');

const rendererA = new THREE.WebGLRenderer({ antialias: true });
rendererA.setPixelRatio(Math.min(window.devicePixelRatio, 2));
rendererA.setSize(paneA.clientWidth, paneA.clientHeight);
rendererA.outputColorSpace = THREE.SRGBColorSpace;
rendererA.toneMapping = THREE.ACESFilmicToneMapping;
paneA.appendChild(rendererA.domElement);

const rendererB = new THREE.WebGLRenderer({ antialias: true });
rendererB.setPixelRatio(Math.min(window.devicePixelRatio, 2));
rendererB.setSize(paneB.clientWidth, paneB.clientHeight);
rendererB.outputColorSpace = THREE.SRGBColorSpace;
rendererB.toneMapping = THREE.ACESFilmicToneMapping;
paneB.appendChild(rendererB.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0a1016);

scene.add(new THREE.HemisphereLight(0xb4d0ec, 0x101820, 1.35));
const sun = new THREE.DirectionalLight(0xffeccd, 2.1);
sun.position.set(-18, 26, 12);
scene.add(sun);

function heightAt(x, z) {
  return 1.1 * Math.sin(x * 0.35) * Math.cos(z * 0.3) + 0.5 * Math.sin(x * 0.85 + z * 0.6);
}

const geo = new THREE.PlaneGeometry(24, 24, 70, 70);
geo.rotateX(-Math.PI / 2);
const pos = geo.attributes.position;
const colors = 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 h = heightAt(pos.getX(i), pos.getZ(i));
  pos.setY(i, h);
  minH = Math.min(minH, h);
  maxH = Math.max(maxH, h);
}
for (let i = 0; i < pos.count; i++) {
  const t = (pos.getY(i) - minH) / (maxH - minH);
  c.setHSL(0.35 - 0.28 * t, 0.34, 0.2 + 0.38 * t);
  colors[i * 3] = c.r; colors[i * 3 + 1] = c.g; colors[i * 3 + 2] = c.b;
}
geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geo.computeVertexNormals();

const terrain = new THREE.Mesh(
  geo,
  new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.92 })
);
scene.add(terrain);

/* 一组建筑，俯视画布里能清楚看出它们的平面布局 */
const PALETTE = [0xd98e5a, 0x8fb6c9, 0xc9b48f, 0x9a8fae, 0x7fbf8f];
const blocks = new THREE.Group();
scene.add(blocks);

for (let i = 0; i < 26; i++) {
  const a = (i / 26) * Math.PI * 2 + 0.4;
  const r = 3 + (i % 5) * 1.6;
  const x = Math.cos(a) * r;
  const z = Math.sin(a) * r;
  const h = 1.6 + (i % 6) * 0.9;
  const w = 1.1 + (i % 3) * 0.5;

  const b = new THREE.Mesh(
    new THREE.BoxGeometry(w, h, w * 0.8),
    new THREE.MeshStandardMaterial({ color: PALETTE[i % PALETTE.length], roughness: 0.55 })
  );
  b.position.set(x, heightAt(x, z) + h / 2, z);
  b.rotation.y = a;
  blocks.add(b);
}

const camA = new THREE.PerspectiveCamera(45, paneA.clientWidth / paneA.clientHeight, 0.1, 200);
camA.position.set(16, 14, 19);

const controls = new OrbitControls(camA, rendererA.domElement);
controls.target.set(0, 1.5, 0);
controls.enableDamping = true;
controls.update();

const camB = new THREE.PerspectiveCamera(40, paneB.clientWidth / paneB.clientHeight, 0.1, 200);
camB.position.set(0, 34, 0.01);
camB.lookAt(0, 0, 0);

/* 同步旋转：把建筑的转角推给两块画布，便于对比朝向 */
let sync = false;
const syncBtn = document.getElementById('sync');
syncBtn.addEventListener('click', function () {
  sync = !sync;
  syncBtn.textContent = sync ? '停止旋转' : '同步旋转';
});

const clock = new THREE.Clock();

rendererA.setAnimationLoop(function () {
  const dt = Math.min(clock.getDelta(), 0.1);
  if (sync) blocks.rotation.y += dt * 0.35;

  controls.update();
  camB.lookAt(0, 0, 0);

  rendererA.render(scene, camA);
  rendererB.render(scene, camB);
});

function resize() {
  const wa = paneA.clientWidth;
  const ha = paneA.clientHeight;
  const wb = paneB.clientWidth;
  const hb = paneB.clientHeight;

  camA.aspect = wa / ha;
  camA.updateProjectionMatrix();
  rendererA.setSize(wa, ha);

  camB.aspect = wb / hb;
  /* 俯视时视野要够大，按画布宽高比自动放宽 */
  camB.fov = wb >= hb ? 40 : 58;
  camB.updateProjectionMatrix();
  rendererB.setSize(wb, hb);
}

resize();
window.addEventListener('resize', resize);
</script>
</body>
</html>