Awwwards 获奖网站都在用的 5 种 3D 效果，其实都有免费模板

Awwwards 的获奖网站看起来各不相同，但把 3D 效果拆开看，来来回回就 5 种。下面按出现频率排序，每种都标注了免费模板在哪。

效果一：粒子聚散（出现率最高）

上万个粒子组成文字或形状，鼠标划过散开、离开聚拢。获奖站几乎人手一个。技术要点是 GPU 粒子 + 目标位置贴图。粒子类模板在画廊里搜“粒子”就能找到 20 多套。

效果二：流体扭曲图片

鼠标移动时图片像水面一样晃动，滚动切换时图片融化过渡。这是 WebGL 位移贴图的经典用法，看着复杂，核心就是一张噪声图。流体类模板里有现成的。

效果三：滚动穿越场景

滚动页面就像在 3D 空间里往前飞，物体从身边掠过。相机路径 + 滚动进度映射，虫洞穿越就是完整实现。

效果四：3D 字体排版

大标题做成 3D 立体字，随鼠标倾斜。近两年特别流行，因为它把“排版”和“3D”结合了，品牌感强。实现成本中等，Three.js TextGeometry 或 CSS 3D 都能做。

效果五：鼠标跟随光影

一个光点跟着鼠标走，照亮周围的元素。成本最低、效果最稳妥，适合不想太花哨但想有点高级感的站。

最后提醒：获奖站为了效果牺牲性能是常态（人家是展示作品），你的站要是卖货的，首屏加载别超过 3 秒，效果再炫也没人等。