Columns

<!--
  说明：十八乘十八共三百二十四根柱体，高度来自三个高斯峰叠加的密度场
  核心逻辑：InstancedMesh 一次绘制全部柱体，逐实例矩阵控制位置与高度
  依赖：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 .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>324</b></span>
  <span>最高 <b id="peak">—</b></span>
  <label>高度倍率 <input type="range" id="scale" min="0.4" max="1.8" step="0.05" value="1"></label>
  <span><b id="scalev">1.00</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.toneMappingExposure = 1.08;
stage.appendChild(renderer.domElement);

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

const camera = new THREE.PerspectiveCamera(
  42, stage.clientWidth / stage.clientHeight, 0.1, 200
);
camera.position.set(13, 11, 15);

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

scene.add(new THREE.HemisphereLight(0xbcd8ff, 0x141c24, 1.2));

const key = new THREE.DirectionalLight(0xffffff, 2.2);
key.position.set(9, 14, 7);
scene.add(key);

const side = new THREE.DirectionalLight(0x86b8ff, 0.9);
side.position.set(-10, 6, -8);
scene.add(side);

const COLS = 18;
const ROWS = 18;
const GAP = 0.92;
const COUNT = COLS * ROWS;

/* 归一化平面上的密度场，三个高斯峰 */
function fieldAt(u, v) {
  let f = 0;
  f += 1.00 * Math.exp(-((u - 0.28) * (u - 0.28) + (v - 0.36) * (v - 0.36)) / 0.016);
  f += 0.72 * Math.exp(-((u - 0.70) * (u - 0.70) + (v - 0.64) * (v - 0.64)) / 0.022);
  f += 0.46 * Math.exp(-((u - 0.52) * (u - 0.52) + (v - 0.14) * (v - 0.14)) / 0.011);
  return Math.min(1, f / 1.68);
}

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
  roughness: 0.4,
  metalness: 0.18
});

const bars = new THREE.InstancedMesh(geometry, material, COUNT);
bars.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
scene.add(bars);

const dummy = new THREE.Object3D();
const color = new THREE.Color();
const peakEl = document.getElementById('peak');

/* 记录每根柱的归一化强度，换倍率时只重算矩阵 */
const strengths = new Float32Array(COUNT);
const cells = [];

function buildField() {
  let n = 0;
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const u = (c + 0.5) / COLS;
      const v = (r + 0.5) / ROWS;
      const s = fieldAt(u, v);
      strengths[n] = s;
      cells.push({
        x: (c - (COLS - 1) / 2) * GAP,
        z: (r - (ROWS - 1) / 2) * GAP,
        s: s
      });
      color.setHSL(0.57 - 0.52 * s, 0.68, 0.28 + 0.3 * s);
      bars.setColorAt(n, color);
      n++;
    }
  }
  if (bars.instanceColor) bars.instanceColor.needsUpdate = true;
}

function layout(scale) {
  let peak = 0;
  for (let i = 0; i < COUNT; i++) {
    const cell = cells[i];
    const h = 0.18 + cell.s * 5.2 * scale;
    dummy.position.set(cell.x, h / 2, cell.z);
    dummy.scale.set(0.56, h, 0.56);
    dummy.rotation.set(0, 0, 0);
    dummy.updateMatrix();
    bars.setMatrixAt(i, dummy.matrix);
    if (h > peak) peak = h;
  }
  bars.instanceMatrix.needsUpdate = true;
  peakEl.textContent = peak.toFixed(2);
}

buildField();
layout(1);

/* 地面参考面 */
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(COLS * GAP + 3, ROWS * GAP + 3),
  new THREE.MeshStandardMaterial({ color: 0x121a23, roughness: 1 })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

const box = new THREE.LineSegments(
  new THREE.EdgesGeometry(ground.geometry),
  new THREE.LineBasicMaterial({ color: 0x243244 })
);
box.rotation.x = -Math.PI / 2;
box.position.y = 0.002;
scene.add(box);

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 scaleInput = document.getElementById('scale');
const scaleLabel = document.getElementById('scalev');
scaleInput.addEventListener('input', function () {
  const v = Number(scaleInput.value);
  scaleLabel.textContent = v.toFixed(2);
  layout(v);
});
</script>
</body>
</html>