目录

1. 地形材质
2. 飞线材质
3. 侧边渐变材质
4. 追光效果
5. 飞线特效
6. 旋转环装饰
7. 高亮交互效果
8. 呼吸浮动效果

一、地形材质

使用者痛点

很多开发者在实现 3D 地形时只会使用单一的颜色贴图，导致地形缺乏真实感；位移和法线纹理的配合常常出现错位或渲染卡顿。

实现原理

使用 Three.js 的 PBR材质，结合多张纹理实现真实感地形效果：

• 漫反射纹理控制表面颜色。
• 位移纹理控制地形起伏。
• 法线纹理细化表面细节和光照响应。
• 粗糙度纹理控制表面光滑程度。

完整 HTML 实现

二、飞线材质

传统的 LineBasicMaterial 无法实现流动的发光效果。使用 Canvas 绘制又会导致性能下降，尤其在大量线路时更是卡顿。话说回来，

使用自定义 ShaderMaterial。实现数据流向的动态飞线：

• 顶点着色器：把每段线的进度属性传递给片元着色器。
• 片元着色器：基于时间计算发光头位置，用 smoothstep 创建渐变发光。
• uniforms：uTime、uSpeed、uDelay 控制动画速度与延迟。

三、侧边渐变材质

在展示城市立体墙时单一颜色显得呆板；想要根据高度产生自然过渡却找不到简单可控的方法。其实，

深度。并在片元着色器中使用 three‑step 的 smoothstep 混合底部、过渡和顶部三种颜色，同时在顶部加入微弱发光提高层次感。