vanta.js的使用（前端网站动态背景）

vanta.js可以为网站设置炫酷的动态背景 比如在网站登陆的首页

官网 Vanta.js - Animated 3D Backgrounds For Your Website

npm官网 vanta - npm

• 只需几行代码，即可将3D动画数字艺术添加到任何网页中。
• 工作原理:Vanta在任何HTML元素中插入一个动画效果作为背景。
• 与普通JS、React、Angular、Vue等一起使用。

接下来讲一下如何在vue中使用vanta.js

1. 在项目中安装 three.js 依赖   

   npm i three

2.  在项目中安装 Vanta JS 依赖

   npm i vanta

3. 代码部分

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

   这样一个炫酷的动态背景就形成了（关于React和Angular框架自行查看npm官网vanta - npm

         喜欢就请点个赞吧