如图,发现类似别人的登录界面,这个动态背景非常炫酷,今天发现这个插件可以直接实现。
vanta.js官网地址
根据官网实例,需要安装three.js 和 vanta.js
npm install vanta@0.5.24
npm install three@0.121.0
安装完成后,在使用页面引入
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
});
},
如上,即可实现动态背景。
在官网挑选例子时,记得切换样式逻辑的引用。 设置的参数效果也可以直接在官网调试后,直接拿到自己项目中使用,每个例子的参数是不同,记得修改。