That Earth · 那个地球

Thu, 22 Oct 2026 00:00:00 +0000

That Earth 是一个以 Three.js 构建的视差滚动落地页。它用一颗可以被旋转、放大、逐层剥离的三维地球，串起 That Earth 项目的三个阶段：

它不负责计算，也不负责预测，它要解决的是另一个问题：怎么让一个庞大的地球项目，在打开网页的十秒内被理解。

线上域名：https://that.earth/

三个阶段，一个滚动手势

落地页把项目的三个版本压进了一条滚动时间线里。读者不需要点开任何一个子页面，只要往下滚：

同一颗球，在不同的滚动位置呈现不同的状态。这是我认为这类项目最合适的首页叙事：不去罗列功能清单，而是让读者先意识到“这是同一个地球的三个时间切片”，功能清单随后才有意义。

整个站点没有框架包装，就是原生 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 或任意静态服务器。整个站点没有后端依赖，这也是它敢于做成“一句话域名”的原因。

联系邮箱目前为占位地址 hello@that.earth（index.html 中 mailto: 链接）。
底部四张参考项目卡片与源码链接集中在 index.html 的 .subdomains / .case-repos 中；若子域名或仓库地址调整，在这里同步替换。
og.jpg 为社交分享预览图，可按最终视觉替换。
域名 DNS / 托管配置不在代码仓库内；将 dist/ 部署后，把 that.earth 的 A/CNAME 记录指向托管服务即可。

本文内容整理自项目 README，截图摄于 2026 年 10 月。