大屏3D地图别手搓！用 Three.js 的开源 Skill 一键可视化

图片解读

事实（直接可读或明显可见）

- 整体视觉

- 深色科技风海报，右侧有一名女性手持平板（无法识别身份）。

- 主要配色为荧光绿/黄色与黑底对比，风格偏“科技/可视化”。

- 大字标题（海报正面明显可读）

- “爆款”（黄色，位于左上近角的爆炸形状内）

- “3D地图”（白色大字）

- “Skill”（英文字，黄色/绿色）

- “开源”（黄色，位于右侧）

- 平板上可见界面（外观类似 GitHub 仓库卡或项目页）

- 左上角有类似 GitHub 猫头（Octocat 风格）图标。

- 仓库路径/作者行可读为："songsummer920-dazzle / three-scope-map-skill"。

- 右侧可见“Starred”标签/按钮（英文单词 "Starred"）。

- 仓库标题可读为："3D地图Skill"。

- 副标题/描述可读为："Three.js 3D地图 - Codex Skill"。

- 平板内的仪表盘画面（深底、荧光绿色地图库）

- 屏幕中央显示一张中国地图轮廓，使用绿色发光线与节点连接效果（呈“3D 地图”视觉）。

- 地图上有多处发光节点与连线（网络/连通性可视化）。

- 屏幕左上有黄色数字 "29"（清晰可见）。

- 屏幕左下有一个圆形统计卡，内显数字“2,348”（可读为2348的样式）。

- 屏幕右侧有若干竖向柱状图/条形图（绿色/黄色），并排排列。

- 屏幕总体为数据大屏/仪表盘布局（地图 + 多个统计卡 + 图表）。

无法辨认 / 不确定（图中小字或细节模糊）

- 平板屏幕顶部或地图上方的一行中文标题/说明文字太小或模糊，无法完整识别具体文字内容。

- 右侧柱状图的具体数值、刻度与标签不可辨认。

- 地图上各节点附近的小标签（如城市名或数值）无法辨认。

- 圆形统计卡“2,348”中千位分隔符与个别字符在放大后仍有不确定性（大致为2348，但无法完全确认每一字符）。

- 平板界面上除主标题外的其他小图标、按钮文本和图例内容均不可读或模糊。

推测（基于可见元素的合理推断，非图中直接文字）

- 该海报可能在推广或展示一个开源的 3D 地图相关项目或 Skill，副标题中的 "Three.js" 指向使用 Three.js 实现。

- 平板界面样式模仿或截图自 GitHub（因有“用户名/仓库名”样式与“Starred”按钮），暗示项目托管于 GitHub。

- 屏幕仪表盘为全国/城市级别的数据可视化大屏（基于中国地图轮廓与统计卡、图表布局推断）。

- 手持设备的演示意在强调“开源 3D 地图 Skill”的可视化效果与交互预览。

（图片中仅整理可见证据，未执行或改变图片内容。）

SkillPI 作品解读

作品用途：

- 用途推断为在大屏或仪表盘中展示三维地图可视化（中国轮廓、发光节点、连线、统计卡与柱状图），用于展示地理分布、节点连通性与关键统计指标。海报宣称该实现为“开源”并标注为“Skill”。

图片证据（关键可读项）：

- 出现仓库路径/作者：songsummer920-dazzle / three-scope-map-skill；副标题含“Three.js 3D地图 - Codex Skill”；界面有 Octocat 风格图标和“Starred”按钮；大屏中可见数字 29 与统计卡 2,348。以上为直接可读证据。

关联 Skill 的使用步骤（基于通常 Three.js 项目流程，作为可供复现的参考步骤，需在仓库中核实具体命令与文件）：

1. 获取代码：克隆或下载仓库（示例：git clone https://github.com/songsummer920-dazzle/three-scope-map-skill）。

2. 安装依赖：在项目根目录运行 npm install / yarn（以仓库 README 指示为准）。

3. 启动开发/构建：运行 npm run dev 或 npm start / npm run build（以仓库脚本为准）。

4. 准备/加载地图数据：确认项目使用的地理数据格式（如 GeoJSON、TopoJSON 或自定义数据），将数据放入指定路径并在代码中引用。

5. 调整可视化参数：在 Three.js 场景中配置发光材质、节点位置、连线（line/mesh）、相机与光源，以及仪表盘的统计卡与柱状图渲染方式。

6. 部署与托管：将构建产物部署到静态站点或托管服务，或在本地通过静态服务器查看。

复现前提（必须核实或准备的条件）：

- 本地需安装 Node.js / npm 或项目要求的运行环境。

- 仓库需包含可运行示例、依赖声明（package.json）、以及启动/构建脚本。

- 需要与项目匹配的地理数据（GeoJSON/TopoJSON）或示例数据文件；若未附带数据，需自备数据并按项目格式适配。

- 若使用 Three.js 的特定插件或第三方库，需在依赖中列出并安装。

待核实项（在实际复现前应检查的仓库细节）：

- 仓库是否公开可克隆，README 是否提供启动与数据准备说明？

- 是否有示例数据或演示页面，项目的运行命令具体为哪些？

- 许可协议（License）、数据来源与使用限制；是否标注“Codex Skill”的具体含义或集成方式？

- 海报中可见的数字（29、2,348）与图表内容是否为示例数据或动态演示数值？如需使用相同效果，应核实数据字段与映射关系。

备注：以上关联步骤为基于图片中可读信息与常见 Three.js 项目实践的推断。在实际操作前应直接查看仓库（songsummer920-dazzle/three-scope-map-skill）与 README，确认具体依赖、脚本与数据格式。未经核实，不应断言某些脚本名或运行命令一定存在。