三维地球与数据图层要在浏览器里流畅运行,性能是硬约束
项目概览
项目背景
这是一套以卫星与星座为题材的三维可视化大屏:用 Three.js 构建三维地球场景,叠加 ECharts 数据图层承载统计指标。项目的特点是完整、可独立运行——安装依赖后本地起服务就能看到交付版本的效果,项目内还留有目录说明、部署说明与状态记录。
客户当时的状态
可视化大屏这类项目有个常见的坑:做出来好看,但改不动。样式和数据揉在一起,想调整一个图层的呈现方式,要先搞清楚当初是怎么写的;演示环境和交付版本不一致,给客户看的和最后拿到的不是一个东西。另外三维场景对性能很敏感,做之前如果不把渲染开销当成约束,上线后会卡得没法用。
我们的做法与取舍
第一个取舍是三维场景和数据图层分层。三维负责空间感和题材氛围,数据图表负责精确表达,两者各自优化,不互相拖累性能。
第二个取舍是把本地演示当成交付的一部分。交付后客户要能自己跑起来看,而不是只能等我们演示。这一点看起来是小事,实际上决定了大屏有没有被真正用起来。
第三个取舍是留下文档。目录说明、部署说明、状态记录三份都写清楚,后续接手的人不用从零猜结构。这也是我们做这类项目的一贯要求——代码会交给客户,那就得让客户看得懂。
系统怎么承载这条链路
系统分三层:三维场景层承载地球与星座题材的视觉;数据图层承载统计与指标;工程与交付层负责构建配置、本地演示环境和部署说明。可视化层与数据来源解耦,接口按客户的数据格式对接。
交付状态与边界
项目可独立运行,最近一次提交在 2026 年 8 月。边界说明:项目承载的是可视化呈现,卫星数据的获取与处理不在范围内,数据来源由贵方提供或另行对接;场景服务于展示与汇报,不是轨道计算工具,不承诺航天级精度;大屏屏体、拼接与现场施工不属于开发范围。
如果只是想验证效果,这套案例我们可以安排演示——它不依赖外部服务,本地跑起来就是完整效果。
项目信息
某航天题材可视化项目
工业与能源
未披露
Three.js / WebGL / ECharts / 前端工程化 / 静态部署
三维可视化大屏
CHALLENGES
客户当时面对的现实
可视化大屏最容易变成「好看但不能改」,样式与数据要解耦
交付后客户要能自己部署与调整,不能每次都找开发
演示与交付要一致,本地起服务就能看到与线上相同的效果
CAPABILITIES
我们交付的能力
大屏不是画图,是要能跑起来的东西
三维地球与星座呈现
基于 Three.js 的三维地球场景,承载星座与卫星轨道等题材的视觉呈现。
数据图层
用 ECharts 承载统计与指标类图层,与三维场景分层组合。
可本地演示
安装依赖后本地启动即可完整演示,不依赖外部服务,演示效果与交付版本一致。
交付文档齐备
项目内留有目录说明、部署说明与状态记录,后续接手的人不用从零猜结构。
SCOPE
交付范围
以下范围按本项目实际交付内容与边界整理,不属于这次范围的部分一并列出。
已交付
- 三维地球与星座题材可视化场景
- 统计与指标类数据图层
- 本地开发与演示环境配置
- 目录说明、部署说明与项目状态记录
不在本次范围
- 卫星数据的获取与处理:项目承载的是可视化呈现,数据来源由客户提供或对接
- 真实轨道计算与航天级精度:可视化场景服务于展示与汇报,不是轨道计算工具
- 大屏硬件与现场部署:屏体、拼接与现场施工不在开发范围内
ARCHITECTURE
分层技术架构
公开口径归纳为三层:场景层是三维地球与题材场景;图层承载统计与指标数据;工程层负责构建、部署与本地演示环境。
三维场景层
承载题材化的视觉呈现
数据图层
承载需要精确表达的数据
工程与交付层
保证交付后可独立运行与维护
DELIVERY
交付过程
分阶段推进,每个阶段都有可验收的产出,客户在早期就能看到实际效果。
数据与场景定义
确认要呈现哪些数据、它们之间的关系,以及三维场景承载哪一部分。
三维场景实现
搭建三维地球与题材场景,处理渲染性能与交互。
数据图层接入
ECharts 指标图层与三维场景叠加,形成统一的可视化视图。
交付与文档
整备本地演示环境,补齐目录说明与部署说明,交付即可演示。
FACTS
可核验的交付事实
以下内容来自本项目实际交付物;未经验证的指标不予展示。
本地启动即可完整演示
三维场景 + 数据图表分层
目录说明 / 部署说明 / 状态记录
TRANSFER
这套做法适不适合你
案例的用处不是证明"我们做过",而是让你判断"在我们这种条件下能不能做成"。下面三句是我们对这一单的判断,写下来供你对照自己的情况。
适合什么情况
适合需要把多类数据放进统一可视化场景、且希望交付后可自行维护的项目。
什么情况下别照搬
若需求只是几张静态图表,上三维场景属于过度设计;若需要航天级轨道计算,可视化方案不适用。
如果要试,第一步做什么
先列这张大屏要回答的问题和要呈现的数据,再谈三维还是二维。
RELATED SERVICES
相关服务
从实际业务问题出发,查看对应服务的适用场景、交付物与不含项;具体范围仍需单独确认。
FAQ
常见问题
以下是同类项目沟通中出现频率最高的问题,答案就是我们实际的做法。
大屏能不能先看看效果?
三维场景会不会很吃性能?
数据要接我们自己的怎么办?
交付后我们自己能改吗?
这种大屏适合什么场景?
做类似的大屏怎么开始?
本页最后更新:2026年9月24日