1. 3D可视化概述：什么是3D数据可视化
大家好，我是这门课的主讲。做了这么多年3D可视化，我经常被问到同一个问题：「3D数据可视化，到底是个啥？」
说白了，就是把那些枯燥的数字、表格、数据库里的信息，用三维图形的方式展示出来。你想想看，一堆Excel表格和一座立体的城市模型，哪个更容易看懂？
我个人习惯把3D可视化比作「给数据盖房子」。二维图表是平面图纸，三维可视化就是让你走进去、转着圈看的那栋楼。数据还是那些数据，但呈现方式变了，理解成本就降下来了。
核心定义：3D数据可视化 = 数据 + 三维空间 + 交互。它不只是「好看」，更是为了发现数据中隐藏的模式和规律。
1.1 发展历程：从线框到元宇宙
这条路我算是看着走过来的。最早期的3D可视化，大概在80年代，基本就是线框模型。那时候我在大学实验室见过一台SGI工作站，跑一个简单的分子模型要等半天。嗯，那时候的「实时」和现在不是一个概念。
到了90年代，OpenGL和DirectX的出现是个转折点。硬件加速让3D渲染不再是科研机构的专利。我记得2000年左右，我第一次用OpenGL做了一个简单的柱状图3D版本，虽然现在看来丑得不行，但当时觉得酷毙了。
真正爆发是2010年以后。WebGL的出现让浏览器也能跑3D了。Three.js在2011年发布，Babylon.js紧随其后。我2015年第一次用Three.js做项目，当时就一个感觉：「这玩意儿要火」。
现在呢？WebGPU都出来了，元宇宙概念也炒了一轮。3D可视化已经从「锦上添花」变成了很多行业的「刚需」。
| 年代 | 技术特征 | 代表工具 |
|---|---|---|
| 1980s-1990s | 线框模型、离线渲染 | SGI工作站、早期OpenGL |
| 2000s | 硬件加速、实时渲染 | DirectX、OpenGL 2.0 |
| 2010s | WebGL、浏览器端3D | Three.js、Babylon.js |
| 2020s | WebGPU、云渲染、元宇宙 | Deck.gl、Cesium、Unreal |
1.2 应用领域：哪里需要往哪搬
3D可视化的应用范围，说实话比大多数人想象的要广得多。我这些年接触过的项目，几乎覆盖了所有行业。
科研领域
分子结构、天体物理、气象数据……这些领域天生就是3D的。我曾经帮一个生物实验室做过蛋白质折叠的可视化，数据量巨大，但用3D展示后，研究人员一眼就看出了之前没发现的折叠模式。这就是3D可视化的价值——不是展示数据，而是发现知识。
工业领域
数字孪生是这两年最火的方向。工厂的设备、产线、物流，全部在3D场景里实时映射。我在一个汽车工厂的项目里，把整个装配车间做成了3D模型，传感器数据实时驱动。车间主任跟我说：「以前看报表要半小时，现在看一眼3D画面就知道哪条线堵了。」
我的经验：工业项目最看重的是「实时性」和「准确性」。画面可以不是最炫的，但数据必须对得上。我曾经因为一个传感器延迟问题排查了三天，最后发现是数据采集端的问题，不是可视化的问题。
医疗领域
CT、MRI数据本身就是三维的。3D可视化让医生可以旋转、切割、放大查看病灶。我参与过一个手术规划系统，医生在3D模型上模拟手术路径，实际手术时间缩短了30%。
游戏与娱乐
这个不用多说，大家每天都在接触。但我想说的是，游戏引擎（Unity、Unreal）现在也被大量用于非游戏领域。我见过用Unreal Engine做的智慧城市管理平台，视觉效果比很多游戏还棒。
地理信息与智慧城市
Cesium就是干这个的。把整个地球的数据加载到浏览器里，从卫星影像到建筑模型，再到实时交通数据。我做过一个城市级项目，加载了上百万个建筑，还能流畅交互。说实话，第一次跑起来的时候我自己都惊了。
1.3 主流工具与库概览
选工具这件事，我踩过不少坑。下面这几个是我用得最多、也最推荐的。
Three.js
如果你只能学一个库，我建议学Three.js。它是最流行的WebGL库，社区最大，教程最多。从简单的3D图表到复杂的场景都能搞定。我个人习惯用它做原型验证，快，灵活。
// 一个最简单的Three.js场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);Babylon.js
微软家的，功能比Three.js更「重」一些。内置了物理引擎、粒子系统、VR/AR支持。如果你要做游戏类的可视化，或者需要更高级的渲染效果，Babylon.js是个好选择。
避坑指南：我曾经在一个项目里同时用了Three.js和Babylon.js，想着各取所长。结果团队沟通成本翻倍，维护起来想死。后来全改成Three.js了。记住：工具不在多，在于团队熟悉。
Deck.gl
Uber开源的，专为大数据量地理可视化设计。它基于WebGL，但封装了图层概念。处理百万级数据点，Deck.gl的渲染性能比传统方案好得多。我做交通流量可视化时，首选就是它。
Cesium
地球级别的3D可视化，Cesium是王者。它支持WGS84坐标系，能加载地形、影像、3D Tiles。智慧城市、数字地球、军事仿真，这些场景基本绕不开Cesium。
// Cesium加载一个3D建筑模型
const viewer = new Cesium.Viewer('cesiumContainer');
const tileset = await Cesium.Cesium3DTileset.fromUrl('/data/tileset.json');
viewer.scene.primitives.add(tileset);其他值得关注的
- Plotly.js：做科学图表出身，3D散点图、曲面图很顺手
- D3.js + Three.js：我经常这么搭配，D3管数据处理，Three管渲染
- Unity/Unreal：重度可视化需求，比如数字孪生、仿真训练
1.4 怎么选？我的建议
这个问题没有标准答案。但我可以给你一个参考思路：
- 数据量小、快速出效果 → Three.js
- 地理信息、地球级别 → Cesium
- 大数据量点云、轨迹 → Deck.gl
- 游戏级交互、VR/AR → Babylon.js 或 Unity
- 科学计算、图表为主 → Plotly.js
这门课我们主要用Three.js和Cesium。为什么？因为这两个库覆盖了80%以上的3D可视化场景。你学通了它们，其他工具上手就快多了。
记住：工具只是手段，理解3D可视化的核心原理才是关键。坐标系、相机、光照、材质、动画——这些概念在所有工具里都是相通的。把基础打牢，换什么工具都不怕。
好了，第一章就到这里。下一章我们直接上手Three.js，从零搭一个3D场景。到时候我会把踩过的坑、总结的技巧都告诉你。咱们下章见。