如何在nextjs上设置粒子背景？

Question

我想仅在 Web 应用程序的一页上设置粒子背景。我使用了以下代码：

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";

const particlesOptions = {
    background: {
      color: {
        value: "transparent",
      },
    },
    fpsLimit: 120,
    interactivity: {
      events: {
        onClick: {
          enable: false,
          mode: "push",
        },
        onHover: {
          enable: false,
          mode: "repulse",
        },
        resize: true,
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.8,
          size: 40,
        },
        push: {
          quantity: 4,
        },
        repulse: {
          distance: 200,
          duration: 0.4,
        },
      },
    },
    fullScreen: {
      enable: false,
      zIndex: 0
    },
    particles: {
      color: {
        value: "#ffffff",
      },
      links: {
        color: "#ffffff",
        distance: 150,
        enable: false,
        opacity: 0.5,
        width: 1,
      },
      collisions: {
        enable: false,
      },
      move: {
        direction: "top",
        enable: true,
        outMode: "out",
        random: false,
        speed: 3,
        straight: false,
      },
      number: {
        density: {
          enable: true,
          area: 800,
        },
        value: 30,
      },
      opacity: {
        value: 0.9,
      },
      shape: {
        type: "edge",
      },
      size: {
        random: true,
        value: 3,
      },
    },
  detectRetina: true,
}

const Page = () => {
    return (
        <div className={styles.page}>
          <Particles className={styles.particles} options={particlesOptions} />
        </div>
    );
};

export default Page;

该页面有 100vh (styles.page)，我尝试为 Particles 组件设置一个 className，如下所示：

.particles {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
 }

但它不显示粒子，背景为红色，粒子设置为白色。我还尝试以这种方式设置粒子组件：

const Page = () => {
    return (
        <>
            <Particles className={styles.particles} options={particlesOptions} />
            <div className={styles.page}>
            </div>
        </>
    );
};

但这仍然行不通。我也尝试过将高度和宽度设置为 100%。请问，有什么办法可以实现这个功能吗？

Answer 1

我可能已经太晚了，但我希望这会对某人有所帮助。

我在 Next.js 上遇到了同样的问题，并且能够按照此处的文档使其正常工作

基本上，您必须添加主tsparticles包并使用其中的导出函数来loadFull加载粒子。

例如，这就是它的样子。

import styles from "../styles/Page.module.css";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

const options = {
    //options
};

const Page = () => {
    const particlesInit = async (main: Engine) => {
    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
};

    return (
        <div className={styles.page}>
            <Particles className={styles.particles} init={particlesInit} options={particlesOptions} />
        </div>
    );

};

export default Page;

免责声明：代码引用自文档。

编辑：似乎文档已移至此处