vantajs

name	vantajs
description	当用 Vanta.js 添加动画 WebGL 背景特效时使用（初始化、参数、resize、性能、在 React/Next.js 中集成）。

Vanta.js —— 动画 WebGL 背景技能

何时使用

• 主视觉区块背后的装饰性动画背景
• 你想快速出“惊艳感”，又不想搭建完整的 three.js 场景
• 轻量集成到静态站点或 React/Vue

工作原理

• Vanta 会往容器元素注入一个 canvas 并渲染一种特效（很多用 three.js）。
• 典型用法：引入 three.min.js（或提供 THREE）+ 一个 Vanta 特效 bundle。

关键 API/模式

• 初始化：
  • const effect = VANTA.WAVES({ el: "#hero", ...options })
• 初始化后更新：
  • effect.setOptions({ color: 0xff88cc })
• Resize：
  • effect.resize()（若容器尺寸变化）
• 清理：
  • effect.destroy()（在 SPA 中很重要）

常见坑

• 容器没有尺寸 → 什么都看不见
  • 确保目标元素有明确的 width/height（或已被布局）。
• 一页多个 WebGL canvas → GPU 负载
  • 每页保持 1–2 个特效。
• 移动端/较旧 GPU 问题
  • 提供降级背景色/图片；考虑在小屏上禁用。
• 框架中的打包
  • 某些构建需要 window.THREE 或在 options 里传入 THREE。

快速食谱

1）最小 waves 背景

<div id="hero" style="height: 70vh;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  const effect = VANTA.WAVES({ el: "#hero", color: 0x0b1220, shininess: 40, waveHeight: 16, zoom: 0.9 });
</script>

2）React 清理模式（概念）

• 在 useEffect 中创建特效，存入 ref，卸载时调用 destroy()。

需要向用户询问的

• 用哪种特效（waves、birds、fog、net 等）以及品牌配色？
• 必须在移动端运行吗？若是，可接受的 FPS/质量是多少？
• 它是否在文本背后（需要对比度/可读性）？