用Three.js打造浏览器3D数据可视化

可视化演示

动态演示用Three.js打造浏览器的核心机制，通过采集/分析/决策/反馈四种模式展示关键概念与交互流程。

搭建3D舞台

你还记得小学文艺汇演的舞台吗？老师先让工人铺好地板、挂好幕布，再请调音师把音响调试到位——在一切都准备好之前，演员是不能上台的。Three.js 的世界是一样的：第一步不是急着画图形，而是先把这个“虚拟剧院”的地基打牢。

这个地基由两个大件组成。第一件是场景（Scene），它是所有物体共同生活的空间——相当于整个舞台的物理范围。第二件是渲染器（Renderer），它像一个放映机的镜头，负责把舞台上的画面“拍摄”下来并投影到浏览器屏幕上。你创建了一个场景、放进一个渲染器，再配上舞台地板（背景色），地基就打好了。

不过，地基打好之后还缺一个“放映员”——他需要不停地把舞台画面投到屏幕上。渲染循环就是这个放映员：它用 requestAnimationFrame 让画面以每秒约 60 帧的速度持续刷新。如果没有这个循环，你只能看到一张静止的照片；有了它，舞台上的演员才能真正“动”起来。

渲染循环这个“放映员”一旦上岗，舞台就活了。地基搭好了，下一步该给舞台安装观众席的“眼睛”——也就是相机了。

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);

控制观众视角

假设你站在舞台前面，想看清楚演员的表情，你得往前走两步；想看清整个舞台的布局，你得退到后排。相机在 Three.js 里的角色，就是这双“观众的眼睛”——它决定你的观众从哪个位置、以什么角度看到这个 3D 世界。

Three.js 提供了两种最常见的“眼睛”。一种是透视相机（PerspectiveCamera），它模拟真实人眼，有“近大远小”的效果——就像你看远处的山很小、走近了才发现它巨大无比。另一种是正交相机（OrthographicCamera），它没有透视变形，物体无论远近大小都一样，适合看工程图纸或 2.5D 地图。

有了合适的“眼睛”，还得让观众能自由地转动头部。轨道控制器（OrbitControls） 就像给观众装了一个万向转椅：按住鼠标左键拖动可以旋转视角，滚动滚轮可以拉近拉远，按住右键可以平移——观众想看哪里就看哪里。

数据的空间感，全靠这双“眼睛”来呈现。

点亮舞台灯光

如果你在黑暗中看一个演员，你只能看到他的轮廓，完全看不清服装的细节。舞台美术师知道：灯光比演员更重要。Three.js 里的光照系统同样如此——数据模型做得再精细，没有合适的光，画面也会平淡如纸。

Three.js 提供了几种“灯”。环境光（AmbientLight） 像剧场的壁灯，均匀地照亮所有角落，没有明显的明暗对比，让物体不至于一片漆黑。平行光（DirectionalLight） 像太阳，光线是平行的，能产生清晰的阴影，适合模拟户外场景。点光源（PointLight） 像舞台上的追光灯，从一个点向四周发散，近处亮、远处暗。

有了光，物体还需要“衣服”来反射光——这就是材质（Material）。MeshBasicMaterial 像一件不反光的棉布衣，不受光照影响，只显示自己的颜色；MeshLambertMaterial 像哑光面料，能吸收部分光；MeshPhongMaterial 像丝绸或金属，带有高光反射，看起来更有质感。选对材质，数据点的“颜值”会大幅提升。

灯光打好了，演员该登场了。

邀请演员登场

舞台、观众席、灯光都准备好了，现在轮到主角登场。这个主角就是几何体（Geometry）。Three.js 内置了各种“身形”——球形（Sphere）、立方体（Box）、圆柱体（Cylinder）——就像服装店里的基本款模特，你直接拿起就能用。

但光有身形还不够，演员还得穿上衣服才能见人。在 Three.js 里，网格对象（Mesh） 就是“身形 + 服装”的组合：它将一个几何体（身形）和一个材质（服装）打包成一个可以被放入场景的对象。你可以把它比作出场单上的完整角色卡：

当数据的形状超过简单的几何体时，比如要展示一台精密的发动机模型，就得让专业的建模师在 Blender 或 C4D 里雕好模型，再以 GLTF/OBJ 格式导入到 Three.js 中。这就像是从服装店直接请来一位穿着成衣的演员——你不需要亲手缝制每件衣服，只需要加载他的“档案”。

布景完成，演员已就位，剧场的准备工作全部结束。但要让这场演出真正有“剧情”，还得让演员按照剧本表演——这就是数据绑定。

