Multi Camera

<!--
  说明：同一个场景用四台相机分别渲染到画布四个象限，比较透视、正交与长焦的差别
  核心逻辑：renderer.setViewport 与 setScissor 划分区域，每台相机单独校正宽高比后渲染
  依赖：three.js 0.160.0 · 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:12px;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}
  #stage{flex:1 1 auto;min-height:0;position:relative}
  #stage canvas{display:block}
  .lbl{position:absolute;pointer-events:none;padding:2px 7px;border-radius:4px;
       background:rgba(13,17,23,.72);border:1px solid #2a3441;color:#9fb0c4;
       font-size:11px;letter-spacing:.02em}
</style>
</head>
<body>
<div class="bar">
  <span>布局 <b id="layout">四视口</b></span>
  <button id="toggle">单视口</button>
  <span class="sp"></span>
  <span>透视 · 正交 · 平视 · 长焦</span>
</div>
<div id="stage">
  <div class="lbl" id="lbl1" style="left:8px;top:8px">透视 · 鸟瞰</div>
  <div class="lbl" id="lbl2" style="left:50%;top:8px;margin-left:8px">正交 · 俯视</div>
  <div class="lbl" id="lbl3" style="left:8px;bottom:8px">透视 · 平视</div>
  <div class="lbl" id="lbl4" style="left:50%;bottom:8px;margin-left:8px">长焦 · 特写</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 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(0x0b1016);
scene.fog = new THREE.Fog(0x0b1016, 70, 190);

scene.add(new THREE.HemisphereLight(0xbcd8ff, 0x16202a, 1.15));
const sun = new THREE.DirectionalLight(0xfff0d8, 2.2);
sun.position.set(-30, 45, 26);
scene.add(sun);

/* ---------- 场景 ---------- */
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(160, 160, 16, 16),
  new THREE.MeshStandardMaterial({ color: 0x151d26, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const grid = new THREE.GridHelper(160, 32, 0x2a3644, 0x1d2632);
grid.position.y = 0.02;
scene.add(grid);

const boxGeo = new THREE.BoxGeometry(3, 1, 3);
boxGeo.translate(0, 0.5, 0);

for (let i = 0; i < 140; i++) {
  const a = i * 2.39996;
  const r = 6 + Math.sqrt(i) * 2.3;
  const h = 3 + ((i * 41) % 21) * 1.8;
  const mesh = new THREE.Mesh(
    boxGeo,
    new THREE.MeshStandardMaterial({
      color: new THREE.Color().setHSL(0.57, 0.3, 0.3 + (h / 45) * 0.28),
      roughness: 0.68
    })
  );
  mesh.position.set(Math.cos(a) * r, 0, Math.sin(a) * r);
  mesh.scale.set(1, h, 1);
  mesh.castShadow = false;
  scene.add(mesh);
}

/* 北向标记：一根红色细柱加地面圆环 */
const north = new THREE.Mesh(
  new THREE.CylinderGeometry(0.35, 0.35, 22, 12),
  new THREE.MeshStandardMaterial({ color: 0xd94f4f, roughness: 0.5 })
);
north.position.set(0, 11, -46);
scene.add(north);

/* ---------- 四台相机 ---------- */
const camPersp = new THREE.PerspectiveCamera(45, 1, 0.5, 400);
camPersp.position.set(58, 44, 62);
camPersp.lookAt(0, 8, 0);

const camTop = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 300);
camTop.position.set(0, 120, 0);
camTop.up.set(0, 0, -1);
camTop.lookAt(0, 0, 0);

const camEye = new THREE.PerspectiveCamera(55, 1, 0.5, 400);
camEye.position.set(0, 7, 78);
camEye.lookAt(0, 9, 0);

const camTele = new THREE.PerspectiveCamera(22, 1, 0.5, 400);
camTele.position.set(34, 26, 34);
camTele.lookAt(0, 9, 0);

const controls = new OrbitControls(camPersp, renderer.domElement);
controls.target.set(0, 8, 0);
controls.enableDamping = true;
controls.minDistance = 30;
controls.maxDistance = 180;
controls.maxPolarAngle = Math.PI * 0.49;
controls.update();

const views = [
  { cam: camPersp, name: '透视 · 鸟瞰' },
  { cam: camTop, name: '正交 · 俯视' },
  { cam: camEye, name: '透视 · 平视' },
  { cam: camTele, name: '长焦 · 特写' }
];

let single = false;

/* 正交相机按区域宽高比校正边界，纵向固定 84 个场景单位 */
function fitTop(cam, width, height) {
  const halfH = 42;
  const halfW = halfH * (width / height);
  cam.left = -halfW;
  cam.right = halfW;
  cam.top = halfH;
  cam.bottom = -halfH;
  cam.updateProjectionMatrix();
}

function renderView(view, x, y, w, h) {
  const cam = view.cam;

  renderer.setViewport(x, y, w, h);
  renderer.setScissor(x, y, w, h);

  if (cam.isOrthographicCamera) {
    fitTop(cam, w, h);
  } else {
    cam.aspect = w / h;
    cam.updateProjectionMatrix();
  }

  renderer.render(scene, cam);
}

renderer.setScissorTest(true);

const toggleBtn = document.getElementById('toggle');
const layoutEl = document.getElementById('layout');
const labels = [
  document.getElementById('lbl1'),
  document.getElementById('lbl2'),
  document.getElementById('lbl3'),
  document.getElementById('lbl4')
];

toggleBtn.addEventListener('click', function () {
  single = !single;
  layoutEl.textContent = single ? '单视口' : '四视口';
  toggleBtn.textContent = single ? '四视口' : '单视口';

  labels.forEach(function (el, i) {
    el.hidden = single ? i !== 0 : false;
  });
});

renderer.setAnimationLoop(function () {
  const W = renderer.domElement.clientWidth;
  const H = renderer.domElement.clientHeight;
  const halfW = Math.floor(W / 2);
  const halfH = Math.floor(H / 2);

  controls.update();

  if (single) {
    renderView(views[0], 0, 0, W, H);
  } else {
    renderView(views[0], 0, halfH, halfW, H - halfH);
    renderView(views[1], halfW, halfH, W - halfW, H - halfH);
    renderView(views[2], 0, 0, halfW, halfH);
    renderView(views[3], halfW, 0, W - halfW, halfH);
  }
});

window.addEventListener('resize', function () {
  renderer.setSize(stage.clientWidth, stage.clientHeight);
});
</script>
</body>
</html>