Vue3 引入Vanta.js使用

能搜到这篇文章 想必一定看过demo效果图了吧

示例 Vanta.js - Animated 3D Backgrounds For Your Website (vantajs.com)

1. 引入

在根目录 index.html中引入依赖

复制代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.globe.min.js'></script>

两个cdn分别是 three.js 和 vanta.globe.js

建议 three.js 使用min版 无需引入完整包

注意 因为我只使用了 vanta 中 globe 效果 所以只引入了 globe 的 cdn!!

如需更多cdn 请访问 vanta 官方案例中的 cdn 列表进行引入

vanta CDN by jsDelivr - A free, fast, and reliable Open Source CDN

2. 使用

复制代码
<template>
  <div id="content"></div>
</template>


<script setup>
import { onMounted, nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    initVanta()
  })
})

const initVanta = () => {
  window.VANTA.GLOBE({
    el: '#login_content',
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.0,
    minWidth: 200.0,
    scale: 1.0,
    scaleMobile: 1.0,
    color: 0xc3c3c3,
    color2: 0xc3c3c3,
    size: 1.30,
    backgroundColor: 0xffffff
  })
}
</script>

<style scoped lang="less">
.content{
    height: 800px;
    width: 800px;
}
</style>
相关推荐
大虾写代码几秒前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby19 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹23 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel30 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh1 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
老华带你飞1 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
xw52 小时前
移动端调试上篇
前端