创始人

2025-05-29 09:09:39

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言
一、Vanta.js是什么？
二、使用步骤
- 1.引入库
- - - - 在项目中安装 three.js 依赖
      - 在项目中安装 Vanta JS 依赖
- 2.代码部分，在具体项目中调用（基础调用）

前言

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

请添加图片描述
在这里插入图片描述

一、Vanta.js是什么？

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

首先我的测试项目是vue2版本，关于React和Angular框架自行查看npm官网Vanta npm 官网：Vanta - npm

这里指定版本，否则会报错，因为three更新了，但是查看源码，该组件库还是使用的这个版本

npm i three@0.121.0

Vanta.js官网： Vanta.js Animated website backgrounds in a few lines of code.
Vanta npm 官网：Vanta - npm

npm i vanta

注意：我Vanta.js的版本是0.5.24，发现Clouds2，Trunk，Topology，Dots不能用

代码如下（示例）：

这样一个炫酷的动态背景就形成了

下班~