记录一次vanta.js的使用（包含修改样式和风格）

最近发现一款前端动效组件，效果挺多的，想试试效果，于是有了接下来的过程


从官网介绍来看，确实挺方便，可视化设置参数，出代码

正式开整

首先我的测试项目是vue2+elementui

这里指定版本，否则会报错，因为three更新了，但是查看源码，该组件库还是使用的这个版本

引入three

npm i three@0.121.0

引入vanta

npm i vanta

在具体项目中调用

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>
import BIRDS from 'vanta/src/vanta.birds'

export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

以上是基础的调用，修改样式和风格参考下面

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>

// import BIRDS from 'vanta/src/vanta.birds'
// 这里引入具体的风格，比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'
export default {
  mounted() {
    this.vantaEffect = CLOUDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
    // 这里重新设置样式
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      skyColor: 0x91cde3,
      cloudColor: 0xc9c9d9,
      cloudShadowColor: 0x174b7d,
      sunColor: 0xe37f05,
      speed: 1.50
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

查看源码可以看到具体的样式名称，按需照上面引入即可