Vue3 实现 Three.js粒子特效

效果

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

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";

const amountX = ref(50);
const amountY = ref(50);
const color = ref("#e1b284");
const topOffset = ref(350);

let count = 0;
let mouseX = 0;
let windowHalfX = null;
let camera = null;
let scene = null;
let particles = null;
let renderer = null;

const init = () => {
  const SEPARATION = 100;
  const SCREEN_WIDTH = window.innerWidth;
  const SCREEN_HEIGHT = window.innerHeight;
  const container = document.createElement("div");
  windowHalfX = window.innerWidth / 2;
  container.style.position = "relative";
  container.style.top = `${topOffset.value}px`;
  container.style.height = `${SCREEN_HEIGHT - topOffset.value}px`;

  const waves = document.getElementById("waves");
  waves.appendChild(container);

  camera = new THREE.PerspectiveCamera(
    75,
    SCREEN_WIDTH / SCREEN_HEIGHT,
    1,
    10000,
  );
  camera.position.z = 1000;

  scene = new THREE.Scene();

  const numParticles = amountX.value * amountY.value;
  const positions = new Float32Array(numParticles * 3);
  const scales = new Float32Array(numParticles);

  let i = 0;
  let j = 0;
  for (let ix = 0; ix < amountX.value; ix++) {
    for (let iy = 0; iy < amountY.value; iy++) {
      positions[i] = ix * SEPARATION - (amountX.value * SEPARATION) / 2;
      positions[i + 1] = 0;
      positions[i + 2] = iy * SEPARATION - (amountY.value * SEPARATION) / 2;
      scales[j] = 1;
      i += 3;
      j++;
    }
  }

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));

  const material = new THREE.ShaderMaterial({
    uniforms: {
      color: { value: new THREE.Color(color.value) },
    },
    vertexShader: `
      attribute float scale;
      void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 2.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 );
      }
    `,
  });

  particles = new THREE.Points(geometry, material);
  scene.add(particles);

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearAlpha(0);
  container.appendChild(renderer.domElement);

  window.addEventListener("resize", onWindowResize, { passive: false });
  document.addEventListener("mousemove", onDocumentMouseMove, {
    passive: false,
  });
  document.addEventListener("touchstart", onDocumentTouchStart, {
    passive: false,
  });
  document.addEventListener("touchmove", onDocumentTouchMove, {
    passive: false,
  });
};

const render = () => {
  camera.position.x += (mouseX - camera.position.x) * 0.05;
  camera.position.y = 400;
  camera.lookAt(scene.position);

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

  let i = 0;
  let j = 0;
  for (let ix = 0; ix < amountX.value; ix++) {
    for (let iy = 0; iy < amountY.value; iy++) {
      positions[i + 1] =
        Math.sin((ix + count) * 0.3) * 100 + Math.sin((iy + count) * 0.5) * 100;
      scales[j] =
        (Math.sin((ix + count) * 0.3) + 1) * 8 +
        (Math.sin((iy + count) * 0.5) + 1) * 8;
      i += 3;
      j++;
    }
  }

  particles.geometry.attributes.position.needsUpdate = true;
  particles.geometry.attributes.scale.needsUpdate = true;
  renderer.render(scene, camera);
  count += 0.1;
};

const animate = () => {
  requestAnimationFrame(animate);
  render();
};

const onDocumentMouseMove = (event) => {
  mouseX = event.clientX - windowHalfX;
};

const onDocumentTouchStart = (event) => {
  if (event.touches.length === 1) {
    mouseX = event.touches[0].pageX - windowHalfX;
  }
};

const onDocumentTouchMove = (event) => {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
  }
};

const onWindowResize = () => {
  windowHalfX = window.innerWidth / 2;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};

onMounted(() => {
  init();
  animate();
});

onUnmounted(() => {
  window.removeEventListener("resize", onWindowResize);
  document.removeEventListener("mousemove", onDocumentMouseMove);
  document.removeEventListener("touchstart", onDocumentTouchStart);
  document.removeEventListener("touchmove", onDocumentTouchMove);
});
</script>