Vue引入three.js实现粒子波浪特效

最新推荐文章于 2024-12-10 09:53:21 发布

润火

最新推荐文章于 2024-12-10 09:53:21 发布

阅读量1.5k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45893787/article/details/126356804

本文展示了如何在Vue项目中利用three.js库创建粒子波浪特效。通过简单的代码示例，开发者可以直接复制并调整小球颜色、摄像机位置和轨迹函数，自定义标签样式。鼓励喜欢此效果的读者点赞支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

实现

废话不多说，直接上代码，直接复制使用。但在使用代码前，需要下载一些粒子波浪特效的库，直接执行下面命令即可。

npm install three -S
npm install node-sass
npm install sass-loader

代码

<template>
  <div id="iviewBg"></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: "#ffffff",
    },
    //控制波浪的位置
    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"

最低0.47元/天解锁文章

新学期VIP享超值加赠