How to use Nebula or any other Particle Engine with React Three Fiber?

[dulre159]

Hi i need to use a particle system to create an explosion like animation.
I have found these two projects:
https://three-nebula.org/examples/gravity
http://stemkoski.github.io/Three.js/Particle-Engine.html

I have tried to integrate them in r3f but i don't know how to :(
Can someone help me out? Is there any simpler alternative?

[Styx971]

Hi @dulre159 here is what i did for my project using typescript
I started from this codepen example : https://codesandbox.io/s/three-nebula-quickstart-kz6uv?file=/src/index.js:281-287

First i declared a Singleton NebulaEngine Class : NebulaEngine.ts

import * as THREE from "three";
import Nebula, { SpriteRenderer } from "three-nebula";

export type NebulaSystem = {
    update: Function
}

class NebulaEngine {

    update(nebulaSystem : NebulaSystem) {
       nebulaSystem.update();
    }

    async loadSystem(json: JSON, scene: THREE.Scene) : Promise<NebulaSystem> {
        const loaded = await Nebula.fromJSONAsync(json, THREE, undefined);
        const nebulaRenderer = new SpriteRenderer(scene, THREE);
        return loaded.addRenderer(nebulaRenderer);
    }
}

export default new NebulaEngine();

Create a declaration file since i did not find any @types/three-nebula package :

nebula.d.ts :

declare module 'three-nebula';

Then a BlueFlame.tsx :

import React, {useEffect, useState} from "react";
import {useFrame, useThree} from "@react-three/fiber";
import NebulaEngine, {NebulaSystem} from "./engine/NebulaEngine";
import json from "./engine/jsonSystems/blueFlame.json"

interface Props {

}
const BlueFlame : React.FC<Props> = (props: Props) => {
    const {scene} = useThree();
    const [particleSystem, setParticleSystem] = useState<NebulaSystem>();

    useFrame(() => {
        if (particleSystem) {
            NebulaEngine.update(particleSystem);
        }
    })

    useEffect(() => {
        NebulaEngine.loadSystem(json as unknown as JSON, scene).then(nebulaSystem => {
            setParticleSystem(nebulaSystem);
        });
    }, [])

    return (
       <>
       </>
    );
}

export default BlueFlame;

And finally used it in my App.tsx :

 <Canvas>
    <OrbitControls />
    <PerspectiveCamera makeDefault fov={75} position={[0, 5, -30]}/>
    <BlueFlame/>
</Canvas>

Hope this helps !

[dulre159]

Hi thanks you for providing this code but i ended up with a custom made solution. This might help others. I'll try it when i have some time.

[deepansh96]

Thanks this helped me a lot!!