能搜到这篇文章 想必一定看过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>