Vue dynamic particle background effect - particles, threejs

1. The first type

It is relatively simple and convenient to import using script tags, but the effect is relatively single, and it is the background on the body, and Vue is a single-page application, so after a page is imported, other pages will also have this effect

  mounted() {
    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    
    oScript.color='	220,20,60'
    oScript.opacity='0.9'
    oScript.src = 'https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js';
    document.body.appendChild(oScript);
}

Two, the second

Introduce the particles plugin

  页面部分
<div id="particles"  ></div>


js部分
mounted() {
    this.$nextTick(()=>{
       particlesJS.load('particles','../../static/app.json');
    })
}


app.json文件放最后了

Three, the third

Introduce the vue-particles plugin

页面部分
<vue-particles
  class="aa"
    color="#292929"
    :particleOpacity="1"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="2"
    linesColor="#292929"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.8"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
  >

</vue-particles>


js部分（main文件中）
import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

Four, the fourth

Use threejs to simulate particle dynamic effects

ps: app.json file (the second type)

app.json文件
{
  "particles": {
    "number": {
      "value": 60,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": ["#344d7b","#7A378B","#551A8B"]
    },
    "shape": {
      "type": "star",
      "stroke": {
        "width": 3,
        "color": "#fff"
      },
      "polygon": {
        "nb_sides": 5
      }
    },
    "opacity": {
      "value": 1,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#4381bd",
      "opacity": 0.6,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 4,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 100,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "Window",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}