Next.js中react-tsparticles六边形预设异常问题求助

问题 #

在最新版Next.js中使用react-tsparticles时，将导出的六边形预设particles.json仅修改fullscreen为false后，绑定到<Particles/>组件出现两个异常：

1. 粒子未沿六边形路径运动，反而呈现类似Hyperspace示例的向自身相对位置移动的效果
2. 粒子画布不遵循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>
    )
}

效果对比 #

• 预期效果：
• 异常效果：
• 其他预设正常效果：

解决方案 #

1. 修复粒子六边形路径运动问题 #

异常核心原因是六边形路径配置丢失或被干扰，需在particles.json中确保以下配置：

• 启用路径运动，指定多边形为6边（六边形）
• 禁用会干扰路径的方向、随机运动参数

修改move配置片段：

"move": {
  "enable": true,
  "speed": 2,
  "direction": "none",
  "random": false,
  "straight": false,
  "outModes": {
    "default": "out"
  },
  "attract": {
    "enable": false
  },
  "path": {
    "enable": true,
    "shape": "polygon",
    "polygon": {
      "sides": 6,
      "radius": 100,
      "rotate": 0
    }
  }
}

2. 修复背景色不遵循CSS的问题 #

将background.color设为透明，让画布继承父元素的CSS背景色：

"background": {
  "color": "transparent"
}

3. 适配非全屏模式的补充配置 #

由于已设置fullscreen: false，需确保画布尺寸配置正确，避免粒子路径偏移：

"size": {
  "mode": "canvas",
  "width": "100%",
  "height": "100%"
}

内容的提问来源于stack exchange，提问作者Douglas Ferreira