vue项目中使用
安装对应第三方包
//安装3djs库three
npm i three
//安装vanta
npm i vanta
vue项目中导入
import * as THREE from 'three'
// 这里引入具体的风格,比如云风格的 就引入vanta/src/vanta.clouds.js
import CLOUDS from 'vanta/src/vanta.clouds'
创建实例:
mounted() {
//创建什么动画就使用什么进行实例创建
this.vantaEffect = CLOUDS({
el: this.$refs.appRef,
THREE: THREE
})
// 这里重新设置样式
this.vantaEffect.setOptions({
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
skyColor: 0x68b8d7,
cloudColor: 0xadc1de,
cloudShadowColor: 0x183550,
sunColor: 0xe37f05,
speed: 1
})
},
页面销毁:
beforeDestroy() {
if (this.vantaEffect) {
this.vantaEffect.destroy()
}
}