用 Three.js 做一个首页 Hero 场景
首页顶部的 Hero 使用了一个轻量的 Three.js 场景,整体思路很直接:
场景组成
- 线框多面体 — 使用
IcosahedronGeometry配合wireframe材质 - 星空粒子 — 随机分布在空间中的
Points - 鼠标视差 — 相机位置跟随指针做平滑插值
性能细节
- 限制
devicePixelRatio最高为 2 - 在组件卸载时释放几何体、材质和渲染器
- 使用
requestAnimationFrame驱动渲染循环
这样既保证了视觉效果,又不会给页面带来太大负担。