const geometry = new THREE.BoxGeometry(1, 1, 1);const material = new THREE.MeshPhongMaterial({ color: 0x818cf8 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);

编写剧本台词

一个 3D 场景就像一场舞台剧：演员有台词，灯光有提示，道具要配合。在数据可视化里，剧本就是你的数据。Three.js 中的数据绑定，本质上就是回答这样一个问题：数据的每一个数值，该控制舞台上的什么参数？

最常见的映射方式是“数据控制柱子的高度”。销售额高，柱子就高；客户量多，球体就大。这种映射的数学基础是归一化——先把数值范围缩放到一个合适的比例尺上，防止数据大的把舞台捅破，数据小的看不见。

除了高度，数据还可以映射到颜色和大小。在散点图中，每个点是一个小球体，点的颜色可以表示类别（红色警戒、绿色健康），点的大小可以表示权重。这一思路与我们之前在 Canvas 2D 条形图中熟悉的“数据到视觉编码”完全一致，只是 Three.js 把它扩展到了三维空间。

当观众用鼠标点击场景中的一个数据点时，Three.js 需要用射线检测（Raycaster） 来判定鼠标的二维坐标与哪个 3D 物体相交——这相当于“顺着观众的视线发射一束看不见的光，看看它碰到了哪位演员”。

剧本写好了，但舞台上的演出应该是活的。

const normalizedValue = (value - min) / (max - min) * maxHeight;

让数据活起来

静态的 3D 场景只是一张漂亮的截图。真正的“可视化”要能让观众感受到数据的生命力——柱子缓缓升起、数据点轻轻浮动、视角平滑旋转。这就是 Three.js 动画体系要解决的问题。

前面提到的 渲染循环 在这里发挥关键作用：动画的本质，就是在每一帧渲染前微调场景中各物体的属性（位置、角度、透明度等），以“每一帧都变一点”的方式累计出运动的错觉。这与你小时候在书本角落画小人、快速翻页形成动画的原理完全一样——但 Three.js 替你完成了那本“书”。

为了让运动平滑而非跳变，需要引入 插值（Interpolation）。比如一个数据点要从位置 A 移动到位置 B，我们不希望它瞬间闪现，而是希望它在 1 秒内匀速地滑过去——于是每一帧计算这次移动的中间位置，呈现出一条平滑的轨迹。

有了渲染循环和插值这两个“时间魔法师”，我们还能给场景加上交互——用户点击一个数据柱子，柱子自动旋转一圈或展开详细面板。Three.js 的交互事件体系让用户不再是“被动看戏的观众”，而是能“走上舞台参与表演的嘉宾”。

至此，一套完整的 Three.js 3D 数据可视化方案已经成型。

AI 应用场景

Python 演示

import numpy as npimport matplotlib.pyplot as plt def normalize(arr, new_min=0, new_max=100):    """把数据归一到 [new_min, new_max] 区间,模拟 Three.js 坐标映射"""    arr_min, arr_max = arr.min(), arr.max()    if arr_max == arr_min:        return np.full_like(arr, (new_min + new_max) / 2)    return (arr - arr_min) / (arr_max - arr_min) * (new_max - new_min) + new_min def generate_sales_data(n_points=50):    """随机生成模拟的销售数据"""    rng = np.random.default_rng(42)    return {        'sales': rng.integers(50, 500, n_points),        'profit': rng.integers(5, 100, n_points),        'city_code': rng.integers(0, 5, n_points),    } def build_3d_scene(data):    """把数据映射成 3D 场景中的位置、大小、颜色"""    sales_norm = normalize(data['sales'], 0, 100)    profit_norm = normalize(data['profit'], 0, 100)    city_idx = data['city_code']     colors = plt.cm.viridis(city_idx / city_idx.max())    sizes = 20 + sales_norm * 3    fig = plt.figure(figsize=(10, 8))    ax = fig.add_subplot(111, projection='3d')    ax.scatter(sales_norm, profit_norm, city_idx * 10,               c=colors, s=sizes, alpha=0.7)    ax.set_xlabel('Sales (0-100)')    ax.set_ylabel('Profit (0-100)')    ax.set_zlabel('City Code')    ax.set_title('3D Sales Data Visualization (Simulating Three.js Scene)')    return fig, ax if __name__ == '__main__':    data = generate_sales_data()    fig, ax = build_3d_scene(data)    plt.show()

1. def normalize(arr, new_min=0, new_max=100):归一化函数把任意数值范围的数据缩放到目标区间，对应 Three.js 场景中把业务数据映射到三维坐标时的缩放逻辑。
2. (arr - arr_min) / (arr_max - arr_min) * (new_max - new_min) + new_min标准最大最小归一化公式：先计算数据在原始范围的比例，再按比例搬到新区间。
3. rng.integers(50, 500, n_points)生成 50 个城市的模拟销售额数据，该数据后续映射为 3D 场景中散点的位置。
4. sales_norm = normalize(data['sales'], 0, 100)把原始销售额映射到 0-100 的“场景坐标空间”，对应 Three.js 中 z = normalize(value) 的操作。
5. sizes = 20 + sales_norm * 3保持销售额同时控制点大小，演示“一个数据维度驱动多个视觉通道”的思路。
6. ax.scatter(sales_norm, profit_norm, city_idx * 10, c=colors, s=sizes, alpha=0.7)核心的 3D 散点绘制函数：参数 c 和 s 分别绑定颜色与大小，等价于 Three.js 中的 Mesh 颜色与缩放属性。
7. plt.cm.viridis(city_idx / city_idx.max())将城市编号映射为颜色值，对应 Three.js 中“数据类别→材质颜色”的编码方式。

常见误区

面试题