vue 新增vanta动态背景

vue 新增vanta动态背景

npm install three@0.134.0
npm install vanta

<template>
    <div ref="login" class="flex flex-justify-center flex-items-center h-100vh">
    <!-- 表单 -->
    </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import WAVES from "vanta/dist/vanta.waves.min";
 
const login = ref();
let vantaEffect;
 
onMounted(() => {
  vantaEffect = WAVES({
    el: login.value,
    THREE: THREE,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00
  });
});
 
onUnmounted(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
</script>
 
<style scoped>
</style>

作者新增了cloud云和net的特效，在gitee 的 vblogv6项目里