vue3中使用vanta.js创建动态网页

通过npm的方式安装three和vanta.js

npm install vanta@0.5.24

npm install three@0.121.0

在vue3中进行引入和使用

<template>

  <div id="login" ref="Area">

  </div>

</template>

<script setup lang="ts">

import { onMounted,onBeforeUnmount,ref } from "vue";

//导入vanta.js和three.js，以及ref等hooks

import * as THREE from 'three';

import BIRDS  from 'vanta/src/vanta.birds';

 

//使用ref引用挂载区域

const Area=ref(null)

//创建一个全局的变量来使用vanta.js

/**

  *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的

  *但是vue3 setup中是没有this，所以要另外创建一个

**/

let vantaEffect=null;

//在两个生命周期钩子内创建vantaEffect

onMounted(()=>{

    vantaEffect=BIRDS ({

        el:Area.value,

        THREE:THREE,

        //如果需要改变样式，要写在这里

        //因为这里vantaEffect是没有setOptions这个方法的

        // color: 0x16212a,

        mouseControls: true,

      touchControls: true,

      gyroControls: true,

      scale: 2.0,

      color1: 14381274,

      color2: 16443110,

    })

})

onBeforeUnmount(()=>{

    if(vantaEffect){

        vantaEffect.destroy()

    }

})

</script>

<style lang="scss" scoped>

#login {

  height: 100vh;

  background-image: url("../assets//03.jpg");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;

  display: flex;

  justify-content: center;

  align-items: center;

  perspective: 800px;

}

</style>