vanta.js的使用（前端网站动态背景）

qq_58569936

已于 2023-03-07 10:09:07 修改

阅读量1.1w

点赞数 12

分类专栏：前端动态背景文章标签：动画前端 vue.js

于 2022-04-28 15:33:19 首次发布

本文链接：https://blog.csdn.net/qq_58569936/article/details/124474292

版权

前端动态背景专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成Vanta.js，通过简单的步骤为网站创建炫酷的3D动画背景。首先，需要通过npm安装three.js和vanta.js依赖。然后，在Vue组件中引入BIRDS特效，并指定引用元素。在`mounted`钩子中初始化Vanta特效，并在`beforeDestroy`中销毁，确保背景效果正常工作。这样，就能为Vue应用增添动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vanta.js可以为网站设置炫酷的动态背景比如在网站登陆的首页

官网 Vanta.js - Animated 3D Backgrounds For Your Website

npm官网 vanta - npm

只需几行代码，即可将3D动画数字艺术添加到任何网页中。
工作原理:Vanta在任何HTML元素中插入一个动画效果作为背景。
与普通JS、React、Angular、Vue等一起使用。

接下来讲一下如何在vue中使用vanta.js

在项目中安装 three.js 依赖
```
npm i three
```
在项目中安装 Vanta JS 依赖
```
npm i vanta
```

代码部分

<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>
import * as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'
export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>

这样一个炫酷的动态背景就形成了（关于React和Angular框架自行查看npm官网vanta - npm

喜欢就请点个赞吧