效果
实现
废话不多说,直接上代码,直接复制使用。但在使用代码前,需要下载一些粒子波浪特效的库,直接执行下面命令即可。
npm install three -S
npm install node-sass
npm install sass-loader
代码
<template>
<div id="iviewBg"></div>
</template>
<script>
import * as THREE from "three";
// import Stats from "./stats.module";
import {
onMounted } from "vue";
export default {
props: {
//控制x轴波浪的长度
amountX: {
type: Number,
default: 50,
},
//控制y轴波浪的长度
amountY: {
type: Number,
default: 50,
},
//控制点颜色
color: {
type: String,
default: "#ffffff",
},
//控制波浪的位置
top: {
type: Number,
default: 350,
},
},
setup(props) {
const SEPARATION = 100;
// let stats;
let container, camera, scene, renderer;
let particles,
count = 0;
let mouseX = 0;
let windowHalfX = window.innerWidth / 2;
function init() {
container = document.createElement("div");
document.getElementById("iviewBg")