tsParticles 六边形预设无法正常工作

Question

到目前为止，我正在尝试将 tsParticles （特别是 react-tsarticles）与最新版本的 Next.js 一起使用，但是当我复制并粘贴 molecular.json 时，将其绑定到

<Particles/>

组件它的行为不符合预期。所有粒子都向前移动其相对位置（与Hyperspace示例非常相似），而不是遵循六边形路径。

发生的另一个奇怪的问题是不遵循 CSS 的背景颜色（它也适用于其他预设）

TSX 文件和 css 似乎不是主要问题，因为所有其他预设和示例都按预期工作。

如何设置

particles.json

文件以产生与上面所示的六边形预设相同的效果？

我的组件：

'use client'

import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import type { Container, Engine } from "tsparticles-engine";

export function ParticleContainer() {
    const particlesInit = useCallback(async (engine: Engine) => {
        console.log(engine);
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            canvasClassName="particle-canvas"
            url="/particles.json"
        />
    );
}

我的组件用例：

import { ParticleContainer } from "../components/particles-container"

export default function About() {
    return (
        <main>
            <div id="carousel-container" className="carousel-container">
                <div id="home-carousel" className="">
                    <div className="carousel-inner">
                        <ParticleContainer/>
                        <div className="carousel-item active">
                            <div className="carousel-caption ">
                                <div className="text-center">
                                    <span className="align-middle">
                                        <h2>My Title</h2>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <section>
                <div className="container col-xxl-8 px-4 py-5">
                    <div className="">
                        <p className="main-text">
                            Content ... Lorem Ipsum... 
                        </p>
                    </div>
                </div>
            </section>
        </main>
    )
}

渲染页面与其他预设配合良好的示例：

预期的粒子行为：

导出六边形预设选项提供的当前 json（在我的例子中，我只是将全屏切换为 false）： https://pastebin.com/b8qnJyyG

错误行为：

Answer 1

在 GitHub 上打开一个问题后，有人提出了另一个与已解决的问题相关相关的问题。 Hexagon 模板需要额外的包才能工作，即

tsparticles-path-polygon

才能工作。安装并初始化后，模板就可以工作了。