在 React Particle 中添加 TSParticles 参数

问题描述

我正在尝试复制 ts 粒子参数以在 React 粒子中使用。我使用了在 tsparticles 中工作的相同参数，但在 React 中它没有显示出来。 以下是 TsParticle 和 React Particle 的以下配置参数。

TSP 粒子

particles: {
    number: { value: 10,density: { enable: true,value_area: 9999999 } },color: { value: "#ffffff" },shape: {
      type: "square",stroke: { width: 0,color: "#000000" },image: { src: "img/github.svg",width: 50,height: 50 }
    },opacity: {
      value: 1,random: true,anim: { enable: true,speed: 1,opacity_min: 0,sync: false }
    },size: {
      value: 3,anim: { enable: false,speed: 4,size_min: 0.3,line_linked: {
      enable: false,distance: 150,color: "#ffffff",opacity: 0.4,width: 1
    },move: {
      enable: true,speed: 0.5,direction: "bottom-right",straight: false,out_mode: "out",bounce: false,attract: { enable: false,rotateX: 600,rotateY: 600 }
    }
  },interactivity: {
    detect_on: "canvas",events: {
      resize: true
    },modes: {
      grab: { distance: 191.80819180819182,line_linked: { opacity: 1 } },bubble: { distance: 250,size: 0,duration: 2,opacity: 0,speed: 3 },repulse: { distance: 695.3046953046953,duration: 0.4 },push: { particles_nb: 4 },remove: { particles_nb: 2 }
    }
  },

反应粒子

particles: {
      number: { value: 10,value_area: 99999 } },shape: {
        type: "square",height: 50 }
      },opacity: {
        value: 1,sync: false }
      },size: {
        value: 3,move: {
        enable: true,direction: "top-left",rotateY: 600 }
      },interactivity: {
        detect_on: "canvas",events: {
          resize: true
        }
      },},

TsParticles 和 React Particles 的链接

TSParticle

React Particle

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）