核心主旨：给 Codex 一句「用 three.js 做个炫酷预报」，20 分钟产出单文件 3D 天气页；顺带验证博客正文内嵌 HTML / iframe 的效果
- 本篇深度梳理了在 Agent 场景下的实战踩坑与加固细节。
- 提炼自生产环境部署经验：兼顾轻量低耗与高安全性，避免冗余依赖。
- 涵盖关键配置代码片段、数据链路排障要点与系统级自愈方案。
给 Codex 发一句提示词，模型走服务器上的 CPA 网关（别名 deepseek-flash，推理强度 high），19 分 59 秒后拿到一个能直接双击打开的单文件 3D 天气页。本文放上在线演示、实现要点，以及顺手做的「正文内嵌 HTML」验证。
一、提示词与产出
提示词只有一句，没有补充任何设计稿或数据：
| 项 | 值 |
|---|---|
| 模型 | deepseek-flash（CPA 网关别名，codex --profile deepseek，reasoning high） |
| 耗时 | 19 分 59 秒 |
| 产出 | 单个 index.html，52 KB |
| 运行方式 | three.js r160（jsdelivr CDN），无构建、无本地服务器，file:// 直接打开 |
| 数据 | 武汉（30.59°N / 114.31°E）未来 7 天，Open-Meteo 抓取后写死在文件里 |
二、在线演示
场景里的星空、镜面地面、泛光都是实时渲染的，不是贴图；演示页需要 WebGL，并从 CDN 拉 three.js。加载不出来时看下面的截图：
三、数据怎么变成画面
| 视觉元素 | 编码的数据 |
|---|---|
| 柱体高度 | 当日气温（18–32℃ 映射到世界坐标） |
| 柱体颜色 | 温度色带：蓝 → 青 → 绿 → 黄 → 橙 → 红 |
| 柱顶亮点 / 底座光环 | 当日最高温 / 最低温 |
| 云团体积 | 云量（由 WMO 天气代码推出） |
| 雨丝密度 | 降水量 |
| 水平流线速度 | 风速 |
| 跨日发光带 | 每日温差区间：上沿最高温曲线，下沿最低温 |
| 底部日期卡 | 日期、天气、最高/最低温、温度条 |
这层映射是模型自己定的，提示词里只给了「炫酷」两个字。
四、实现要点
- 单文件结构：
<style>+<script type="importmap">+<script type="module">，没有任何构建步骤 - 后处理：
EffectComposer+UnrealBloomPass泛光，ACES Filmic 色调映射 - 地面是
Reflector实时镜面反射，叠一层自定义着色器网格 - 云、雨、风、光柱都用自定义
ShaderMaterial/ Points，几何体经mergeGeometries合并 - HUD 是普通 DOM：底部 7 张日期卡、右侧单日明细（含逐小时气温 canvas）、左上信息牌、右上图例
- 数据写死在文件顶部
DAYS/HOURLY常量，换城市只改CITY与这两个数组 - 交互：
OrbitControls轨道相机，点柱子或日期卡选中单日，←/→切换，空格视角漂移
五、正文内嵌 HTML 的验证
结论：可以。本站的 goldmark 渲染器开着 unsafe = true（config/_default/markup.toml），Markdown 里的原始 HTML 原样输出，上面的演示就是直接嵌进正文的 <iframe>。
| 能力 | 结果 |
|---|---|
行内标签（<kbd>、<mark>、<figure>） | 生效 |
<style> 内联样式 | 生效 |
<iframe> 嵌同站静态页 | 生效 |
<details> 折叠块 | 生效 |
| 嵌别的站点 | 被 X-Frame-Options: SAMEORIGIN 挡掉，只影响别人嵌我们 |
| 样式作用域 | 必须套自己的容器 class，否则会污染整站 |
演示页放在 static/demos/wuhan-weather-3d/index.html，Hugo 原样复制到站点根目录，nginx 当普通静态页返回。
展开看这段演示的原始 HTML 写法
<figure class="demo-embed">
<iframe src="/demos/wuhan-weather-3d/index.html"
title="武汉未来 7 天 3D 天气可视化（可交互）"
loading="lazy" allowfullscreen></iframe>
<figcaption class="demo-bar">
<span>真实可交互页面（WebGL 实时渲染）</span>
<a href="/demos/wuhan-weather-3d/index.html" target="_blank" rel="noopener">全屏打开 ↗</a>
</figcaption>
</figure>
样式写在 assets/scss/custom.scss 的 .demo-embed 里，iframe 用 aspect-ratio 控制高度。注意主题给 figure 加了铺满卡片的负外边距：自定义样式只改上下间距、别用 margin 简写覆盖，否则外边距被重置、加宽的 width 还在，块就会向右溢出被裁切。
小结
- 一句提示词 + 推理强度 high 的模型，20 分钟拿到能用的单文件可视化页面
- 效果取决于数据映射想没想清楚：柱高对气温、云量对云团体积、降水对雨丝密度
- 产物零依赖、零构建，
file://双击即开，部署时当一个静态文件丢出去即可 - 博客正文支持原始 HTML：本站 goldmark 已开
unsafe，iframe/style/details都能用 X-Frame-Options: SAMEORIGIN只允许嵌本站资源，需要嵌外站就得改响应头
文章标题：一句话提示词：Codex 写出 3D 天气预报页
文章链接：https://20.48.50.55.sslip.io/dev/posts/2026-09-17-codex-3d-weather/
许可协议：本站原创内容采用 CC BY-NC-SA 4.0 国际许可协议，转载请注明作者出处与原文链接。
长按或连续点击「注入能量」，为当前节点充入赛博算力！