提供vue下three.js粒子效果的函数代码

以下是提供 vue 下 three.js 粒子效果的函数代码：

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'ParticleEffect',
  props: {
    particleCount: {
      type: Number,
      default: 100
    },
    particleSize: {
      type: Number,
      default: 1
    },
    particleColor: {
      type: String,
      default: '#ffffff'
    },
    particleSpeed: {
      type: Number,
      default: .1
    }
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100);
      this.camera.position.z = 500;

      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.container.appendChild(this.renderer.domElement);

      this.particles = new THREE.Geometry();

      for (let i = ; i < this.particleCount; i++) {
        const particle = new THREE.Vector3(
          Math.random() * 100 - 500,
          Math.random() * 100 - 500,
          Math.random() * 100 - 500
        );
        this.particles.vertices.push(particle);
      }

      const particleMaterial = new THREE.PointsMaterial({
        color: this.particleColor,
        size: this.particleSize
      });

      this.particleSystem = new THREE.Points(this.particles, particleMaterial);
      this.scene.add(this.particleSystem);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.particleSystem.rotation.x += this.particleSpeed;
      this.particleSystem.rotation.y += this.particleSpeed;
      this.renderer.render(this.scene, this.camera);
    }
  }
};
</script>

希望对你有所帮助！