作为一名前端开发者，你是否曾在某个深夜刷应用商店时被一款精美的3D动态壁纸深深吸引？那颗在指尖缓缓旋转的蓝色星球，光影随着时间流转，从阳光普照的蔚蓝海洋过渡到灯火通明的城市夜景，那种将浩瀚宇宙微缩于屏幕之上的震撼感，简直让人挪不开眼。那一刻，我脑海中不仅只有“哇塞”的感叹，geng多的是一种技术本Neng的躁动——这效果，我Neng不Neng用代码复现出来？

带着这份冲动，我们今天就来一场硬核的WebGL探险。我们要Zuo的，不仅仅是放一个球体在网页上，而是要用Three.js构建一个拥有灵魂的数字地球：它要有昼夜交替的温柔晨昏线，要有呼吸般闪烁的星空背景，还要有一颗忠诚绕行的月球。这听起来像是一个庞大的工程，但别担心，只要我们拆解得当，你会发现这背后的数学逻辑竟然如此优雅迷人。

一、 准备工作：搜集宇宙的碎片

在开始敲代码之前，我们得先准备好“颜料”。要画出一个逼真的地球，光靠几何体是不够的，我们需要高质量的纹理贴图。这就好比画油画需要调色板，我们的调色板就是一系列高分辨率的图片。

在这个项目中，我们需要准备以下几类核心素材：

地球贴图：包括白天的卫星影像和夜晚的城市灯光图。

法线贴图：这是表现地球表面凹凸质感的关键。

云层贴图：独立的云层图片，用来制作漂浮在地球表面的动态云气。

天体贴图：太阳、月球的表面纹理，以及一张高精度的星空背景图。

有了这些素材，我们就Ke以在代码中初始化我们的资源加载器了。这里我习惯使用一个简单的资源管理类，把所有图片路径配置好，等待它们全部加载完毕再启动场景。毕竟谁愿意kan到一个只有一半脸的地球在太空中尴尬地旋转呢？

二、 搭建舞台：从虚无到星系

一切始于虚无。在Three.js的世界里我们 需要创建Scene、Camera和Renderer。这是所有3D内容的基石。但今天我们的主角是那颗蓝色的星球，所以让我们直接跳过枯燥的配置，直奔主题——创造地球。

我们创建一个球体几何体，将其放置在世界的原点。为了让它kan起来不像个廉价的塑料球，我们需要给它赋予材质。这里不Neng使用普通的MeshBasicMaterial，因为它对光照无动于衷。我们需要的是Neng够感知光线的材质，或者geng进一步，使用自定义的着色器来实现geng高级的昼夜混合效果。

当然地球不Neng孤独地悬浮在真空中。我们需要给它找个“光源”。在真实宇宙中，地球绕着太阳转；但在WebGL的虚拟场景里为了保持地球始终处于画面中心方便观察，我们通常采用“地心说”的视角——让太阳绕着地球转。这虽然违背了天文学常识，但对于视觉展示来说却是极其聪明的Zuo法。

我们创建一个代表太阳的球体，把它放在右侧偏上的位置。注意，这个太阳球体其实只是个“演员”，它真正的物理作用是提供一个位置向量。我们的地球材质会根据这个位置来计算哪里是白天哪里是黑夜。

忠实的伴侣：月球与轨道

地球怎么Neng少得了月球呢？为了让画面geng有层次感，我们不仅要加一个月球，还要画出它的运行轨道。这Ke以通过创建一个圆环几何体来实现，给它设置一个半透明的材质，这样用户就Neng直观地kan到月球运动的轨迹。

月球本身也是一个球体，贴上月球纹理。为了让它动起来我们需要在每一帧的渲染循环中geng新它的位置。利用三角函数根据时间计算坐标，就Neng轻松模拟出公转效果。kan着月球带着它的光环缓缓划过屏幕，那种精密的机械美感，就像完成了一个宇宙钟表的组装。

三、 灵魂注入：着色器与昼夜交替的魔法

前面的步骤只是搭建了骨架，现在我们要注入灵魂——昼夜交替。这是整个项目Zui核心、也Zui迷人的技术难点。

Ru果只是简单地给地球打光，我们只Neng得到明暗变化，却无法得到“白天是卫星图，晚上是城市灯光图”这种酷炫的效果。要实现这一点，必须深入到片元着色器中去。

1. 顶点着色器的准备工作

顶点着色器是GPU流水线的第一个环节。在这里我们需要把每个顶点的关键信息传递给片元着色器。Zui关键的两个数据是：UV坐标和法线向量。

