Encom Boardroom 是一个使用 HTML5 和 Three.js 技术重现迪士尼电影《创战纪：战神崛起》（Tron: Legacy）中会议室场景的开源项目。
它的核心功能是将来自 GitHub 和 Wikipedia 的实时数据流通过 3D 可视化方式呈现在一个交互式地球上。
项目目标是展示如何将电影级的视觉效果与真实世界的数据流结合，创造出具有实用价值的数据可视化界面。作者明确表示这是一个"loose adaptation"（宽松改编），而非精确复刻，因为原电影场景包含了大量细节。
能力边界： 这是一个展示性质的可视化项目，不是数据分析平台或监控系统。它不提供数据存储、历史回溯或统计分析功能，主要价值在于实时数据流的视觉呈现。
核心功能与设计机制
3D 地球可视化
项目使用 Three.js 渲染一个交互式 3D 地球，这是整个可视化的基础。地球的实现基于作者提取的独立库 Encom Globe，该库使用了 Hexasphere.js 来生成几何球体，以及 Quadtree2 作为空间数据结构。
这样设计的原因是：3D 球体相比 2D 地图能更直观地展示全球范围的数据分布，同时保持空间关系的准确性。球体表面可以承载多层信息（如地理边界、数据点、连线），适合表现数据流动的方向性。
实时数据流接入
项目接入了两个公开数据源：
GitHub 公开时间线： 通过 GitHub 的 public timeline feed 获取全球范围内的代码提交、PR、Issue 等活动。每个事件通过 geonames.org 进行地理位置映射，用户头像通过 Gravatar 获取。
Wikipedia 实时 IRC： 接入 Wikipedia 的 IRC feed，获取匿名用户的编辑活动。匿名用户的 IP 地址通过 freegeoip.net 转换为地理坐标。
这种设计允许项目展示全球范围内开源协作和知识贡献的实时动态，试图解决"如何让抽象的数据活动具象化"这一问题。
数据流动画系统
当数据事件发生时，系统会在地球表面对应位置生成视觉标记，并通过动画线条展示数据流向。这些动画使用 Three.js 的粒子系统和线条渲染实现，配合适当的缓动函数创造流畅的视觉效果。
如何使用
基础部署方式
如果只需要展示静态效果或使用预设数据，可以直接部署 HTML 文件：
方式一：直接打开
# 克隆项目git clone https://github.com/arscan/encom-boardroom.gitcd encom-boardroom# 使用任意 HTTP 服务器运行# 例如使用 Pythonpython -m http.server 8000# 或使用 Node.js 的 http-servernpx http-server -p 8000
访问 http://localhost:8000 即可看到可视化效果。
完整部署方式（含实时数据流）
如果需要接入实时 GitHub 和 Wikipedia 数据，需要运行后端服务器：
| | |
|---|
| npm install | |
| PORT=8000 node stream-server.js | |
| | |
使用示例： 假设你想在本地运行并接入实时数据
# 1. 安装依赖npm install# 2. 启动服务器（监听 8000 端口）PORT=8000 node stream-server.js# 3. 在浏览器中访问open http://localhost:8000
此时页面会实时显示：
• GitHub 上的代码提交和 PR 活动（地球上显示为发光点）
• Wikipedia 的编辑活动（以不同颜色或样式区分）
• 数据点之间的连线动画（表示数据流向）
自定义配置
如果需要修改数据源或视觉效果，可以编辑配置文件：
数据源配置： 在 stream-server.js 中修改 GitHub API 端点或 Wikipedia IRC 连接参数
视觉效果配置： 在前端 JavaScript 中调整 Three.js 场景参数，如相机位置、粒子大小、颜色方案等
独立使用 Encom Globe 库
项目将地球可视化功能提取为独立库，可以在其他项目中使用：
// 引入 Encom Globeconst globe = new EncomGlobe(container, options);// 添加数据点globe.addMarker({ lat: 37.7749, lon: -122.4194, label: 'San Francisco'});// 添加连线globe.addConnection({ from: { lat: 37.7749, lon: -122.4194 }, to: { lat: 40.7128, lon: -74.0060 }});
这使得开发者可以将类似的地球可视化效果集成到自己的项目中，而无需完整复制整个 Boardroom 系统。
总结
Encom Boardroom 展示了如何将电影级视觉效果转化为可运行的 Web 应用。它的价值不在于提供一个开箱即用的产品，而在于展示一种将艺术创意与工程实现结合的思路。
对于 Three.js 学习者，这是一个值得研究的实践案例，可以了解 3D 可视化项目的完整结构。对于需要构建展示型应用的开发者，Encom Globe 库提供了一个可复用的地球可视化基础。但如果目标是构建生产级的数据平台，则需要在此基础上进行大量工程化改造。
https://github.com/arscan/encom-boardroom
想系统地学习 Three.js 可以了解我的《Three.js 从入门到实战》课程，带你从零基础稳步进阶到项目实战，目前还在优惠期。关注公众号即可获取课程大纲与介绍。
关注公众号，添加好友领1000+Three.js+Cesium项目案例合集
扫码直达 ⤵️ 或加微信 sanmu1598
