vantajs使用

vantajs可用于背景图展示动态效果,vue中使用方式如下:

安装依赖,注意版本,three的最新版本可能会报错

npm i vanta@0.5.24 three@0.121.0

<template>
  <div id="app">
    <div ref="vantaRef" style="height: 30vh;"></div>

    <div ref="BIRDS" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Cells" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Clouds" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Clouds2" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Dots" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Fog" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Globe" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Halo" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Net" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Rings" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Ripple" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Topology" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="Trunk" style="display:inline-block;width:30vw;height: 30vh;"></div>
    <div ref="WAVES" style="display:inline-block;width:30vw;height: 30vh;"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import BIRDS from "vanta/dist/vanta.birds.min";
import Cells from "vanta/dist/vanta.cells.min";
import Clouds from "vanta/dist/vanta.clouds.min";
import Clouds2 from "vanta/dist/vanta.clouds2.min"; //有问题
import Dots from "vanta/dist/vanta.dots.min"; //有bug
import Fog from "vanta/dist/vanta.fog.min";
import Globe from "vanta/dist/vanta.globe.min";
import Halo from "vanta/dist/vanta.halo.min";
import Net from "vanta/dist/vanta.net.min";
import Rings from "vanta/dist/vanta.rings.min";
import Ripple from "vanta/dist/vanta.ripple.min";//不好看
import Topology from "vanta/dist/vanta.topology.min"; //有bug
import Trunk from "vanta/dist/vanta.trunk.min"; //有bug
import WAVES from "vanta/dist/vanta.waves.min";
export default {
  data() {
    return {
      vantaEffect: null,
    }
  },
  mounted() {
    this.vantaEffect = Clouds({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
    })

    BIRDS({
      el: this.$refs.BIRDS,
      THREE: THREE,
    })
    Cells({
      el: this.$refs.Cells,
      THREE: THREE,
    })
    Clouds({
      el: this.$refs.Clouds,
      THREE: THREE,
    })
    Clouds2({
      el: this.$refs.Clouds2,
      THREE: THREE,
    })
    Dots({
      el: this.$refs.Dots,
      THREE: THREE,
    })
    Fog({
      el: this.$refs.Fog,
      THREE: THREE,
    })
    Globe({
      el: this.$refs.Globe,
      THREE: THREE,
      color: 0xff4484,
      backgroundColor: 0x24153d
    })
    Halo({
      el: this.$refs.Halo,
      THREE: THREE,
      baseColor: 0x1b5d,
      backgroundColor: 0x151d49
    })
    Net({
      el: this.$refs.Net,
      THREE: THREE,
      color: 0x40f9c9,
      backgroundColor: 0x23163a
    })
    Rings({
      el: this.$refs.Rings,
      THREE: THREE,
      backgroundColor: 0x1f2226,
      color: 0x86ff00
    })
    Ripple({
      el: this.$refs.Ripple,
      THREE: THREE,
    })
    Topology({
      el: this.$refs.Topology,
      THREE: THREE,
    })
    Trunk({
      el: this.$refs.Trunk,
      THREE: THREE,
    })
    WAVES({
      el: this.$refs.WAVES,
      THREE: THREE,
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
}
</script>

参考官方实例:https://www.vantajs.com/?effect=clouds

参考git代码:https://github.com/tengbao/vanta