最近佛得角这个国家在体育赛事中频频出圈作为一个人口不到 60 万的群岛国家它接连逼平了多个传统强队。看着新闻我突然产生了一个强烈的好奇佛得角到底在哪里它距离中国到底有多远我去翻了翻普通的平面地图但说实话很难在脑海中建立起空间跨度和距离的直观概念。于是我产生了一个想法能不能用 AI 制作一条地理轨迹动画视频直观地展示从中国到佛得角的空间距离我没有打开剪映也没有去套 AE 模板而是尝试用桌面端 Agent 工具 Codex 配合 HyperFrames 视频渲染框架只用自然语言提需求就搞定了一支 3D 地理动画视频。先来看看最终的成片视觉效果在视频中一个 3D 地球缓缓转动镜头从大西洋上的佛得角出发沿着地球表面拉出一条红色的运行轨迹跨越大陆与海洋最终定位到中国北京。画面中实时更新着国家节点和公里数最终测算出两地的直线估算距离大约是 1.26 万公里。最让人兴奋的是整个制作过程不需要我手动去拉时间线、调关键帧我只是扮演了“甲方”的角色通过自然语言指挥 Codex 自动调用 HyperFrames 渲染生成。今天这篇实操教程就为大家拆解这套“用代码写视频”的全新工作流手把手带大家跑通配置与制作流程。一、 核心工具链Codex 与 HyperFrames在正式动手前我们需要先理清这两个工具在工作流中的分工。1. Codex它是一个强大的电脑桌面端 AI Agent。它不仅能聊天还能直接读取本地文件、创建文件夹、编写并运行代码。在这套工作流中Codex 扮演的是“程序员”和“剪辑助理”的角色。2. HyperFrames这是一个视频生产框架和渲染工具。简单来说Codex 负责写出符合规则的代码而 HyperFrames 负责将这些代码编译、渲染最终导出为我们可见的视频文件。你只需要把创意告诉 Codex它就会自动用代码构建出视频工程再交由 HyperFrames 输出成片。二、 演示环境配置如何接入模型服务在实际操作中Codex 需要调用底层大语言模型来理解我们的意图并生成视频代码。Base URLhttps://token.ithinkai.cn/v1 KeyYOUR_KEY Model以服务文档为准最新模型 gpt-5.5、claude-opus-4-8、gpt-image-2 等可按文档查看涉及图片生成时以 0.05¥/图起、2k/4k 支持等服务文档说明为准。三、 3D 地理视频实操五步走准备工作就绪后我们正式进入视频制作环节。1. 创建本地工作区首先在电脑本地新建一个文件夹命名为“佛得角距离中国多远”。打开 Codex 客户端点击“创建项目”选择“本地项目”并将路径指向刚刚新建的文件夹。这一步是为 AI 划分一个独立的专属工作空间后续生成的代码、临时素材和最终视频都会保存在这里。2. 安装并唤起 HyperFrames 插件在 Codex 左侧的插件市场中搜索“HyperFrames”找到由 HeyGen 提供的插件并点击安装。安装完成后在 Codex 的对话框中输入HyperFrames即可成功唤起该插件。3. 撰写结构化提示词AI 生成效果的好坏很大程度上取决于提示词的精细度。避免使用“帮我做一个高大上的地理视频”这种模糊的词汇。我们需要给出具体的画面比例、时长、视觉元素和动态逻辑提示词参考帮我制作一个 9:16 的竖屏视频时长约 30 秒。主题为“佛得角到中国有多远”。画面中需要包含 3D 地球模型、起点与终点的红色连接线、实时变化的公里数以及中文标题。镜头从佛得角出发随着轨迹延伸最终落幅在中国北京。4. 首次渲染与效果评估发送提示词后Codex 会自动查询地理坐标、编写渲染脚本并开始后台运行。这个过程大约需要 15 到 20 分钟期间无需人工干预。渲染完成后我们得到了第一版初始视频第一版虽然完成了路线绘制和数据展示但整体视觉偏向 2D 平面缺乏立体感和视觉冲击力。为了让大家看清底层的逻辑我把 Codex 生成的核心渲染配置代码扒了出来// HyperFrames 核心渲染配置片段 const scene new HF.Scene({ width: 1080, height: 1920, fps: 30 }); const earth new HF.Earth({ radius: 300, texture: satellite_cloud, projection: mercator // 初始为墨卡托平面投影 }); const path new HF.GeodeticPath({ start: [15.1201, -23.6052], // 佛得角坐标 end: [39.9042, 116.4074], // 北京坐标 color: #ff0000, lineWidth: 4 }); scene.add(earth); scene.add(path);5. 迭代优化升级 3D 视觉与代码微调为了提升视觉效果我直接用大白话向 Codex 提出了修改意见“整体框架不错但我希望将背景改为黑色的太空地图呈现为圆形的 3D 地球路线要贴合地球表面延伸并清晰展示沿途经过的国家和城市节点。”Codex 接收反馈后在后台自动重构了底层代码。它把投影模式从平面墨卡托改成了正交投影并加入了星空背景// 优化后的 3D 渲染代码 const earth new HF.Earth({ radius: 300, texture: satellite_cloud, projection: orthographic, // 切换为正交投影呈现球体 atmosphere: true // 开启大气层发光效果 }); const spaceBackground new HF.SpaceBackground({ starsCount: 5000, brightness: 0.8 }); scene.add(spaceBackground);再次导出的版本中平面地图已经成功升级为 3D 地球视觉质感有了明显的提升。经过微调文字密度和镜头速度后最终成片效果非常理想完全达到了科普短视频的发布标准。四、 真实体验与创作边界跑通这套工作流后我发现这种“用代码写视频”的模式确实给内容创作带来了新思路。以前在 AE 里拉几百个关键帧、对齐公里数和经纬度能让人吐血现在用代码写改个数字就能全自动重绘。它特别适合用来做“历史线/地理科普”自媒体或者将枯燥的行业数据转化为动态柱状图。但它的局限性也极其明显它完全不适合真人口播、复杂剧情叙事或高情绪张力的视频。它的核心优势仅仅在于高信息密度、逻辑清晰的结构化视觉呈现。五、 避坑与排错指南在实际操作中我也踩了几个坑这里分享给大家Node.js 版本冲突HyperFrames 插件对本地 Node 环境有要求。如果首次运行报错建议检查本地 Node.js 版本尽量保持在 v18 LTS避免因版本过高导致依赖库无法编译。坐标数据偏差AI 自动查询的地理坐标偶尔会有几公里的偏差。如果发现起点或终点定位不准最稳妥的办法是在提示词中直接指定精确的经纬度数值。中文路径报错新建本地工作区时文件夹名称尽量使用英文或拼音。部分渲染插件在读取中文路径时会直接罢工报错。目前这套工作流还不算完全傻瓜化写代码的门槛依然存在但它确实给不擅长动效的程序员、或者不想套模板的剪辑师提供了一条新路子。感兴趣的朋友可以去跑个简单的 Demo 试试看。