vue3 使用vanta 动画背景

原创

已于 2024-04-03 09:06:56 修改 · 646 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-04-02 17:54:19 首次发布

本文介绍了如何在Vue项目中通过Yarn安装并集成VANTA库的Halo效果，包括在src目录下添加shims-vue.d.ts以解决打包时的类型声明问题。

安装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>