需要轻量级 3D 装饰效果与微交互时，用…

在不引入重型 3D 框架的前提下，为落地页、Hero 区、卡片等添加伪 3D 插画、动画背景和鼠标/陀螺仪视差倾斜效果。

适用场景

解决思路

1. Zdog 基础搭建：引入 https://unpkg.com/zdog@1/dist/zdog.dist.min.js，创建 canvas 并设置 class、width、height，用 new Zdog.Illustration({ element, zoom, dragRotate: true, onDragStart }) 初始化，在 onDragStart 中把 isSpinning 设为 false 以停止自动旋转。
2. Zdog 形状绘制：用 Zdog.Ellipse（diameter、stroke、color）画圆，Zdog.Rect（width、height、stroke、fill）画矩形，Zdog.RoundedRect（cornerRadius）画圆角矩形，Zdog.Polygon（radius、sides）画多边形，Zdog.Shape 配合 path 数组画直线，path 中使用 bezier 数组画贝塞尔曲线并设 closed: false。
3. Zdog 分组：用 new Zdog.Group({ addTo: illo, translate }) 创建组，把头部、眼睛、嘴巴等子形状通过 addTo: head 加入组，再整体旋转 head.rotate.y = Math.PI / 4。
4. Zdog 动画：在 requestAnimationFrame 循环中修改 illo.rotate.y 或 illo.translate.y（如 Math.sin(t) * 20 做弹跳），每次修改后必须调用 illo.updateRenderGraph()；交互旋转用 mousemove 计算 targetRotateY，再用 currentRotateY += (targetRotateY - currentRotateY) * 0.1 缓动逼近。
5. Vanta.js 基础搭建：先引入 Three.js（https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js），再引入对应效果脚本（如 vanta.waves.min.js），调用 VANTA.WAVES({ el, mouseControls: true, touchControls: true, gyroControls: false, minHeight, minWidth, scale, scaleMobile, color, ... }) 初始化。
6. Vanta.js 效果选择：WAVES 用 color/shininess/waveHeight/waveSpeed/zoom；CLOUDS 用 skyColor/cloudColor/cloudShadowColor/sunColor/sunGlareColor/sunlightColor/speed；BIRDS 需额外引入 p5.js，用 backgroundColor/color1/color2/birdSize/wingSpan/speedLimit/separation/alignment/cohesion/quantity；NET 用 color/backgroundColor/points/maxDistance/spacing/showDots；CELLS 需 p5.js，用 color1/color2/size/speed/scale；FOG 用 highlightColor/midtoneColor/lowlightColor/baseColor/blurFactor/speed/zoom；其他效果包括 GLOBE、TRUNK、TOPOLOGY、DOTS、HALO、RINGS。
7. Vanta.js 生命周期管理：把初始化结果存为 vantaEffect，销毁时调用 vantaEffect.destroy()，动态更新用 vantaEffect.setOptions({ color, waveHeight })，必要时调用 vantaEffect.resize()。
8. Vanta.js React 集成：用 useRef 获取容器，useState 保存 vantaEffect，在 useEffect 中若未初始化则调用 VANTA.WAVES({ el: vantaRef.current, THREE: THREE, ... })，并在 cleanup 中调用 vantaEffect.destroy()。
9. Vanilla-Tilt.js 基础搭建：引入 https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js，给元素加 data-tilt 属性即可自动初始化，或调用 VanillaTilt.init(document.querySelector('.tilt-card'), { ... })。
10. Vanilla-Tilt.js 配置：max（最大倾斜角度）、reverse、startX/startY、perspective（越小越强烈）、scale（悬停缩放）、speed（过渡毫秒）、transition、easing、axis（限制 'x' 或 'y'）、reset、'reset-to-start'、glare、'max-glare'（0-1）、'glare-prerender'、'full-page-listening'、gyroscope、gyroscopeMinAngleX/MaxAngleX/MinAngleY/MaxAngleY、gyroscopeSamples。
11. Vanilla-Tilt.js 数据属性写法：在 HTML 上使用 data-tilt、data-tilt-glare、data-tilt-max-glare="0.5"、data-tilt-scale="1.1"、data-tilt-max="15" 等。
12. Vanilla-Tilt.js 分层 3D：给容器设 transform-style: preserve-3d，子层分别设 transform: translateZ(20px/40px/60px) 形成景深。
13. Vanilla-Tilt.js 编程控制：监听 'tiltChange' 事件读取 e.detail，调用 element.vanillaTilt.reset() 重置、element.vanillaTilt.destroy() 销毁、element.vanillaTilt.getValues() 获取 { tiltX, tiltY, percentageX, percentageY, angle }。
14. Vanilla-Tilt.js React 集成：用 useRef 获取元素，在 useEffect 中调用 VanillaTilt.init(element, { max: 25, speed: 400, glare: true, 'max-glare': 0.5, ...options })，cleanup 中调用 element.vanillaTilt.destroy()。
15. 组合模式一（Hero 区）：外层 section 设 position: relative、width: 100%、height: 100vh、overflow: hidden，内容层设 position: relative、z-index: 1，引入 Three.js 与 vanta.waves.min.js 后调用 VANTA.WAVES({ el: '#hero', mouseControls: true, touchControls: true, color, waveHeight, waveSpeed })。
16. 组合模式二（Zdog 图标网格）：用 querySelectorAll('.icon') 遍历每个 canvas，各自 new Zdog.Illustration({ element: canvas, zoom: 3, dragRotate: true })，按索引调用不同图标构造函数（如 createHeartIcon 用 Zdog.Shape 的 bezier 路径），并在各自 animate 循环中 illo.rotate.y += 0.02 后 updateRenderGraph()。
17. 组合模式三（倾斜卡片画廊）：用 grid 布局卡片，每张卡片加 data-tilt、data-tilt-glare、data-tilt-max-glare="0.3"，卡片设 transform-style: preserve-3d，内部 img 设 transform: translateZ(40px)、标题设 translateZ(60px)。
18. 组合模式四（Vanta 背景 + 倾斜卡片）：在同一 section 上先调用 VANTA.NET({ el: '#vanta-section', color, backgroundColor, points, maxDistance })，再 VanillaTilt.init(document.querySelectorAll('.service-card'), { max: 15, speed: 400, glare: true, 'max-glare': 0.3 })。
19. Zdog 性能优化：总形状数控制在 100 以内以保持 60fps，用 Group 组织相关形状，仅在需要时调用 updateRenderGraph()，动画用 Canvas、静态插画用 SVG。
20. Vanta.js 性能优化：每页只用 1-2 个 Vanta 效果，移动端禁用或改用静态背景，SPA 中卸载时务必调用 .destroy()，降低 points/quantity 等粒子数。
21. Vanta.js 移动端降级：用 /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) 检测移动端，非移动端才初始化 VANTA.WAVES，移动端改为设置 CSS 渐变背景。
22. Vanilla-Tilt.js 性能优化：只对可见元素应用，降低 gyroscopeSamples，低端设备禁用，给 .tilt-card 加 will-change: transform。
23. Vanta.js 懒加载：用 IntersectionObserver 监听目标元素，当 entry.isIntersecting 且 entry.target.vantaEffect 不存在时才初始化 VANTA.WAVES 并赋值给 entry.target.vantaEffect。
24. 修复 Zdog 不渲染：确保每次形状变化后调用 illo.updateRenderGraph()，canvas 必须有明确 width/height，形状 translate 保持在原点附近。
25. 修复移动端 Tilt 无效：在 VanillaTilt.init 中开启 gyroscope: true 并设置 gyroscopeMinAngleX: -45、gyroscopeMaxAngleX: 45。
26. 修复 Vanta 颜色不生效：颜色必须用十六进制数字（如 0x23153c），不能用字符串（如 '#23153c'）。

适用边界 · 注意事项

• 需要复杂 3D 图形、真实光照/材质或游戏级渲染时，应改用 threejs-webgl 或 react-three-fiber，而非这些轻量装饰库。
• 页面已存在多个重型动画或低端移动设备为主时，Vanta.js 多实例会拖垮性能，应改用静态背景或仅保留一个效果。
• 需要滚动驱动动画时，应配合 gsap-scrolltrigger 等专门方案，而不是仅靠这些库自身。