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

正式开整

首先我的测试项目是vue2版本。

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

引入three

npm i [email protected]

引入vanta

官网地址：Vanta.js - Animated 3D Backgrounds For Your Website

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 * as Three from "three";
// 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>