登录界面实现动态背景

如图，发现类似别人的登录界面，这个动态背景非常炫酷，今天发现这个插件可以直接实现。
vanta.js官网地址

根据官网实例，需要安装three.js 和 vanta.js
npm install [email protected]
npm install [email protected]

安装完成后，在使用页面引入
import * as THREE from “three”; //导入样式
import NET from “vanta/src/vanta.net”; //导入动态样式逻辑

<div ref="vantaRef" style="width: 100%; height: 100vh"></div>

  mounted() {
    
    
    this.vantaEffect = NET({
    
    
      el: this.$refs.vantaRef,
      THREE: THREE,
      color: 0x3fafff,
      backgroundColor: 0x23153c,
      points: 10,
      maxDistance: 20,
      spacing: 15
    });
  },

如上，即可实现动态背景。

在官网挑选例子时，记得切换样式逻辑的引用。 设置的参数效果也可以直接在官网调试后，直接拿到自己项目中使用，每个例子的参数是不同，记得修改。