关于vue3 setup语法糖使用vanta.js的使用方法

vue3 用vanta.js的方法

最近做一个小项目，为了让登录页的ui更好看点，就打算给整个背景添加vanta.js的3d动画效果，但是查遍很多地方都没有介绍怎么在setup语法糖下用vanta.js，于是我就安装vue2的用法，摸索出了vue3 setup语法糖的用法
这里直接给用法

<!--这里创建一个vantajs的挂载区域-->
<template>
    <div class="vanta_area" ref="Area"></div>
</template>
<script setup>
//导入vanta.js和three.js，以及ref等hooks
import * as THREE from 'three'
import CLOUDS from 'vanta/src/vanta.waves'
import {onMounted,onBeforeUnmount,ref} from 'vue'

//使用ref引用挂载区域
const Area=ref(null)
//创建一个全局的变量来使用vanta.js
/**
  *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
  *但是vue3 setup中是没有this，所以要另外创建一个
**/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
    vantaEffect=CLOUDS({
        el:Area.value,
        THREE:THREE,
        //如果需要改变样式，要写在这里
        //因为这里vantaEffect是没有setOptions这个方法的
        color: 0x16212a,
    })
})

onBeforeUnmount(()=>{
    if(vantaEffect){
        vantaEffect.destroy()
    }
})
</script>
<style lang="less" scoped>
.vanta_area {
  width:100vw;
  height:100vh;
}
</style>

那么这里做完之后，就能在页面看到vanta.js的3d效果了

如果要调整样式或用其他的效果，就到官网去查看吧
官网 Vanta.js - Animated 3D Backgrounds For Your Website
如果需要在react中使用，去下面的网站看吧，官方有关于react的rcc和rfchooks的使用方法
npm官网 vanta - npm