Three.js 供应链三维可视化：全球物流轨迹、库存热力图与数字孪生的交互呈现
一、引言
供应链管理软件的用户界面在过去二十年几乎没有本质变化------表格、过滤器、甘特图，偶尔加一个基于百度/高德地图的 2D 物流轨迹。这些界面的问题是：它们展示的是"数据"而非"场景"。当一个供应链经理看到"库存水位 35%"这个数字时，他需要在自己的脑中构建出仓库的空间分布、货架状态、以及周边节点的库存关系------这种认知负荷在处理 50 个以上 SKU 的跨国供应链时会快速过载。
Three.js 提供了一种弥补数据与物理世界之间认知鸿沟的手段。当供应链数据被映射到一个三维场景时------全球物流轨迹变成地球模型上的彩色弧线、库存状态变成仓库热力图上的颜色梯度、生产设备状态变成工厂数字孪生的实时动画------供应链经理可以在数秒内感知到异常状态，而不需要通过十几个仪表盘拼凑结论。
这篇文章聚焦 Three.js 在供应链可视化中的三个典型场景：全球物流轨迹的 3D 地球呈现、仓库库存的热力图着色、以及生产线的数字孪生映射。重点不在 Three.js 的渲染管线本身，而在数据驱动的场景构建架构。
二、核心原理
Three.js 作为 WebGL 的封装库，提供了在浏览器中构建三维场景的完整能力------几何体、材质、光照、相机、动画循环。在供应链场景中，可视化架构由三个关键部分组成：
场景数据层。从 GraphQL 数据中台（参见第 5 篇）拉取供应链实时数据------物流节点坐标、运输事件时间线、库存水位百分比、设备状态。数据与可视化之间的映射关系由配置驱动，而非硬编码------一个 JSON mapping 文件定义了"库存水位 0-100% → 颜色 绿色→红色 渐变"。
几何抽象层。将供应链对象映射为 Three.js 几何实体------运输中的货物是球体/立方体沿着贝塞尔曲线路径运动，仓库是带有高度柱状图的 3D 建筑模型，物流路线是管状曲线，供应商/分销商是不同颜色和大小的球体节点。
交互层。场景不只是静态展示，还支持用户交互------点击仓库节点弹出库存明细面板、拖拽旋转地球视角、悬停物流路线显示运输详情 tooltip。Raycaster 是实现物体拾取的核心机制。
核心设计思想：三维场景不是替代数据表格，而是作为数据表格的空间伴侣------用户可以在 3D 场景中通过直觉感知（"那个仓库怎么变红了？"），然后点击进入精确的数据面板（"安全库存线是谁越过了？"）。这种直觉感知 + 精确查询的双通道交互模式，比单纯的表格或单纯的 3D 可视化都更高效。
三、关键实现
场景管理核心------创建全球物流视图：
typescript
// visualization/SupplyChainScene.ts
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 设计决策：使用数据驱动的场景管理器，
// 配置文件中定义"数据字段 → 视觉属性"的映射关系，
// 而非在代码中硬编码视觉效果
interface SceneConfig {
nodeColorMap: Record<string, string>; // 节点类型 → 颜色
arcColor: (status: string) => string; // 物流状态 → 颜色
inventoryToColor: (level: number) => string; // 库存水位 → 颜色
}
interface SupplyChainNode {
id: string;
name: string;
type: 'supplier' | 'warehouse' | 'distributor' | 'retailer';
lat: number;
lng: number;
inventoryLevel: number; // 0-100%
status: 'normal' | 'warning' | 'critical';
}
interface LogisticsEvent {
from: string;
to: string;
status: 'in_transit' | 'delayed' | 'delivered';
progress: number; // 0-1
}
class SupplyChainScene {
private scene: THREE.Scene;
private camera: THREE.PerspectiveCamera;
private renderer: THREE.WebGLRenderer;
private controls: OrbitControls;
private nodeObjects: Map<string, THREE.Object3D> = new Map();
private arcObjects: Map<string, THREE.Line> = new Map();
private raycaster: THREE.Raycaster;
private config: SceneConfig;
constructor(container: HTMLElement, config: SceneConfig) {
this.config = config;
// 场景初始化
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x0a0a1a);
this.camera = new THREE.PerspectiveCamera(
45, container.clientWidth / container.clientHeight, 0.1, 1000
);
this.camera.position.set(0, 5, 15);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(this.renderer.domElement);
// 光照
this.scene.add(new THREE.AmbientLight(0x404060, 1.5));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 5);
this.scene.add(dirLight);
// 控制
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
// 拾取
this.raycaster = new THREE.Raycaster();
this._createEarth();
this._animate();
}
/**
* 创建地球模型 + 经纬度网格
* 设计决策：使用球体 + 经纬线替代贴图地球，
* 减少纹理加载时间且更适配赛博朋克视觉风格
*/
private _createEarth(): void {
const earthGeom = new THREE.SphereGeometry(5, 64, 64);
const earthMat = new THREE.MeshPhongMaterial({
color: 0x1a1a3e,
wireframe: true,
transparent: true,
opacity: 0.15,
});
const earth = new THREE.Mesh(earthGeom, earthMat);
this.scene.add(earth);
// 经纬线
for (let i = 0; i < 36; i++) {
const angle = (i / 36) * Math.PI * 2;
const points = [];
for (let j = 0; j <= 64; j++) {
const phi = (j / 64) * Math.PI;
points.push(new THREE.Vector3(
5 * Math.cos(angle) * Math.sin(phi),
5 * Math.cos(phi),
5 * Math.sin(angle) * Math.sin(phi)
));
}
this.scene.add(new THREE.Line(
new THREE.BufferGeometry().setFromPoints(points),
new THREE.LineBasicMaterial({ color: 0x1a3050, transparent: true, opacity: 0.3 })
));
}
}
/**
* 经纬度 → 地球球面上的 3D 坐标
*/
private _latLngToVec3(lat: number, lng: number, radius: number = 5.1): THREE.Vector3 {
const phi = (90 - lat) * (Math.PI / 180);
const theta = (lng + 180) * (Math.PI / 180);
return new THREE.Vector3(
-radius * Math.sin(phi) * Math.cos(theta),
radius * Math.cos(phi),
radius * Math.sin(phi) * Math.sin(theta),
);
}
/**
* 创建供应链节点（供应商/仓库等发光球体标记）
*/
addNode(node: SupplyChainNode): void {
const position = this._latLngToVec3(node.lat, node.lng);
// 库存热力图：底部柱状体------高度反映库存水位，颜色反映状态
const barHeight = (node.inventoryLevel / 100) * 1.5;
const barGeom = new THREE.CylinderGeometry(0.15, 0.15, barHeight, 16);
const barColor = new THREE.Color(
this.config.inventoryToColor(node.inventoryLevel)
);
const barMat = new THREE.MeshPhongMaterial({
color: barColor,
emissive: barColor,
emissiveIntensity: 0.4,
transparent: true,
opacity: 0.8,
});
const bar = new THREE.Mesh(barGeom, barMat);
bar.position.copy(position).add(
new THREE.Vector3(0, barHeight / 2, 0)
);
bar.userData = { nodeId: node.id, type: 'inventory' };
this.scene.add(bar);
// 节点球体标记
const nodeGeom = new THREE.SphereGeometry(0.2, 16, 16);
const nodeColor = this.config.nodeColorMap[node.type] || '#00ff88';
const nodeMat = new THREE.MeshPhongMaterial({
color: new THREE.Color(nodeColor),
emissive: new THREE.Color(nodeColor),
emissiveIntensity: 0.6,
});
const nodeSphere = new THREE.Mesh(nodeGeom, nodeMat);
nodeSphere.position.copy(position);
nodeSphere.userData = { nodeId: node.id, type: 'node', nodeData: node };
this.scene.add(nodeSphere);
this.nodeObjects.set(node.id, nodeSphere);
}
/**
* 创建物流轨迹：贝塞尔弧线连接两个节点
* 设计决策：控制点设在两个节点的中间上空，
* 曲线弧高与距离成反比------远距离线路弧度更大更美观
*/
addLogisticsArc(event: LogisticsEvent, fromNode: SupplyChainNode, toNode: SupplyChainNode): void {
const from = this._latLngToVec3(fromNode.lat, fromNode.lng);
const to = this._latLngToVec3(toNode.lat, toNode.lng);
// 控制点：两点的中点向外偏移
const mid = from.clone().add(to).multiplyScalar(0.5);
const dist = from.distanceTo(to);
const ctrlHeight = Math.min(dist * 0.6, 3);
const ctrl = mid.clone().normalize().multiplyScalar(5 + ctrlHeight);
// 二次贝塞尔曲线
const curve = new THREE.QuadraticBezierCurve3(from, ctrl, to);
const points = curve.getPoints(64);
const geom = new THREE.BufferGeometry().setFromPoints(points);
const color = new THREE.Color(this.config.arcColor(event.status));
const mat = new THREE.MeshLineMaterial?.({
color,
lineWidth: 0.3,
transparent: true,
opacity: 0.7,
}) || new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.7 });
const line = new THREE.Line(geom, mat);
line.userData = {
arcId: `${event.from}-${event.to}`,
eventData: event,
};
this.scene.add(line);
this.arcObjects.set(`${event.from}-${event.to}`, line);
}
/**
* Raycaster 拾取：点击 3D 物体 → 触发数据面板
*/
handleClick(event: MouseEvent, container: HTMLElement): SupplyChainNode | null {
const mouse = new THREE.Vector2(
(event.clientX / container.clientWidth) * 2 - 1,
-(event.clientY / container.clientHeight) * 2 + 1,
);
this.raycaster.setFromCamera(mouse, this.camera);
const intersects = this.raycaster.intersectObjects(
Array.from(this.nodeObjects.values()), true
);
if (intersects.length > 0) {
const obj = intersects[0].object;
// 设计决策：递归查找 userData 中标记了 nodeId 的父对象
let current = obj;
while (current) {
if (current.userData?.nodeId && current.userData?.type === 'node') {
return current.userData.nodeData as SupplyChainNode;
}
current = current.parent as THREE.Object3D;
}
}
return null;
}
private _animate(): void {
const loop = () => {
requestAnimationFrame(loop);
this.controls.update();
this.renderer.render(this.scene, this.camera);
};
loop();
}
}配置驱动的视觉映射：
typescript
// visualization/sceneConfig.ts
import type { SceneConfig } from './SupplyChainScene';
// 设计决策：颜色映射集中管理在配置对象中，
// 便于主题切换（日间/夜间模式）和品牌定制
export const defaultSceneConfig: SceneConfig = {
nodeColorMap: {
supplier: '#4fc3f7', // 浅蓝
warehouse: '#ffb74d', // 橙色
distributor: '#81c784', // 绿色
retailer: '#ce93d8', // 紫色
},
arcColor: (status: string): string => {
switch (status) {
case 'in_transit': return '#00e5ff';
case 'delayed': return '#ff5252';
case 'delivered': return '#69f0ae';
default: return '#616161';
}
},
inventoryToColor: (level: number): string => {
// 红(0%) → 橙(25%) → 黄(50%) → 黄绿(75%) → 绿(100%)
if (level <= 20) return '#ff1744'; // 严重不足
if (level <= 40) return '#ff9100'; // 偏低
if (level <= 60) return '#ffea00'; // 正常偏低
if (level <= 80) return '#aeea00'; // 健康
return '#00e676'; // 充足
},
};四、边界与约束
性能与可渲染对象数量。50 个仓库节点 + 200 条物流弧线 + 每个节点 5 个子对象，场景对象总数约 1250 个。这在桌面端无压力，但在移动设备上可能降至 20-30fps。优化策略：LOD（远距离节点降级为点精灵）、视锥体裁剪、以及关键弧线才使用抗锯齿。
数据更新频率与渲染循环的同步。WebSocket 推送的物流事件可能是每秒 10-50 条，而渲染循环在 60fps。直接将事件更新写入场景对象有线程安全问题（JS 是单线程但需要防抖动）。方案是使用 requestAnimationFrame 回调队列------累积一帧内所有数据更新，在下一帧渲染前一次性应用。
地理坐标到 3D 空间的精度损失。经纬度到球面的投影在 Three.js 中受 float32 精度限制，节点位置的误差在 1-5 米级别。对于全球物流可视化（尺度为数千公里），这个精度可以接受。但对于仓库内部网格级的数字孪生（尺度为数米），需要使用本地坐标系代替全球球面映射。
浏览器兼容性与 WebGL 降级 。Three.js 依赖 WebGL 2.0，在不支持的浏览器（如某些企业内网 IE 模式）上需要降级到 2D 地图视图。通过检测 canvas.getContext('webgl2') 做特性探测，降级路径切换为 Leaflet/Mapbox 的 2D 地图。
五、总结
Three.js 在供应链场景中的价值不是"很好看"，而是"看得快"。当供应链经理面对 100 个跨国仓库和 500 条活跃物流线路时，在 3D 地球视图中花 15 秒感知到整体态势，比在 Excel 中花 15 分钟翻页找异常高效一个数量级。
但这背后有一个需要警惕的陷阱：3D 可视化如果过度装饰（粒子特效、镜头光晕、华丽过渡动画），反而会分散注意力，让数据被视觉效果掩盖。有效的供应链三维可视化，本质上是一个"数据密度 × 感知效率"的优化问题------每一个视觉编码（颜色、高度、大小、闪烁频率）都应对应一个有业务含义的数据维度，没有意义的装饰全是噪音。
从实现角度看，数据驱动的场景构建架构（JSON mapping 配置 → Three.js 场景对象）是关键的设计原则。它让场景的视觉表现独立于数据来源，也让非 Three.js 开发人员（如业务分析师）能够通过修改配置文件来调整视觉呈现，而不需要深入 WebGL 渲染代码。