vue3 setup语法糖使用vanta.js的使用方法

最新推荐文章于 2024-07-13 13:08:34 发布

A_ugust__

最新推荐文章于 2024-07-13 13:08:34 发布

阅读量462

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_61769998/article/details/130343395

版权

该代码示例展示了如何在Vue3组件中集成Vanta.js库，通过引入Three.js和Vanta特效，实现在挂载的<div>区域上创建动态3D云彩效果。onMounted和onBeforeUnmount钩子分别用于初始化和销毁动画，同时允许自定义颜色样式。

摘要由CSDN通过智能技术生成

<!--这里创建一个vantajs的挂载区域-->
<template>
    <div class="vanta_area" ref="Area"></div>
</template>
<script setup>
//导入vanta.js和three.js，以及ref等hooks
import * as THREE from 'three'
import CLOUDS from 'vanta/src/vanta.waves'
import {onMounted,onBeforeUnmount,ref} from 'vue'

//使用ref引用挂载区域
const Area=ref(null)
//创建一个全局的变量来使用vanta.js
/**
  *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
  *但是vue3 setup中是没有this，所以要另外创建一个
**/
let vantaEffect=null;
//在两个生命周期钩子内创建vantaEffect
onMounted(()=>{
    vantaEffect=CLOUDS({
        el:Area.value,
        THREE:THREE,
        //如果需要改变样式，要写在这里
        //因为这里vantaEffect是没有setOptions这个方法的
        color: 0x16212a,
    })
})

onBeforeUnmount(()=>{
    if(vantaEffect){
        vantaEffect.destroy()
    }
})
</script>
<style lang="less" scoped>
.vanta_area {
  width:100vw;
  height:100vh;
}
</style>