一句话提示词：Codex 写出 3D 天气预报页

给 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 实时渲染）全屏打开 ↗

场景里的星空、镜面地面、泛光都是实时渲染的，不是贴图；演示页需要 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 #DeepSeek #Three.js #提示词 #数据可视化

版权说明

本文由 BING 撰写，采用 CC BY-NC-SA 4.0 许可协议。转载请注明作者与原文链接。

https://xbzhang.xyz/dev/posts/2026-09-17-codex-3d-weather/