Vanta.js 简介
vanta.js可以为网站设置炫酷的动态背景
Vanta.js 安装 【vue2版本】
# 安装 three.js 依赖
# 这里指定版本，否则会报错，因为three更新了，但是查看源码，该组件库还是使用的这个版本
npm i [email protected]
# 安装 Vanta JS 依赖
npm i [email protected]
实战
<template>
<div class="app" ref='vantaRef'>
<el-radio-group v-model="threeFun" @change="threeChange">
<el-radio-button label="CLOUDS"></el-radio-button>
<el-radio-button label="BIRDS"></el-radio-button>
<el-radio-button label="Fog"></el-radio-button>
<el-radio-button label="WAVES"></el-radio-button>
<el-radio-button label="Clouds"></el-radio-button>
<!-- <el-radio-button label="Clouds2"></el-radio-button> -->
<el-radio-button label="Globe"></el-radio-button>
<el-radio-button label="NET"></el-radio-button>
<el-radio-button label="Cells"></el-radio-button>
<!-- <el-radio-button label="Trunk"></el-radio-button>
<el-radio-button label="Topology"></el-radio-button>
<el-radio-button label="Dots"></el-radio-button> -->
<el-radio-button label="Rings"></el-radio-button>
<el-radio-button label="Halo"></el-radio-button>
</el-radio-group>
</div>
</template>
<script>
import * as Three from "three";
// 这里引入具体的风格，比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'
import BIRDS from "vanta/src/vanta.birds";
import Fog from "vanta/src/vanta.fog";
import WAVES from "vanta/src/vanta.waves";
import Clouds from "vanta/src/vanta.clouds";
import Clouds2 from "vanta/src/vanta.clouds2"; // 有问题
import Globe from "vanta/src/vanta.globe";
import NET from "vanta/src/vanta.net";
import Cells from "vanta/src/vanta.cells";
import Trunk from "vanta/src/vanta.trunk"; //不可用
import Topology from "vanta/src/vanta.topology"; //不可用
import Dots from "vanta/src/vanta.dots"; //不可用
import Rings from "vanta/src/vanta.rings";
import Halo from "vanta/src/vanta.halo";
export default {
name: 'App',
data() {
return {
threeFun: 'NET',
time: null
};
},
mounted() {
let styleArr = ['CLOUDS', 'BIRDS', 'Fog', 'WAVES', 'Clouds', 'Globe', 'NET', 'Cells', 'Rings', 'Halo']
this.threeChange(styleArr[8])
this.time = setInterval(() => {
let randomNumber = Math.floor(Math.random() * styleArr.length) + 1; // generate random number between 1 and 100
this.threeFun = styleArr[randomNumber]
this.threeChange(styleArr[randomNumber])
}, 4000);
},
methods: {
threeChange(val) {
this.threeDestroy()
switch (val) {
case 'CLOUDS':
this.vantaEffect = CLOUDS({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'NET':
this.vantaEffect = NET({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'BIRDS':
this.vantaEffect = BIRDS({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Fog':
this.vantaEffect = Fog({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'WAVES':
this.vantaEffect = WAVES({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Clouds':
this.vantaEffect = Clouds({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Clouds2':
this.vantaEffect = Clouds2({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Globe':
this.vantaEffect = Globe({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Cells':
this.vantaEffect = Cells({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Trunk':
this.vantaEffect = Trunk({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Topology':
this.vantaEffect = Topology({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Dots':
this.vantaEffect = Dots({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Rings':
this.vantaEffect = Rings({
el: this.$refs.vantaRef,
THREE: Three
})
break;
case 'Halo':
this.vantaEffect = Halo({
el: this.$refs.vantaRef,
THREE: Three
})
break;
default:
break;
}
this.initThree()
},
threeDestroy() {
if (this.vantaEffect) {
this.vantaEffect.destroy()
}
},
initThree() {
// 这里重新设置样式
this.vantaEffect.setOptions({
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
skyColor: 0x91cde3,
cloudColor: 0xc9c9d9,
cloudShadowColor: 0x174b7d,
sunColor: 0xe37f05,
speed: 1.50
})
},
},
beforeDestroy() {
this.threeDestroy()
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.app {
height: 100vh;
}
</style>