场景编排与实时预览
基于 Three.js 的场景层，支持设备模型拖拽组合、相机预设切换与实时预览；改动一处，桌面宽幅与移动竖版两套视角同步更新。
预览响应 ≤ 120ms · 相机预设 2 套
3D 设计 · 物联网解决方案 · 生态协作
把未来物联网解决方案搬进可协作的 3D 创意空间
以 Three.js + React 构建可复用的 3D 场景层，让设备厂商、算法团队与体验设计师在同一套可视化语言里对齐需求：传感器拓扑、数据流走向与交互反馈全部立体呈现，减少 40% 以上的跨团队沟通轮次。
≤1.8MB首屏 3D 资源预算
58 FPS中端移动端稳定帧率
-42%需求返工率（协作后）
01 / COMPARE
解决方案对比：先选对渲染与协作路径
| 方案 | 首屏体积 | 交互深度 | 协作成本 | 适用团队 |
|---|---|---|---|---|
| 轻量 CSS 3D transform 层叠 + 视差 |
≈200KB | 中：悬浮、翻转、呼吸缩放 | 低：纯前端，无需建模师 | 官网展示、方案路演页 |
| Three.js 场景层 GLB 分片 + 按需加载 |
1.2–1.8MB | 高：剖切、拆解、点选联动 | 中：需 3D 资产与数据映射 | 数字孪生、设备运维看板 |
| WebGL 全量渲染 自研着色器 + 后处理 |
3MB 以上 | 高：体积雾、辉光、实时反射 | 高：需图形与性能专项 | 展会大屏、旗舰发布体验 |
选型阈值建议：若目标设备中低端占比 > 35%，优先「轻量 CSS 3D + Three.js 局部嵌入」；单场景可交互设备数超过 300 个时，改用实例化渲染并开启视锥体剔除。
02 / FLOW
工作流程步骤：从需求到上线的五段协作轴
需求对齐与场景清单冻结
由产品、硬件与体验设计三方共建「设备—数据—交互」三列清单，冻结本次要展示的模块数量与优先级。
- 输出物：场景清单表（设备类型、数据频率、交互动作、验收指标四列）
- 准入阈值：清单条目 ≤ 24 条，超出则拆分为多期
- 避坑：不要在建模阶段才补充数据字段，会导致返工重做贴图与绑定
3D 资产规范与网格预算
统一坐标系、单位与命名规则，控制单个设备模型的面数与贴图尺寸。
- 单设备模型 ≤ 8,000 三角面，贴图单张 ≤ 1024×1024，采用 WebP 或 KTX2
- 命名规则：设备类型_编号_LOD0，便于程序化加载与替换
- 所有 GLB 按用途切分为「首屏核心组」与「按需补充组」两包
React 组件化封装与数据绑定
把 3D 场景封装为可复用 React 组件，通过 props 注入实时数据，避免场景与业务逻辑耦合。
- 每 500ms 批量合并一次数据更新，避免逐条刷新触发重渲染风暴
- 用状态机管理「加载 / 就绪 / 降级」三态，弱网自动切 2D 拓扑图
- 响应式设计：同一场景输出桌面宽幅与移动竖版两套相机预设
用户体验优化与性能压测
以真机为准做帧率、首帧时间与交互延迟三项压测，并给出降级策略。
- 目标：中端移动端稳定 ≥ 50 FPS，首帧可交互 ≤ 2.5s
- 开启实例化渲染与遮挡剔除后，同屏设备数可从 120 提升至 300+
- 降低动态阴影分辨率至 1024，可回收约 18% 的 GPU 时间
生态交付与版本协同
把场景资产、数据映射表与组件版本一并归档，供合作方复用与二次扩展。
- 交付三件套：GLB 资产包、字段映射表、组件 README（含参数说明）
- 每次结构变更打一次语义化版本号，合作方按需锁定
- 保留一份 2D 静态拓扑快照，作为低端设备与无 WebGL 环境的兜底
03 / GUIDE
实用指导清单：3D 物联网展示的 6 条硬约束
首屏资源必须设硬预算
3D 相关请求总量压到 ≤1.8MB，纹理优先 KTX2、模型优先 Draco 压缩；超预算时先减后处理特效，而非砍掉交互。
给每台设备一个稳定 ID
场景对象名与数据通道用同一套 ID 映射，示例：gw-03-temp。缺映射时数据更新无法定位节点，是返工率最高的坑。
降级方案要在开发前定好
检测到无 WebGL 或帧率连续 3 秒低于 30 FPS，自动切换 2D 拓扑图，并保留关键数值文本，确保信息不丢失。
动效只服务信息层级
呼吸缩放幅度控制在 1.0–1.06 之间，周期 16–22s；旋转类动效每秒不超过 6 度，避免眩晕并降低 GPU 占用。
数据刷新节流 + 批量合并
高频传感器数据每 500ms 合帧一次；超过 200 个动态节点时改用实例化属性缓冲，避免逐节点重建材质。
协作资产命名与版本对齐
资产、映射表、组件三者版本号必须一致；提交前跑一次场景校验脚本，检查缺失贴图、空材质与超面数模型。
04 / CAPABILITY
核心能力卡片：三项支撑生态协作的底座能力
数据到视觉的映射引擎
把设备遥测字段映射为颜色、高度与脉冲频率，异常状态用强调色小面积点亮；映射表可视化编辑，非工程角色也能参与调整。
支持映射字段 32 个 · 异常识别延迟 ≤ 800ms
多端一致与协作交付
响应式设计保证同一场景在超宽屏到 320px 手机均可读；资产包、字段映射表与组件说明成套导出，合作方按语义化版本接入。
适配 320–2560px · 交付三件套齐备率 100%
05 / GALLERY
场景图集：创意纷呈的落地切片
把你的物联网解决方案，接进这套 3D 协作底座
提供设备清单与数据字段，48 小时内返回场景搭建评估：包含资源预算、渲染路径建议与合作方接入方式，先对齐标准再动手建模。