其实，

🪐 行星科技概念官网！Hero Section 回归！

好久不见 👋

新老观众老爷们。我是鸽子王何贤，又双叒叕回归啦！😆 这段时间我在 Three.js 领域摸爬滚打，终于拿下 LV。🎉 而且累计 1K+ 粉丝，感谢大家一直以来的支持 ❤️。

今年快结束了从周更到月更再到半年更，我终于决定这一次绝不能再鸽了。说起来，🕊️

自我说一下——我是一名在 Three.js 领域里摸爬滚打的初级玩家会分享自己的所见、所闻与所想。

.前置条件 ⚙️

在 Three.js 与 Shader 的进阶内容之前，请先确保你已经具备以下基础知识：

1. Three.js 基础: 熟悉场景、相机、渲染器、几何体（Geometry/IcosphereGeometry/等主要组件。如果还不熟悉，建议先学习 Bruno Simon 的《threejs‑journey》课程。
2. Shader 语法: 对 GLSL 的基本语法有一定了解。包括顶点着色器与片元着色器结构，还有如何在 Three.js 中使用自定义着色器。
3. User Pain Point: 你可能遇到的问题：
   • Lod & MipMap 管理不当导致纹理卡顿。
   • Morph Targets / Displacement Map 使用复杂，容易出现“方块感”。
   • PBR 与自定义光照混用导致性能瓶颈。
   • Anisotropic Filtering 未开启或设置过低，使远处纹理模糊。
   • Particle 程序数量过多导致 GPU 着色器频繁切换。
   这些痛点将在后文给出对应方法。

.Hero Section 概览 🌌

很多人偶尔也会刷到一些以星球为主题的官网，看起来既梦幻又酷炫。它们往往拥有天马行空的布局，美丽的星球在画面中静静流动。营造出未来科技与宇宙幻想交织的氛围。

I 使用 GPT+图生图生成了一张原型设计稿，并尝试复原：

Page 原型图

Page 静态预览

Page 动图 – PC端体验最佳！

*由于网站图片体积限制，动画画质存在抽帧和压缩。还请各位可以在 PC 端自行体验*

转发贴环节 🚀

.场景搭建 🧱 & 使用者痛点定位 🚧

我们聚焦于 Three.js 实现部分，而不是完整页面实现过程。不过，说到当前场景包含，

• 星云图背景 ★ ★ ★ ★ ★ ★ ★ ★ ☆ ☆ ☆ ☆ ☆☆☆☆☆★☆★☆★☆☆★☆☆☆☆☆☆☆☆☆☆★☆★*★★★** ** * ** *
...

...更多... ...

​ ​ ​ ​ ​ ​ js this.scene.background = this.resources.items.spaceTexture this.scene.backgroundIntensity = ... js

---

The above markup was truncated due to formatting issues in original source. In practice you would replace se placeholders with real image tags and correct CSS classes.

---

场景细节拆解

星云图背景 🌌

实现方式比较简单：只需将加载好的星云贴图设置为 `scene.background` 即可。js this.scene.background = this.resources.items.spaceTexture;this.scene.backgroundIntensity = 0.8;// 可根据需要调亮度 *使用者痛点*: 大尺寸贴图可能导致内存使用高、渲染卡顿 → **解决**：使用压缩格式、启用 `generateMipmaps` 并适当降低分辨率。

星星与星环✨

主要是通过 `` 程序创建螺旋形粒子程序，并加入中心圆环效果。1️⃣ **粒子位置生成** – 基于极坐标程序沿多个分支产生螺旋分布。2️⃣ **圆环约束** – 用帽形函数约束粒子位于环形区域内。3️⃣ **随机扰动** – 为每个粒子添加 Y 偏移，以模拟自然星系形态。4️⃣ **顶点着色器动画** – 在 GPU 上完成旋转动画，明显提高性能。js // 示例代码片段 const radius = minRadius + Math.random *;const spinAngle = radius * this.parameters.spin;const branchAngle = / this.parameters.branches) * Math.PI * 2;const x = Math.cos * radius;const z = Math.sin * radius;// 随机 Y 位移 const randomY = effectiveRandomness * radius * <.5 ? 1 : -1) * Math.pow, this.parameters.randomnessPower); *用户痛点*: 粒子数量过多会导致 GPU 性能下降 → **解决**：使用单一 `` 对象并通过 BufferGeometry 控制顶点数； 利用实例化渲染 或 `gpuCompute`。

