vue3 使用vanta 动画背景

 安装vanta

 yarn add three  vanta

使用代码如下： 

<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import Halo from "vanta/src/vanta.halo";


const Area = ref(null);
let vantaEffect: { destroy: () => void } | null = null;


onMounted(() => {
  vantaEffect = Halo({
    el: Area.value,
    THREE: THREE,
    mouseControls: true,

    touchControls: true,

    gyroControls: true,

    scale: 2.0,

    color1: 14381274,

    color2: 16443110,
  });
});

onUnmounted(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});


</script>
<template>
  <div class="login" ref="Area">
  </div>
</template>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
}
</style>

如果发现打包发现以上错误，在src下新建shims-vue.d.ts文件，写入以下内容

declare module 'vanta/src/vanta.halo';