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本地 API127.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 数组换成真实设备清单与坐标。程序化建模的另一个好处是改几个数字就能换厂房布局不用碰建模软件。 本文对应的完整工程源码已整理上传点击查看资源包
