探索版
- 3D 场景 3 个,单场景 ≤ 800 万数据点
- Three.js 图层上限 12 层,D3.js 图表 20 组
- 标准响应式断点 3 档(1920 / 1024 / 640)
- 共享 GPU 渲染队列,峰值 30 并发会话
生态协同
与数据基础设施、渲染引擎与行业模型团队打通接口,让 3D 可视化从「演示」走进生产链路。所有接入方均通过统一 WebGL 渲染适配层与 D3.js 比例尺规范校验。
服务与价格档位
不做「一口价全包」:档位差异体现在并发场景数、3D 图层上限、GPU 渲染配额与响应式适配断点数,便于按项目阶段切换。
应用场景展示
左侧固定场景索引,右侧随滚动逐条展开业务语境:从供应链到城市时空,每一类数据都有自己的空间语法。滚动时右侧卡片依次滑入,左侧保持视角不丢失。
把 3.6 万个仓、线、运单节点放进三维力导向布局,异常路径以暖色高亮;对比二维平面视图,路径冲突识别时间从 12 分钟降到 3 分半。
把注册、试跑、分享三阶漏斗做成可旋转层叠柱,悬浮即展开该层细分渠道;配合 D3.js 比例尺,同比差异用厚度而非颜色区分,避免色觉误读。
接入 8600 个传感器点位,按 5 秒粒度刷新;WebGL 实例化渲染让同屏设备数提升 4 倍,告警点位以描边动画闪烁,巡检路径按最短耗时重排。
设计师在三维画布上直接拖动图层、调整相机与光照,数据侧同步更新绑定字段;一次评审的来回次数由平均 4.2 轮压缩到 1.6 轮。
平台能力
每项能力都对应可测量的工程指标,而不是形容词堆叠。
同屏 10 万级几何体仅 1 次 draw call,帧率稳定 60fps,移动端降级到 30fps 仍可交互。
相机、光照、后处理以配置声明,切换视角不重编译着色器,场景加载缩减 42%。
比例尺、轴、堆叠算法直接复用 D3 模块,确保 3D 表达不牺牲统计口径准确性。
悬浮 120ms 内返回命中结果,支持框选、刷选、联动高亮,交互反馈不阻断主线程。
1920 / 1440 / 1024 / 640 / 380 五档断点,触屏点按区 ≥ 44px,横竖屏布局自动重排。
提供色觉友好备选色板、键盘可达焦点链路、减少动态效果降级,文本对比度 ≥ 4.5:1。
数据可视化面板
把渲染性能本身也当作被观测的数据:帧率、显存、瓦片命中率与首屏耗时,全部纳入同一监控口径。
客户评价
「把仓储网络搬进三维空间后,区域经理不再需要读表格。异常路径的发现时间从 12 分钟降到 3 分半,月度复盘会减少了 40 分钟。」
「设计师和数据分析师第一次共用一块画布。评审来回从 4.2 轮压到 1.6 轮,交付节奏快了约两周。」
「8600 个传感器点位同屏刷新,帧率稳在 58 以上;告警定位从翻日志变成点一下设备体,平均处置提速 27%。」
实用指导清单
以下每一条都来自真实项目踩坑总结,含可执行参数与验收阈值,可直接放进团队规范文档。
开画面前先写清上限:单场景几何体 ≤ 10 万、纹理总显存 ≤ 512 MB、每帧 draw call ≤ 120。用 renderer.info.render.calls 在开发环境打印并设阈值告警,超预算时优先降 LOD 而非砍交互。
坐标映射、比例尺、堆叠统计一律交给 D3.js 计算并输出纯数值;Three.js 只负责几何、材质与相机。禁止在着色器里写统计逻辑,否则口径变更时会出现图表与 3D 场景数值不一致。
悬浮高亮用射线检测 + 预计算包围盒,命中判定延迟目标 ≤ 120ms;重计算放到空闲回调并分片执行,每片 ≤ 8ms,避免长任务阻塞导致帧率跌破 50fps。
按 1920 / 1440 / 1024 / 640 / 380 五档布局;像素比上限取 min(devicePixelRatio, 2),低端设备降到 1.5,配合动态分辨率可将帧率拉回 55fps 以上。触屏点按区不小于 44×44px。
同一视图内彩色类别不超过 6 种,深浅差异靠明度而非饱和;文本对比度 ≥ 4.5:1、大字 ≥ 3:1;为色觉障碍提供纹理或形状编码备选,并保留 prefers-reduced-motion 降级,关闭所有循环动画。
首屏可交互 ≤ 1.5s(4G 环境)、稳定帧率 ≥ 55fps、内存增长 10 分钟不超过 8%、无横向溢出(任意视口 scrollWidth ≤ clientWidth + 1px)、键盘可遍历全部交互点。任一项不达标即回退版本。
导入一份真实数据集,产出 1 个可交互 3D 场景 + 1 份渲染性能报告,附带落地上线检查表。