vue使用three.js实现粒子波浪效果

最新推荐文章于 2025-03-18 16:06:58 发布

hh22。

最新推荐文章于 2025-03-18 16:06:58 发布

阅读量1.1k

点赞数 3

分类专栏：笔记文章标签： javascript vue.js 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_44953689/article/details/129275404

版权

npm install --save three

<template>
  <div id="indexLizi" />
</template>
 
<script>
import * as THREE from "three";

export default {
   
  name: "Pointwave",
  props: {
   
    amountX: {
   
      type: Number,
      default: 50,
    },
    amountY: {
   
      type: Number,
      default: 50,
    },
    color: {
   
      type: Number,
      // default: 0xffffff,
      // default: 0x097bdb,
      default: 0x497fb7,
    },
    top: {
   
      type: Number,
      default: 150,
    },
  },
  data() {
   
    return {
   
      count: 0,
      // 用来跟踪鼠标水平位置
      mouseX: 0,
      windowHalfX: null,
      // 相机
      camera: null,
      // 场景
      scene: null,
      // 批量管理粒子
      particles: null,
      // 渲染器
      renderer: null,
    };
  },
  mounted() {
   
    this.init();
    this.animate();
    this.onWindowResize();
  },
  methods: {
   
    init: function () {
   
      const SEPARATION = 100;
      const SCREEN_WIDTH = window.innerWidth;
      const SCREEN_HEIGHT = window.innerHeight;
      const container = document.createElement("div");
      this.windowHalfX = window.innerWidth / 2;
      container.