代码逻辑hen简单，但意义重大。我们将法线向量进行归一化处理，确保它的长度为1。这就像给地球表面的每个点dou插了一根垂直于地面的指针，这些指针将告诉光线：“嘿，我是朝向太阳的，还是背对太阳的？”

2. 片元着色器的光影计算

真正的魔法发生在片元着色器里。在这里我们要解决一个数学问题：如何判断一个像素点是在白天还是黑夜？

这就用到了点积运算。在三维空间中，Ru果我们把顶点的法线向量和太阳光的方向向量dou归一化，那么它们的点积结果就等于它们夹角的余弦值。

当点积接近1时说明夹角为0度，表面正对太阳，是正午。

当点积接近-1时说明夹角为180度，表面背对太阳，是午夜。

当点积为0时说明夹角为90度，这是晨昏线。

基于这个原理，我们Ke以写出一个初步的逻辑：Ru果点积大于0，采样白天纹理；否则，采样夜晚纹理。这Neng实现昼夜分割，但效果会hen生硬——白天和黑夜之间有一条明显的黑线，完全破坏了美感。

3. 晨昏线的平滑过渡

现实世界不是非黑即白的，日出日落有着迷人的渐变。为了模拟这种效果，我们不Neng只用简单的if-else，而要引入混合的概念。

我们Ke以使用GLSL内置的mix函数。这个函数接受三个参数：值A、值B和一个混合系数。当混合系数为0时显示黑夜，为1时显示白天中间值则显示两者的混合。

那么混合系数从哪来？这就轮到smoothstep函数登场了。它Ke以将点积的值平滑地映射到区间。我们Ke以设定一个过渡宽度，比如0.2。在这个范围内，颜色会从黑夜丝滑地过渡到白天从而创造出那条著名的、充满诗意的晨昏线。

“给岁月以文明，而不是给文明以岁月”。这句《三体》的名言用在这里似乎也恰如其分——我们不是在简单地渲染像素，而是在用代码赋予数字星球以时间的质感。

四、 营造氛围：会呼吸的星空

有了地球和太阳，背景还是一片漆黑可不行。虽然我们Ke以直接贴一张巨大的星空全景图作为背景，但那样未免太静态、太死板了。高端的3D页面星空必须是活的。

我们要创建一个粒子系统来模拟星星。这需要用到BufferGeometry，它Neng让我们高效地管理成千上万个点的数据。

我们需要为每一颗星星定义以下属性：

位置：在球体空间内随机分布。

颜色：不仅仅是白色，Ke以随机混入一些淡蓝、淡黄甚至微红的色调，模拟真实的恒星光谱。

大小：随机的大小差异。

闪烁参数：包括相位和频率，让星星们不要同步闪烁，而是像呼吸一样此起彼伏。

在生成位置时我们Ke以使用球坐标系转直角坐标系的算法，确保星星均匀地分布在背景球壳上。然后通过setAttribute把这些数据一股脑儿塞进几何体里。

接下来还是得靠自定义着色器。在顶点着色器中，我们利用sin这个公式来动态计算星星的大小。随着时间推移，正弦波的起伏会让星星忽大忽小，产生闪烁效果。为了geng自然我们还Ke以加入一点点随机噪声，避免闪烁过于规律。

Zui后别忘了在渲染循环里geng新着色器中的time变量，并同步geng新地球材质中太阳的位置向量。这样，当太阳移动时地球上的晨昏线也会实时跟随移动，整个场景就像一个精密咬合的齿轮系统，充满了动态的平衡感。

五、 ：数字宇宙的造物主

当我们kan着这个由自己亲手绘制的“微缩版太阳系”在浏览器中静静旋转时一种奇特的感受油然而生。在这个微观的数字宇宙里我们既是造物主，也是Zui渺小的观察者。

我们用了不到一千行的代码，就模拟了一个直径12742公里的星球上每时每刻的光影变迁。真实的地球需要24小时完成一次昼夜交替，我们的数字地球只需几分钟。这种尺度上的巨大反差让我突然明白：人类的所有创造，本质上dou是对无限宇宙的有限翻译。

我们不是在追求让这个数字地球永恒运行，那颗正在你屏幕上旋转的蓝色星球，可Neng在下一秒就会因为浏览器刷新而重置；那些闪烁的星星，可Neng随着标签页关闭而永远熄灭。但就在它运行的每一帧里它足够美好，它传递了我们对真实世界的观察与敬意。

毕竟在浩瀚的宇宙面前，所有文明dou只是瞬间的火花。而Zui美的火花，不是燃烧得Zui久的那个，而是燃烧时Zui亮、Zui温暖的那个。希望这篇教程Neng帮你点燃属于自己的那颗数字星球。

---