正式开整
首先我的测试项目是vue2版本。
这里指定版本,否则会报错,因为three更新了,但是查看源码,该组件库还是使用的这个版本
引入three
npm i three@0.121.0
引入vanta
官网地址:Vanta.js - Animated 3D Backgrounds For Your Website
npm i vanta
在具体项目中调用
<template>
<div ref='vantaRef'>
Foreground content here
</div>
</template>
<script>
import BIRDS from 'vanta/src/vanta.birds'
export default {
mounted() {
this.vantaEffect = BIRDS({
el: this.$refs.vantaRef
})
},
beforeDestroy() {
if (this.vantaEffect) {
this.vantaEffect.destroy()
}
}
}
</script>
以上是基础的调用,修改样式和风格参考下面
<template>
<div ref='vantaRef'>
Foreground content here
</div>
</template>
<script>
import * as Three from "three";
// import BIRDS from 'vanta/src/vanta.birds'
// 这里引入具体的风格,比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'
export default {
mounted() {
this.vantaEffect = CLOUDS({
el: this.$refs.vantaRef,
THREE: Three
})
// 这里重新设置样式
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() {
if (this.vantaEffect) {
this.vantaEffect.destroy()
}
}
}
</script>