1.访问vanta.js官网
2.在项目中的终端输入指令,安装 three.js 依赖
npm i three@0.121.0
3.在项目中的终端输入指令,安装 Vanta JS 依赖
npm i vanta
4.开始使用vanta.js
(1)任意一个div,添加上引用ref="vantaRef"
<div class="wrapper" ref="vantaRef"></div>
(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
})
},