vanta 官网
Vanta - npm

Vanta.js 简介

vanta.js可以为网站设置炫酷的动态背景

Vanta.js 安装 【vue2版本】

# 安装 three.js 依赖
# 这里指定版本，否则会报错，因为three更新了，但是查看源码，该组件库还是使用的这个版本
npm i three@0.121.0
# 安装 Vanta JS 依赖
npm i vanta@0.5.24

实战

<template>
  <div class="app" ref='vantaRef'>
    <el-radio-group v-model="threeFun" @change="threeChange">
      <el-radio-button label="CLOUDS"></el-radio-button>
      <el-radio-button label="BIRDS"></el-radio-button>
      <el-radio-button label="Fog"></el-radio-button>
      <el-radio-button label="WAVES"></el-radio-button>
      <el-radio-button label="Clouds"></el-radio-button>
      <!-- <el-radio-button label="Clouds2"></el-radio-button> -->
      <el-radio-button label="Globe"></el-radio-button>
      <el-radio-button label="NET"></el-radio-button>
      <el-radio-button label="Cells"></el-radio-button>
      <!-- <el-radio-button label="Trunk"></el-radio-button>
      <el-radio-button label="Topology"></el-radio-button>
      <el-radio-button label="Dots"></el-radio-button> -->
      <el-radio-button label="Rings"></el-radio-button>
      <el-radio-button label="Halo"></el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
import * as Three from "three";
// 这里引入具体的风格，比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'
import BIRDS from "vanta/src/vanta.birds";
import Fog from "vanta/src/vanta.fog";
import WAVES from "vanta/src/vanta.waves";
import Clouds from "vanta/src/vanta.clouds";
import Clouds2 from "vanta/src/vanta.clouds2"; // 有问题
import Globe from "vanta/src/vanta.globe";
import NET from "vanta/src/vanta.net";
import Cells from "vanta/src/vanta.cells";
import Trunk from "vanta/src/vanta.trunk"; //不可用
import Topology from "vanta/src/vanta.topology"; //不可用
import Dots from "vanta/src/vanta.dots"; //不可用
import Rings from "vanta/src/vanta.rings";
import Halo from "vanta/src/vanta.halo";
export default {
  name: 'App',
  data() {
    return {
      threeFun: 'NET',
      time: null
    };
  },
  mounted() {
    let styleArr = ['CLOUDS', 'BIRDS', 'Fog', 'WAVES', 'Clouds', 'Globe', 'NET', 'Cells', 'Rings', 'Halo']
    this.threeChange(styleArr[8])
    this.time = setInterval(() => {
      let randomNumber = Math.floor(Math.random() * styleArr.length) + 1; // generate random number between 1 and 100
      this.threeFun = styleArr[randomNumber]
      this.threeChange(styleArr[randomNumber])
    }, 4000);
  },
  methods: {
    threeChange(val) {
      this.threeDestroy()
      switch (val) {
        case 'CLOUDS':
          this.vantaEffect = CLOUDS({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'NET':
          this.vantaEffect = NET({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'BIRDS':
          this.vantaEffect = BIRDS({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Fog':
          this.vantaEffect = Fog({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'WAVES':
          this.vantaEffect = WAVES({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Clouds':
          this.vantaEffect = Clouds({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Clouds2':
          this.vantaEffect = Clouds2({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Globe':
          this.vantaEffect = Globe({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Cells':
          this.vantaEffect = Cells({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Trunk':
          this.vantaEffect = Trunk({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Topology':
          this.vantaEffect = Topology({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Dots':
          this.vantaEffect = Dots({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Rings':
          this.vantaEffect = Rings({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;
        case 'Halo':
          this.vantaEffect = Halo({
            el: this.$refs.vantaRef,
            THREE: Three
          })
          break;

        default:
          break;
      }
      this.initThree()
    },
    threeDestroy() {
      if (this.vantaEffect) {
        this.vantaEffect.destroy()
      }
    },
    initThree() {
      // 这里重新设置样式
      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() {
    this.threeDestroy()
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.app {
  height: 100vh;
}
</style>