Three.js 3D 柱状图制作指南：从像素到立体的魔法之旅

序章：像素世界的第三维度革命

当二维图表还在平面上为 "谁的柱子更高" 争得面红耳赤时，3D 柱状图已经带着墨镜在三维空间里跳探戈了。作为一名见证过无数像素起义的计算机科学家，我必须坦白：让数据站起来跳舞，比让程序员按时下班还令人兴奋。

Three.js 就像一位万能的舞台设计师，能把枯燥的数字变成错落有致的立体雕塑。今天我们要做的，不仅是敲几行代码，更是要理解如何用矩阵变换欺骗人类的视觉神经 ------ 这可不是魔术，而是线性代数的日常工作。

第一章：三维世界的基石法则

在开始搬砖（构建柱状图）前，我们得先搭好脚手架（三维场景）。想象你要举办一场数据展览会，Three.js 需要这三样东西：

场景 (Scene) ：相当于展览馆本身，所有展品都得放在这里

相机 (Camera) ：观众的眼睛，决定了能看到什么角度的展品

渲染器 (Renderer) ：负责把展品的样子画在屏幕上

javascript 复制代码

// 搭建展览馆
const scene = new THREE.Scene();
// 安装观众的眼睛：透视相机
// 第一个参数是视野角度，就像观众的眼睛能睁多大
// 第二个参数是宽高比，别让数据看起来胖成球
// 后面两个参数是近截面和远截面，太远或太近的东西就别看了
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 雇佣画师：WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 画布大小
document.body.appendChild(renderer.domElement); // 把画布挂到网页上

这里的透视相机用到了透视投影的原理，简单说就是远处的东西看起来小，近处的东西看起来大 ------ 就像你站在铁路上看铁轨，最后会交汇在一点。如果用正投影相机，那所有柱子都会像被拍扁的饼干，失去立体感。

第二章：给数据建造舞台地板

没有舞台的舞者就像没有矩阵的线性代数 ------ 失去了存在的意义。我们需要一个平面作为 3D 柱状图的舞台，这涉及到网格 (Mesh) 的概念：由几何体 (Geometry) 和材质 (Material) 组成，就像雕塑需要骨架和外层材料。

ini 复制代码

// 建造地板：一个平面几何体，长20单位，宽10单位
const planeGeometry = new THREE.PlaneGeometry(20, 10);
// 给地板刷上颜色：灰色，带点金属质感
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
// 组合成网格
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 让地板平躺：绕X轴旋转90度（弧度制）
plane.rotation.x = -Math.PI / 2;
// 把地板往下挪一点，避免和柱子底座打架
plane.position.y = -0.5;
scene.add(plane);

这里的旋转用到了欧拉角，想象你抓着坐标轴扭动物体。为什么是负的 π/2？因为 Three.js 遵循右手坐标系 ------ 伸出右手，拇指朝上是 Y 轴，四指弯曲方向就是正旋转方向。

第三章：让数据站起来 ------ 柱状图的诞生

现在到了最激动人心的时刻：把数据变成可以触摸的立体。我们用随机数模拟数据，每个柱子都是一个长方体，通过位置偏移排列成矩阵。

ini 复制代码

// 模拟数据：5行3列的随机数
const data = [
  [Math.random() * 5, Math.random() * 5, Math.random() * 5],
  [Math.random() * 5, Math.random() * 5, Math.random() * 5],
  [Math.random() * 5, Math.random() * 5, Math.random() * 5],
  [Math.random() * 5, Math.random() * 5, Math.random() * 5],
  [Math.random() * 5, Math.random() * 5, Math.random() * 5]
];
// 柱子的尺寸：宽和深都是0.8，高度由数据决定
const barWidth = 0.8;
const barDepth = 0.8;
// 柱子之间的间距
const gap = 0.2;
// 遍历数据创建柱子
for (let i = 0; i < data.length; i++) {
  for (let j = 0; j < data[i].length; j++) {
    const height = data[i][j];
    
    // 创建柱子几何体：宽、高、深
    const barGeometry = new THREE.BoxGeometry(barWidth, height, barDepth);
    
    // 给柱子上色：用HSL颜色，不同高度用不同色调
    // 色调随高度变化：0到1之间，高度越高越红，越低越绿
    const hue = height / 5; 
    const barMaterial = new THREE.MeshStandardMaterial({
      color: new THREE.Color().setHSL(hue, 0.7, 0.5)
    });
    
    // 组合成柱子
    const bar = new THREE.Mesh(barGeometry, barMaterial);
    
    // 计算柱子位置：让它们整齐排列
    // 先算总宽度：(柱子宽 + 间距) * 列数 - 间距
    const totalWidth = (barWidth + gap) * data[i].length - gap;
    // 再算X方向偏移：让柱子居中排列
    const x = (j * (barWidth + gap)) - totalWidth / 2;
    
    // Y方向位置：柱子高度的一半，这样底部刚好在地板上
    // （因为几何体的中心点在中心，不是底部）
    bar.position.y = height / 2;
    
    // Z方向排列：类似X方向
    const totalDepth = (barDepth + gap) * data.length - gap;
    const z = (i * (barDepth + gap)) - totalDepth / 2;
    
    bar.position.x = x;
    bar.position.z = z;
    
    scene.add(bar);
  }
}

这里的位置计算是空间布局的关键。想象你在整理书架：要先算好书的总宽度，再决定每本书的位置，才能让它们整齐居中。柱子的 Y 坐标设为高度的一半，是因为 Three.js 的几何体默认以中心为原点 ------ 就像人站在地上时，肚脐的位置才是坐标中心。

第四章：给世界带来光明

没有光的 3D 世界就像没有注释的代码 ------ 一团漆黑，让人绝望。我们需要添加光源来照亮柱子，同时理解光照模型如何影响物体的呈现。

ini 复制代码

// 环境光：均匀照亮所有物体，没有阴影
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
// 平行光：模拟太阳光，有方向，能产生阴影
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 20, 15); // 光源位置：斜上方
// 开启阴影功能
directionalLight.castShadow = true;
renderer.shadowMap.enabled = true;
// 调整阴影质量
directionalLight.shadow.mapSize.set(2048, 2048);
scene.add(directionalLight);

环境光就像房间里的漫反射光，而平行光就像窗外的阳光。为什么要让光源在斜上方？因为人类早已习惯太阳在天上，物体的阴影在下方 ------ 违背这个规律会让大脑感到困惑，就像看到水往高处流一样别扭。

第五章：让相机对准舞台

现在舞台、演员（柱子）、灯光都准备好了，就差调整观众的座位了。我们要把相机放在合适的位置，才能看到最精彩的表演。

ini 复制代码

// 相机位置：在斜后方高处，俯瞰整个场景
camera.position.z = 15;
camera.position.y = 10;
camera.position.x = 5;
// 让相机看向场景中心
camera.lookAt(new THREE.Vector3(0, 0, 0));

想象你在剧场看芭蕾舞：坐在后排高处才能看到整个舞台，低头看舞台中央的舞者 ------ 这就是相机位置和 lookAt 的作用。如果把相机放在柱子中间，你只会看到一片红色（柱子内部），就像钻进冰箱后只能看到内壁一样。

第六章：让世界动起来 ------ 动画循环

静态的 3D 场景就像凝固的时间，我们需要一个动画循环让它 "活" 起来。这个循环利用了浏览器的刷新机制，通常每秒 60 次，让画面流畅更新。

scss 复制代码

// 动画函数
function animate() {
  // 告诉浏览器：下一次重绘时继续调用animate
  requestAnimationFrame(animate);
  
  // 让场景缓慢旋转，展示不同角度
  scene.rotation.y += 0.001;
  
  // 渲染画面：把场景和相机"拍"下来
  renderer.render(scene, camera);
}
// 启动动画
animate();

为什么用 requestAnimationFrame 而不是 setInterval？因为前者会根据浏览器性能自动调整，在页面不可见时还会暂停，就像剧院关灯时演员会休息一样，既省电又高效。

终章：从代码到现实的升华

当你运行这段代码，看到色彩斑斓的柱子在屏幕上缓缓旋转时，你看到的不仅是数据的可视化，更是线性代数 和计算机图形学的完美结合。每个旋转都是矩阵乘法的舞蹈，每个光影都是光线追踪的诗篇。

作为计算机科学家，我们的使命不仅是解决问题，更是要让技术变得优雅而有趣。3D 柱状图不只是展示数据的工具，更是像素世界里的雕塑艺术 ------ 而你，就是这场视觉盛宴的导演。

现在，试着修改数据、调整颜色、改变相机角度，创造属于你的 3D 数据世界吧。记住：在三维的宇宙里，没有扁平化的数据，只有想象力的边界。