vanta.js的使用

1.访问vanta.js官网

2.在项目中的终端输入指令，安装 three.js 依赖

npm i three@0.121.0

3.在项目中的终端输入指令，安装 Vanta JS 依赖

npm i vanta

4.开始使用vanta.js

（1）任意一个div，添加上引用ref="vantaRef"

<div class="wrapper" ref="vantaRef"></div>

(2)在script中导入对应的素材，如我这里导入的是waves

import * as THREE from 'three'
import WAVES from 'vanta/src/vanta.waves'

（3）在vanta.js官网复制waves的渲染代码，当然你可以在官网调好参数和效果在进行复制

mounted() {
    this.vantaEffect = WAVES({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00
    })
  },