1. 官網(wǎng)效果

官網(wǎng)：https://www.vantajs.com/

由于博主在參考官網(wǎng)及官方GitHub進(jìn)行應(yīng)用時遇到一些問題，因此寫了該篇博客，以避免大家因找Bug而浪費(fèi)時間，方便快速的應(yīng)用。

2. npm安裝

注意版本

npm install vanta@0.5.24

npm install three@0.121.0

Vue的版本如下
“vue”: “^2.6.14”

3. 關(guān)鍵部分

渲染容器

<div ref="vantaRef"></div>

導(dǎo)包

import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

方法

  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

4. 實(shí)例1

完整代碼：

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my_title">Hello,World</div>
</div>

</template>

<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

export default {   
  name: "hello",
  data() {
    return {
      
    };
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
  methods: {
    
  },

};
</script>

<style>
.my_title{
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 10%;
  color: aquamarine;
  font-size: 100px;
  font-weight: bolder;
}
</style>

5. 實(shí)例2

完整代碼：

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my_title">Hello,World</div>
</div>

</template>

<script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default {   
  name: "hello",
  data() {
    return {
      
    };
  },
  mounted() {
    this.vantaEffect = Net({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
  methods: {
    
  },

};
</script>

<style>
.my_title{
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 10%;
  color: aquamarine;
  font-size: 100px;
  font-weight: bolder;
}
</style>

6. 實(shí)例3 添加顏色參數(shù)等

參加顏色參數(shù)

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my_title">Hello,World</div>
</div>

</template>

<script>
import * as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default {   
  name: "hello",
  data() {
    return {
      
    };
  },
  mounted() {
    this.vantaEffect = Net({
      el: this.$refs.vantaRef,
      THREE: THREE
    })

    VANTA.NET({
  el: this.$refs.vantaRef,
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0xdec790,
  backgroundColor: 0xc04393,
  spacing: 12.00
})


  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },
  methods: {
    
  },

};
</script>

<style>
.my_title{
  z-index: 999;
  position: fixed;
  top: 40%;
  left: 10%;
  color: aquamarine;
  font-size: 100px;
  font-weight: bolder;
}
</style>

如果報錯：‘XXXXX‘ is not defined ( no-undef )
可參考：https://blog.csdn.net/weixin_44442366/article/details/126162933

更多的特效背景可參考官網(wǎng):https://www.vantajs.com
修改import和mounted中的信息即可

如果覺得本文有用，點(diǎn)贊收藏鼓勵一下吧文章來源地址http://www.zghlxwxcb.cn/news/detail-503244.html

到了這里，關(guān)于【前端】在Vue2中使用Vanta.js炫酷動態(tài)背景(全屏背景)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！