Vue3炫酷的界面

Vanta.js - Animated 3D Backgrounds For Your Website3D & WebGL Background Animations For Your Websitehttps://www.vantajs.com/?effect=birds需要的安装包

npm install three   

npm install three@0.13.4.0

npm install vue@3.2.37

#Vanta JS 依赖
npm install vanta 

npm i vanta   


#项目中用到
#ElementPlus
npm install element-plus 

代码部分

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

 效果图