That Earth · 那个地球
That Earth：同一颗行星，三种观看它的时间。That Earth 是一个以 Three.js 构建的视差滚动落地页。它用一颗可以被旋转、放大、逐层剥离的三维地球，串起 That Earth 项目的三个阶段：
- 现实地球 — 公开数据源构成的此刻（正文重点展开）
- 预测地球 — AI 气象 / 海洋模型驱动的未来
- 智能地球 — 拥有记忆、推理与情景预演的数字孪生
它不负责计算，也不负责预测，它要解决的是另一个问题：怎么让一个庞大的地球项目，在打开网页的十秒内被理解。
线上域名：https://that.earth/
三个阶段，一个滚动手势
落地页把项目的三个版本压进了一条滚动时间线里。读者不需要点开任何一个子页面，只要往下滚：
- 现实地球——由公开数据源构成的此刻，是全站正文的重点；
- 预测地球——AI 气象与海洋模型驱动的未来；
- 智能地球——拥有记忆、推理与情景预演的数字孪生体。
同一颗球，在不同的滚动位置呈现不同的状态。这是我认为这类项目最合适的首页叙事：不去罗列功能清单，而是让读者先意识到“这是同一个地球的三个时间切片”，功能清单随后才有意义。
页面结构与代码分工
整个站点没有框架包装，就是原生 HTML + CSS + Three.js，按职责切开：
| 文件 | 职责 |
|---|---|
index.html | 全部语义化页面结构、三阶段文案、数据变量与数据源 |
src/style.css | 视觉系统、HUD、响应式布局与逐段显影 |
src/scene/World.js | Three.js 世界：地球、太阳系、数据壳层、轨道、粒子与相机编排 |
src/scene/shaders.js | 地表、云层、大气、数据层、等值面与星空的 GLSL |
src/scene/Flow.js | 风场 / 洋流粒子尾迹与闪电 |
src/ui.js | 滚动状态、固定侧栏、HUD、数据卡片与分段文案切换 |
src/main.js | 加载、启动与渲染循环 |
把 World.js（场景）、shaders.js（材质）、Flow.js（粒子特效）、ui.js（滚动与文案状态）拆开，好处是每一层都能单独调：改文案不用碰 shader，调粒子不用碰相机，换视觉不用重排 DOM。
场景逻辑
相机由滚动进度驱动。 地球在章节之间左右平移，并在首屏完成“远景太阳系 → 近景地球”的推进：一开始是极简的太阳与轨道，随着滚动，地球从远处被拉到画面中央。
第一阶段的数据章节使用 sticky 布局。 滚动时依次激活四层数据壳——大气 / 海洋 / 地质 / 生物地球化学——上一层的壳体会从地球表面剥离、漂浮并消散。这是整个页面里最“脏”也最好看的部分：剥离动作把“很多层数据叠在同一颗球上”这件事变成了可见的物理过程。
后续阶段逐步加码。 效果章节启用风场流线、洋流粒子尾迹与闪电；第二阶段启用等值面与线框；第三阶段出现轨道环与智能体节点。每一阶段的视觉密度都比上一阶段高一级，配合滚动节奏，正好对应“看见 → 预测 → 推演”的推进。
合成稳定性是个真问题。 这类深色、透明、多层叠加的页面，最容易在滚动时出现黑色方块或空帧。为此做了几件事：
- 界面不使用
backdrop-filter/mix-blend-mode等高风险合成层； - WebGL 渲染器启用
preserveDrawingBuffer； - 以
translateZ(0)固定画布图层； - 渲染管线改为直接输出：移除离屏
EffectComposer/UnrealBloomPass，改用renderer.render()直出，并在自定义 shader 中内联 tone mapping 与颜色空间转换。
最后一条是关键取舍：放弃 Bloom 之后，视觉并没有明显变差，但 Bloom 渲染目标在部分 GPU / 浏览器组合上产生的黑块彻底消失了。在“多一层后处理”和“所有人都不出 bug”之间，我选后者。
先行复刻：底部的四张卡片
落地页底部的四张卡片，是对以下项目的学习、复刻与再搭建，均已部署在 That Earth 子域名：
这四个子项目分别验证了实时风场、海洋流体、地球光照与天气场等不同方向，也是 That Earth 第一阶段的重要技术积累。把它们做成卡片放在首页底部，既是致敬，也是给自己留下一条“技术来源”的索引。
本地运行
pnpm install
pnpm dev
默认开发地址为 http://127.0.0.1:5173/，若端口被占用，Vite 会自动切换到下一个端口。
生产构建：
pnpm build
pnpm preview
构建产物位于 dist/，可直接部署到 Vercel、Netlify、Cloudflare Pages 或任意静态服务器。整个站点没有后端依赖，这也是它敢于做成“一句话域名”的原因。
素材与致谢
- 地表影像：NASA Blue Marble（Visible Earth，公有领域）
- 云层影像：NASA Earth Observations (NEO)（公有领域）
- 3D 引擎：Three.js
- 字体：Space Grotesk（SIL Open Font License）
上线前还可以继续收尾的地方
- 联系邮箱目前为占位地址
hello@that.earth（index.html中mailto:链接）。 - 底部四张参考项目卡片与源码链接集中在
index.html的.subdomains/.case-repos中；若子域名或仓库地址调整，在这里同步替换。 og.jpg为社交分享预览图，可按最终视觉替换。- 域名 DNS / 托管配置不在代码仓库内；将
dist/部署后，把that.earth的 A/CNAME 记录指向托管服务即可。
本文内容整理自项目 README，截图摄于 2026 年 10 月。
