Vanta.js使用记录

vue项目中使用

安装对应第三方包

//安装3djs库three
npm i three

//安装vanta
npm i vanta

vue项目中导入

import * as THREE from 'three'
// 这里引入具体的风格，比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'

创建实例：

  mounted() {
    //创建什么动画就使用什么进行实例创建
    this.vantaEffect = CLOUDS({
      el: this.$refs.appRef,
      THREE: THREE
    })
    // 这里重新设置样式
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      skyColor: 0x68b8d7,
      cloudColor: 0xadc1de,
      cloudShadowColor: 0x183550,
      sunColor: 0xe37f05,
      speed: 1
    })
  },

页面销毁：

beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }