AI技术

当前端工程师开始"造星"：Dilum Sanjaya的Three.js行星探索器技术解析

, , , , ,

摘要：斯里兰卡开发者Dilum Sanjaya用Three.js打造了一个令人惊叹的3D行星探索界面"AERIS"，实现了电影级的行星渲染、流畅的场景切换和精致的数据可视化。本文深度拆解其技术路线。

AERIS行星探索器界面

项目概览

斯里兰卡前端工程师 Dilum Sanjaya 最近在 Twitter 上展示了一个名为 AERIS 的3D行星探索界面原型。42秒的演示视频中，多颗风格迥异的虚构行星在浏览器中实时渲染，配合精致的UI面板和丝滑的过渡动画，呈现出接近科幻电影级别的视觉效果。

视频来源：Twitter @DilumSanjaya

界面设计分析

AERIS 的界面采用了明亮的"Solarpunk"风格，与大多数太空主题项目的深色调形成鲜明对比：

左侧导航栏：垂直排列的行星缩略图列表，当前选中项以青色边框高亮并标注"SELECTED"标签。每颗行星都有独立的3D缩略图预览。

中央3D视口：主角区域，展示当前选中行星的高精度3D模型。行星置于一个全息投影风格的圆形底座上，卫星沿轨道线运行。

顶部信息区：行星名称（大号无衬线字体）、描述性副标题、环境标签（大气成分、温度、卫星数量）。

右侧数据面板：物理参数（重力、磁场强度等）和任务列表，提供游戏化的探索目标。

底部操作栏：浮动按钮——“COMPARE”、“EXPLORE”（绿色强调）、“ROUTE”。

技术路线深度拆解

1. 3D渲染引擎：Three.js + React Three Fiber

Dilum Sanjaya 是 Three.js 和 React Three Fiber 的资深使用者（他在 Medium 上发表过系列教程，GitHub 上有 aisdk-threejs-starter 等项目）。AERIS 的3D部分大概率基于以下技术栈：

  • React Three Fiber (R3F)：React 的 Three.js 渲染器，将3D场景声明式地嵌入 React 组件树
  • @react-three/drei：提供常用的3D辅助组件（轨道控制、环境光、后处理等）
  • @react-three/postprocessing：后处理效果管线

2. 行星渲染技术

视频中每颗行星的纹理风格各异（气态巨行星的漩涡带、冰冻星球的裂纹、酸性海洋的深蓝绿），实现方式可能包括：

程序化纹理生成（Procedural Texturing）：

  • 使用 GLSL Shader 中的噪声函数（Perlin Noise、Simplex Noise、Worley Noise）实时生成行星表面纹理
  • 多层噪声叠加模拟大气环流、地形起伏
  • 通过 uniform 变量控制颜色映射，实现不同行星的视觉差异

大气散射效果（Atmospheric Scattering）：

  • 行星边缘的辉光效果，通过自定义 Shader 实现菲涅尔（Fresnel）边缘光
  • 可能使用 ShaderMaterial 的双面渲染：内层是行星表面，外层是半透明大气壳

卫星与轨道：

  • 卫星沿椭圆轨道运动，使用参数方程驱动位置更新
  • 轨道线用 Line 或 TubeGeometry 绘制，带有微弱的发光效果

3. 场景切换动画

视频中最令人印象深刻的是行星切换时的过渡效果——旧行星向右滑出，新行星从左侧滑入，同时所有文字面板同步淡入淡出。

技术实现推测：

  • Framer Motion / React Spring：驱动3D对象的位置插值动画
  • 状态管理：选中行星变化时，触发3D场景和UI面板的同步状态更新
  • 文字交叉淡入淡出：旧标题淡出的同时新标题淡入，产生字母重叠的电影感过渡
  • 相机保持不动：动画只移动行星模型本身，相机固定，保证UI布局稳定

4. 全息底座效果

行星下方的圆形底座带有发光点阵图案，营造"全息投影"的科幻感：

  • 可能使用 CircleGeometry + 自定义 Shader，通过极坐标计算点阵分布
  • 点的亮度随时间和距离变化，产生"呼吸"效果
  • 底座边缘的辉光通过后处理 Bloom 效果实现

5. UI与3D的融合

AERIS 最大的技术亮点是 2D UI 和 3D 场景的无缝融合：

  • 3D行星渲染在 <Canvas> 中，UI面板用标准 React/CSS 覆盖在 Canvas 之上
  • 通过 pointer-events: none 让3D区域不阻挡UI交互
  • UI动画与3D动画通过共享状态（如 Zustand store）保持同步
  • 响应式布局确保不同屏幕尺寸下3D视口和UI面板的比例协调

6. AI工具链：一人团队的秘密武器

Dilum 在推文中明确说明了 AERIS 的 AI 工具分工：

  • UI设计 + 行星纹理：GPT Images 2（OpenAI 图像生成）— 用于生成行星表面纹理贴图和UI视觉设计稿
  • 代码实现：Gemini 3.1 Pro（Google）— 负责将设计转化为可运行的 Three.js/React 代码

这是一个非常典型的现代 AI 辅助开发工作流：用图像AI做视觉设计，用代码AI做工程实现。开发者本人的角色变成了"创意导演"——定义产品愿景、选择技术方案、把控质量，而具体的像素级设计和代码编写交给AI完成。

他在推文中写道：“Been thinking about sharing some fun, interactive science app ideas. Made this one today.” — 一天之内从想法到成品，这就是AI工具链带来的效率革命

性能优化推测

在浏览器中以 60fps 渲染如此精细的3D场景，需要注意：

  • LOD（Level of Detail）：侧边栏缩略图使用低面数模型，主视口使用高精度模型
  • 纹理压缩：使用 KTX2/Basis 格式压缩纹理，减少 GPU 显存占用
  • 实例化渲染：如果有大量卫星或粒子，使用 InstancedMesh 减少 draw call
  • 按需渲染：静止时不重绘（invalidateFrameloop），只在动画进行时渲染

开发者背景

Dilum Sanjaya 是一位来自斯里兰卡的全栈工程师，专注于前端开发和创意编程：

  • 技术栈：React、Three.js、React Three Fiber、Next.js、TypeScript
  • 特长：将数学和代码结合创造生成艺术和交互式3D体验
  • 平台：CodePen、GitHub、YouTube、个人网站
  • 代表作：Global Anomaly Detection System（科幻风3D地球监控界面）、AI SDK + Three.js Starter、React 太阳系动画教程

启示

AERIS 展示了现代 Web 3D 技术的成熟度——仅凭浏览器和 JavaScript，一个人就能打造出接近 AAA 游戏 UI 品质的交互体验。Three.js 生态（React Three Fiber + drei + postprocessing）已经将 WebGL 的门槛降到了前端工程师可以轻松上手的程度。

更值得注意的是 AI 工具在工作流中的角色。Dilum 明确展示了一条极简但高效的路径：GPT Images 2 做视觉设计，Gemini 3.1 Pro 写代码，一天出成品。这不是所谓的AI辅助开发，而是AI为主力、人类做导演的新范式。一个有审美和架构能力的开发者，配合正确的AI工具链，产出效率可以抵得上一个小型设计+开发团队。

📎 相关链接：

分享到