Three.js 数字孪生工厂实战：程序化建模、数据驱动状态灯与拾取交互全源码
数字孪生的 Web 演示很多，能跑起来又讲清结构的少。这套完整工程搭建了一个「数字工厂」三维场景：厂房、产线设备、料仓、烟囱、道路全部程序化建模（零外部模型文件），本地 API 每 2 秒下发 6 台设备指标，三维状态灯随数据实时变色（绿=正常/黄=预警/红=故障），单击设备弹出实时参数面板。全部代码零第三方服务依赖，three.js 已本地化，内网离线可运行。
一、工程分层
| 文件 | 职责 | 改造点 |
|---|---|---|
| index.html | 页面骨架 + HUD + 详情面板 | 改布局样式 |
| js/main.js | 场景搭建与拾取交互（约 200 行注释） | 换设备清单坐标 |
| js/twin-core.js | 轮询 API → 缓存 → 驱动材质 | 接真实 PLC 数据 |
| js/data-simulator.js | 指标随机游走模拟 | 删掉换真实数据源 |
| server/api_server.py | 本地 API（127.0.0.1:18099） | 换 MQTT/网关 |
数据层与三维层解耦是这套代码的核心设计：twin-core.js 只负责「拉数据、更新缓存、驱动材质」，把/api/metrics换成真实 PLC/网关接口即可直接用于产线。
二、实测功能
启动只需两步：解压后双击启动.bat（或python server/api_server.py），浏览器打开http://127.0.0.1:18099：
[场景] 厂房/料仓/烟囱/6 台设备/道路 完整渲染 [状态灯] /api/metrics 轮询后 4 绿 1 黄 1 红，HUD 统计 6/4/1/1 一致 [拾取] 点击预警设备 -> 「ASM-01 · 总装线 1 号 / 80℃ / 1472rpm」 [模拟] 随机游走：超 74℃ 预警、超 82℃ 故障三、三个关键实现
- 状态灯：MeshStandardMaterial.emissive 自发光 + 轮询回调里 setHex 换色，无需后处理管线；
- 拾取：pointerdown/up 距离阈值区分「拖视角」与「单击」，raycaster 命中后沿 parent 链找挂了 deviceId 的 Group；
- 本地化：three.module.js 与 OrbitControls.js 用 importmap 映射
three与three/addons/，注意 OrbitControls 必须放在映射后的路径（js/controls/），层级错一个 module 就静默失败。
四、对接真实设备
三步替换：api_server.py 的 get_metrics() 改读 PLC/Modbus 网关/MQTT；轮询间隔 2s 按产线节拍调整或改 WebSocket 实时下发；main.js 的 DEVICES 数组换成真实设备清单与坐标。程序化建模的另一个好处是改几个数字就能换厂房布局，不用碰建模软件。
📦 本文对应的完整工程源码已整理上传：点击查看资源包
