⚠️ This lesson is not yet translated in your language, it will be available soon!

Particles are a great way to add life to your scene. They can be used in a variety of ways, such as snow, rain, fire, smoke, or magic effects. They are often used to create atmospheric effects, such as fog, dust, or sparks.

In this lesson, we will dive into different ways to create particles using Threejs and React Three Fiber to create this night snow scene with a starry sky and snowfall effect:

See how the snowflakes fall and the stars twinkle in the sky. ❄️✨

Stars

Our starter code contains this "Low Poly Winter Scene" by EdwiixGG on top of a cube and an animated light source.

Looks nice but we can make it more interesting by adding stars to the sky.

Let's start by adding stars to the sky. The simplest way with React Three Fiber is to use the Stars component from the drei library.

In components/Experience.jsx:

Copy
// ...
import { Stars } from "@react-three/drei";

export const Experience = () => {
  // ...

  return (
    <>
      <Stars />
      {/* ... */}
    </>
  );
};

And voilà, our sky is now filled with glowing lovely stars!

We can play with its parameters such as factor to adjust the size based on the distance or speed to adjust the timing of the fade effect.

Refer to the documentation for all the available parameters.

Let's check how it works under the hood by browsing the source code of the Stars component.

We can see that for rendering the stars they are using points filled with three attributes on the geometry:

• position: to determine each star position
• colors: to determine each star color
• size: to determine each star size

Then a custom ShaderMaterial named StarfieldMaterial is responsible of displaying the points correctly based on those attributes values and the time uniform for the fading effect.

First of all, this approach is great, it's lightweight, and completely processed on the GPU which means you could potentially put a very large number of stars.

But visually I see two things that could be enhanced:

• The stars are represented as squares.
• The fade effect is synced between all the stars resulting in a flashing effect.

As we don't have control over those aspects with the Stars component, let's create our own stars system!

Custom Stars

To have more easily control over the stars we will handle their logic on the CPU side using instancing.

Don't worry if it's not the most optimized way, for a reasonable number of stars it will be fine and much more flexible. We will learn how to handle our particles on the GPU side when we will build our simple VFX engine and when learning TSL later in this chapter.

PS: Instancing is still an efficient way to render a large number of objects with the same geometry as seen in the optimization lesson.

Instances

Let's start by creating our own StarrySky component in a new file components/StarrySky.jsx:

Copy
import { Instance, Instances } from "@react-three/drei";
import { useMemo, useRef } from "react";
import { randFloatSpread } from "three/src/math/MathUtils.js";

export const StarrySky = ({ nbParticles = 1000 }) => {
  const particles = useMemo(
    () =>
      Array.from({ length: nbParticles }, (_, idx) => ({
        position: [
          randFloatSpread(20),
          randFloatSpread(20),
          randFloatSpread(20),
        ],
      })),
    []
  );

  return (
    <Instances range={nbParticles} limit={nbParticles} frustumCulled={false}>
      <planeGeometry args={[1, 1]} />
      <meshBasicMaterial />
      {particles.map((props, i) => (
        <Particle key={i} {...props} />
      ))}
    </Instances>
  );
};

const Particle = ({ position }) => {
  const ref = useRef();

  return <Instance ref={ref} position={position} />;
};

We are creating an InstancedMesh using a plane geometry combined to a mesh basic material.

Thanks to the <Instance /> component from Drei, we are able to create instances of this mesh and to control each particle (instance) individually.

Now let's get rid of the Stars component with our custom one in components/Experience.jsx:

Copy
// ...
import { StarrySky } from "./StarrySky";

export const Experience = () => {
  // ...

  return (
    <>
      <StarrySky />
      {/* ... */}
    </>
  );
};

We now have this chaotic sky:

It's a good starting point!

Let's adjust the size of the stars. In the useMemo responsible of setting the particles positions, we can add a size attribute:

Copy
import { randFloat, randFloatSpread } from "three/src/math/MathUtils.js";

// ...

const particles = useMemo(
  () =>
    Array.from({ length: nbParticles }, (_, idx) => ({
      position: [randFloatSpread(20), randFloatSpread(20), randFloatSpread(20)],
      size: randFloat(0.1, 0.25),
    })),
  []
);

And in the Particle component, we can pass this size attribute to the Instance component:

Copy
const Particle = ({ position, size }) => {
  const ref = useRef();

  return <Instance ref={ref} position={position} scale={size} />;
};

Now it's better, we have stars of different sizes:

But we have a problem, the stars are positioned between -20 to 20 using randFloatSpread(20) but we want the stars to be positioned far away in the sky.

To do this, let's keep the z always at 0 and adjust the x position to be between 5 and 15.

Our stars will be positioned randomly between 5 and 15 on the x axis.

And to be all around the center we rotate the y position between 0 and 2 * Math.PI.

The center will never contain stars and the stars will be spread in all directions.

In the useMemo responsible of setting the particles positions, we can adjust the position attribute and add a rotation attribute:

Copy
const particles = useMemo(
  () =>
    Array.from({ length: nbParticles }, (_, idx) => ({
      position: [randFloat(5, 15), randFloatSpread(20), 0],
      rotation: [0, randFloat(0, Math.PI * 2), 0],
      size: randFloat(0.1, 0.25),
    })),
  []
);