Agent Skills
返回列表
🤖

AI三维交互融合

AI Agent 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_eb746c21/ai-3d-fusion 技能到 AI 助手中。

技能介绍

解决什么问题

三维地理可视化项目里有个常见痛点：Cesium 的 Entity API 和 Three.js 的场景切换都要写大量样板代码，交互方式也固化在按钮和下拉菜单上。一旦想让『飞到上海并标记』这类自然语言驱动场景，就得自己搭 LLM 适配、指令解析、指令分发三层逻辑，重复造轮子。

核心能力与关键步骤

技能把四个层级的协作封装成一个开箱即用的单页应用：

  • 渲染层 A（CesiumJS）：负责全球地理可视化——影像底图、地形、Entity、飞行、流动连线、区域高亮
  • 渲染层 B（Three.js）：负责局部精细 3D 场景——科技城市、太空球体、3D 数据可视化三种场景可切换
  • 智能层（LLM 适配器）：把自然语言转成结构化指令，支持 OpenAI 兼容格式，也提供内置模拟模式
  • 执行层（Command Bus）：通过可扩展的指令注册表统一分发和执行指令

使用时只需复制 assets/templates/index.html，启动本地 HTTP 服务器，在页面输入框里用自然语言操控——比如『飞到上海并标记』『切换数据可视化』。内置 10 条指令覆盖 flyTo、addMarker、addFlowLine、setThreeScene 等常见操作，并内置 32 个城市坐标库，支持中英双语指令匹配。

适用边界

  • CesiumJS 依赖 CDN 加载，必须通过 HTTP 服务器访问，file:// 协议下无法正常工作
  • 浏览器需支持 ES Module 和 WebGL2（Chrome 90+ / Firefox 88+ / Safari 14+）
  • 内置模拟模式的指令解析能力有限，真实场景建议配置 LLM_API_CONFIG 接入真实 LLM
  • 城市库目前覆盖 32 个城市，可通过 CITY_DB 对象自行扩展

使用场景

  • 用一句话『飞到上海并标记』驱动 Cesium 地球飞行定位，同时在目标坐标添加标注点，省去手写 flyTo 和 addMarker 的样板代码。
  • 在地图上为两个城市添加流动连线展示航线，并通过自然语言触发区域高亮，适合路线规划或覆盖范围的可视化汇报。
  • 通过输入框切换 Three.js 面板的科技城市、太空球体、数据可视化三种场景，验证多渲染层在同一页面的协同效果。
  • 配置 LLM_API_CONFIG 接入真实大模型，把用户提问解析为结构化指令经 Command Bus 执行，搭建语音驱动的 3D 可视化原型。

适合人员

  • 前端工程师：想快速搭建 Cesium 与 Three.js 双渲染层的交互 demo，不愿从零编写飞行、标注、连线的 Entity 样板代码。
  • GIS 开发者：正在做一个地理可视化展示项目，希望让终端用户用自然语言操控地图视角和场景切换。
  • AI Agent 开发者：研究 LLM 适配器把自然语言映射为结构化指令的架构，想参考 Command Bus 的注册表分发实现。
  • 技术讲师：准备三维地理可视化的教学演示，需要一套开箱即用、可直接在浏览器里操作的交互示例。