3D粒子波浪特效、动画结合vue+three.js

开箱即用
在components下创建组件loginBgk/index

<template>
  <div id="iviewBg">
    <slot></slot>
  </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: "#097bdb",
    },
    //控制波浪的位置
    top: {
      type: Number,
      default: 350,
    },
  },
  data() {
    return {
      SEPARATION: 100,
      container: "",
      camera: "",
      scene: "",
      renderer: "",
      particles: "",
      count: 0,
      mouseX: 0,
      windowHalfX: "",
    };
  },
  mounted() {
    this.windowHalfX = window.innerWidth / 2;
    this.init();
    this.animate();
  },
  methods: {
    init() {
      this.container = document.createElement("div");
      document.getElementById("iviewBg").appendChild(this.container);

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

      //设置相机z轴视野
      this.camera.position.z = 1000;

      //创建场景
      this.scene = new THREE.Scene();

      const numParticles = this.amountX * this.amountY;

      const positions = new Float32Array(numParticles * 3);
      const scales = new Float32Array(numParticles);

      let i = 0,
        j = 0;

      // 初始化粒子位置和大小
      for (let ix = 0; ix < this.amountX; ix++) {
        for (let iy = 0; iy < this.amountY; iy++) {
          positions[i] =
            ix * this.SEPARATION - (this.amountX * this.SEPARATION) / 2; // x
          positions[i + 1] = 0; // y
          positions[i + 2] =
            iy * this.SEPARATION - (this.amountY * this.SEPARATION) / 2; // z
          scales[j] = 1;
          i += 3;
          j++;
        }
      }

      //是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销
      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute(
        "position",
        new THREE.BufferAttribute(positions, 3)
      );
      geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));

      //着色器材质(ShaderMaterial),设置球的大小，颜色，等
      const material = new THREE.ShaderMaterial({
        uniforms: {
          //设置球的颜色
          color: { value: new THREE.Color(this.color) },
        },
        //控制球的大小
        vertexShader:
          "attribute float scale; void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = scale * ( 300.0 / - mvPosition.z );gl_Position = projectionMatrix * mvPosition;}",
        fragmentShader:
          "uniform vec3 color;void main() {if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;gl_FragColor = vec4( color, 1.0 );}",
      });

      //一个用于显示点的类。
      this.particles = new THREE.Points(geometry, material);
      //往场景中添加点
      this.scene.add(this.particles);

      //alpha - canvas是否包含alpha (透明度)。默认为 false。
      //渲染器的背景色默认为黑色，设置渲染器的背景色为透明
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setClearAlpha(0);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.container.appendChild(this.renderer.domElement);

      //显示右上角fps框
      // stats = new Stats();
      //   container.appendChild(stats.dom);

      this.container.style.touchAction = "none";
      //监听鼠标移动事件
      this.container.addEventListener("pointermove", this.onPointerMove);

      //调整波浪的位置
      this.container.style.position = "relative";
      this.container.style.top = `${this.top}px`;

      window.addEventListener("resize", this.onWindowResize);
    },
    render() {
      this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
      this.camera.position.y = 400;
      this.camera.lookAt(this.scene.position);

      const positions = this.particles.geometry.attributes.position.array;
      const scales = this.particles.geometry.attributes.scale.array;

      // 设置粒子位置和大小
      let i = 0,
        j = 0;
      for (let ix = 0; ix < this.amountX; ix++) {
        for (let iy = 0; iy < this.amountY; iy++) {
          positions[i + 1] =
            Math.sin((ix + this.count) * 0.3) * 50 +
            Math.sin((iy + this.count) * 0.5) * 50;

          scales[j] =
            (Math.sin((ix + this.count) * 0.3) + 1) * 10 +
            (Math.sin((iy + this.count) * 0.5) + 1) * 10;

          i += 3;
          j++;
        }
      }

      this.particles.geometry.attributes.position.needsUpdate = true;
      this.particles.geometry.attributes.scale.needsUpdate = true;

      this.renderer.render(this.scene, this.camera);

      this.count += 0.1;
    },
    onWindowResize() {
      this.windowHalfX = window.innerWidth / 2;
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    onPointerMove(event) {
      if (event.isPrimary === false) return;
      this.mouseX = event.clientX - this.windowHalfX;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
      //fps 实时更新
      // stats.update();
    },
  },
};
</script>

<style lang="scss" scoped>
#iviewBg {
  background: url("../../assets/imgs/wavesBg.png") no-repeat;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  display: flex;
}

</style>

在页面中引入

<wavesBg :top="250">
	在这个背景你所要画的页面
</wavesBg>

import wavesBg from "../components/loginBgk/index.vue";
 components: {
    wavesBg,
  },