顶点着色器动画逻辑 🌠

为了让星系呈现“内圈快外圈慢”的涡旋感，我们通过距离衰减旋转速度： glsl float angle = atan;float distanceToCenter = length;float offsetSpeed = mix(maxSpeed。minSpeed,clamp);angle += offsetSpeed * uTime;// 更新位置 modelPosition.x = cos;modelPosition.z = sin;

---

三颗漂浮行星 🌍 & 光照程序

星球主体 🪐

我们采用 `ShaderMaterial` 并在顶点着色器中实现置换贴图，以便后续自定义光照。1️⃣ **足够多顶点** – 使用 `IcosahedronGeometry` 或 `SphereGeometry` 分辨率至少为 `=64`，否则置换会产生方块感。js this.geometry = new THREE.IcosahedronGeometry;2️⃣ **置换贴图实现** – 从红色通道读取高度值并沿法线偏移： glsl float displacement = texture.r * uDisplacementScale;vec3 displacedPosition = position + normal * displacement;*使用者痛点*: 如果顶点数不足，会出现 “方块感” → **解决**：提高细分度或改用 `SphereGeometry` 高分辨率版本。不过，

光照程序 🔦

采用 Blinn‑Phong 模型。自定义环境光 + 点光源，并加入镜面反射。不过，

步骤	GLSL 示例
环境光	vec3 ambient = uAmbientLight * textureColor * uAmbientLightIntensity;
点光源	glsl float attenuation =

pow(1.0/(uPointLightAttenuation.x + uPointLightAttenuation.y*distance + uPointLightAttenuation.z*distance*distance),uPointLightFalloff);| | 镜面反射 | glsl float specular = pow。0.0),uShininess);最终颜色： glsl vec3 finalColor = ambient + diffuse + specularColor * fresnelFactor;

各向异性过滤 ⚡️

当视角倾斜时高分辨率纹理会被拉伸成梯形，从而出现模糊或锯齿拖影问题。开启 AF 可以保持细节清晰。js texture.generateMipmaps = true;// 必须开启 mipmap 才能使用 AF texture.minFilter = THREE.LinearMipMapLinearFilter;// 三线性插值+Mipmap texture.anisotropy = renderer.capabilities.getMaxAnisotropy;// 默认最大值，可根据性能调整至128~512等范围内。

---

最终成果 🎉

后该站已大功告成 🚀！

---

最终的话 🗣️

人们常说 AI 将取代碌碌无为的人，但我更愿意相信 AI 的到来是为了解放富有创造力的人——让他们得以更轻易地将脑海中的灵感化为现实 💫。Web 3D 概念似乎一直徘徊热潮之外却因 AI 降低技术门槛而正迎来属于自己的时刻 🚀。我厌倦了千篇一律的网页，希望未来网络世界能拥有更多彩、更大的想象空间。还有由 AI 点燃的新创作之光 🌈。如果你仍相信创作力，就

---

专栏邀请 👥

本专栏愿景 📚

分享中高级 Three.js 应用与实际方法。让开发者将 Web 3D 技术应用于实际项目并建立令人印象深入的 Hero Section。

加入社区，共同成长 🤝

如果你对 Three.js 感兴趣。并想看到国内更多基于 Web GL 的创新网站，请加入 ice 图形学社区；如果你正在寻找基于 Vue 的 Three.js 框架。也可以尝试 TresJS 或 TvTJS，这些框架提供丰富案例并拥有活跃社区。

---

往期回顾 📅

• 《🎮 前端也能造城市？再看源码公开，那个被外网万人围观的 Three.js 小游戏》
• 《😲 我又写出了被 Three.js 官推转发的项目？，🥳🥳》
• 《😮😮😮 我写出了被 Threejs 官推转发的项目🚀✨？，》

---