vanta.js的使用

1.访问vanta.js官网

2.在项目中的终端输入指令,安装 three.js 依赖

npm i [email protected]

3.在项目中的终端输入指令,安装 Vanta JS 依赖

npm i vanta

4.开始使用vanta.js

(1)任意一个div,添加上引用ref="vantaRef"

(2)在script中导入对应的素材,如我这里导入的是waves

import * as THREE from 'three'
import WAVES from 'vanta/src/vanta.waves'

(3)在vanta.js官网复制waves的渲染代码,当然你可以在官网调好参数和效果在进行复制

mounted() {
    this.vantaEffect = WAVES({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00
    })
  },

你可能感兴趣的:(javascript,vue.js,前端)