vue3 + threejs 实现仿iView官网大波浪特效

一、效果图

先上最终效果图：

具体效果可参考iview官方界面iView - 一套高质量的UI组件库

大波浪效果，使用的是three.js的官方例子，需要先安装three.js支持,具体可以看官方实例 three.js examples (threejs.org)

二、代码

1.安装threejs

npm install --save three

2.代码（复制可用）

components文件夹新建组件waves.vue，直接复制代码如下，可直接运行：

<template>
  <div id="iviewBg"></div>
</template>

<script>
import * as THREE from "three";
显示右上角fps框
// 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: "#097bdb",
    },
    //控制波浪的位置
    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").appendChild(container);

      //创建透视相机
      camera = new THREE.PerspectiveCamera(
        75, //摄像机视锥体垂直视野角度
        window.innerWidth / window.innerHeight, //摄像机视锥体长宽比
        1