柱状图

十八乘十八的阵列上立起三百二十四根柱体，高度来自三个高斯峰叠加的密度场， 拖动倍率滑杆，整片柱体随之伸缩。

说明

三百二十四根柱体共用一个 BoxGeometry 与一份材质，通过 InstancedMesh 的逐实例矩阵摆放。每根柱的位置、宽度与高度 都写在一个 4 × 4 矩阵里，GPU 一次绘制全部画完。

高度按密度场的归一化值线性映射：0.18 + s × 5.2 × 倍率。 倍率滑杆只重算矩阵，不重建几何体。顶点颜色用 setColorAt 写入实例颜色缓冲， 色相随强度从青蓝过渡到黄绿。

为什么用 InstancedMesh

324 个独立网格会产生 324 次绘制调用，而 InstancedMesh 只有 1 次。 柱体数量继续增加时，这个差距会进一步放大。代价是每根柱不能再有独立的材质， 颜色只能通过实例颜色或顶点色表达。

实例化对象仍然可以被射线拾取，Raycaster 会返回命中实例的编号 （instanceId），据此可以弹出对应格子的数值。 这个能力在三维统计图里很实用。

位置与高度的写法

立方体的几何中心在原点，要让柱子立在 Y = 0 的地面上， 必须把实例位置抬高到高度的一半，否则柱子会一半埋进地面。 示例里 position.y = h / 2、scale.y = h， 这样底面始终贴地。

每次改完矩阵要置 instanceMatrix.needsUpdate = true； 改完实例颜色要置 instanceColor.needsUpdate = true。 少任何一个，画面都不会更新。

数据换成真实统计

把密度场换成格网统计值即可，例如每平方千米的站点数、人口或流量。 真实数据通常长尾明显，直接线性映射会让少数极高值压扁其余柱子， 更合适的做法是先做平方根或对数变换，再映射到高度。