介绍

anta.js可以为网站设置炫酷的动态背景 比如在网站登陆的首页，可以与普通JS、React、Angular、Vue等一起使用

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

安装three.js 依赖和Vanta JS 依赖

1
2
npm i three
npm i vanta

整体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div ref="vantaRef" id="vantaRef" style="width:100%;height:100vh"></div>


import * as THREE from 'three'
import NET from 'vanta/src/vanta.net'


mounted() {
    this.vantaEffect = NET({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0x3ffffb,
      points: 15.00,
      maxDistance: 23.00
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

image-20230822192625372