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

Let's dive into the world of trails! Trails are a great way to add a sense of motion to your scene. They can be used to create a variety of effects, such as light trails, smoke trails, or even the trail of a moving object.

Here is the final project we will build together:

We will start by creating a simple trail effect using a custom trail cursor. Then we will explore the Trail component from drei to make the comets you saw in the preview.

Starter project

The starter project contains many things we have already covered in previous lessons:

• The ScrollControls component to handle the scroll and the associated camera movement and animations. If you need a refresher, you can check the dedicated Scroll lesson.
• Postprocessing effects like Bloom and Vignette, with a lovely addition the GodRays effect. Checkout the Post processing lesson if you need a refresher.
• The <StarrySky /> we built in the Particles lesson with adjusted parameters.

In addition, I used Tailwind CSS to quickly design the UI. If you are not familiar with Tailwind CSS, you can skip the UI part and focus on the Threejs part.

The WawaCoin and WawaCard models are made in-house and are available in the starter project. I used the MeshTransmissionMaterial from drei to create this futuristic look.

Feel free to transform the scene to your liking. You can freely reuse any part of the project in your own projects.

I forgot to mention, but the content of the website is purely fictional. I'm not launching a new cryptocurrency. (Yet? 👀)

Custom trail cursor

Let's start by creating a simple trail effect following the cursor.

Create a new components/Cursor.jsx file and add the following code:

Copy
import { useFrame } from "@react-three/fiber";
import { useControls } from "leva";
import { useRef } from "react";
export const Cursor = () => {
  const { color, intensity, opacity, size } = useControls("Cursor", {
    size: { value: 0.2, min: 0.1, max: 3, step: 0.01 },
    color: "#dfbcff",
    intensity: { value: 4.6, min: 1, max: 10, step: 0.1 },
    opacity: { value: 0.5, min: 0, max: 1, step: 0.01 },
  });
  const target = useRef();
  useFrame(({ clock }) => {
    if (target.current) {
      const elapsed = clock.getElapsedTime();
      target.current.position.x = Math.sin(elapsed) * 5;
      target.current.position.y = Math.cos(elapsed * 2) * 4;
      target.current.position.z = Math.sin(elapsed * 4) * 10;
    }
  });
  return (
    <>
      <group ref={target}>
        <mesh>
          <sphereGeometry args={[size / 2, 32, 32]} />
          <meshStandardMaterial
            color={color}
            transparent
            opacity={opacity}
            emissive={color}
            emissiveIntensity={intensity}
          />
        </mesh>
      </group>
    </>
  );
};

It's a simple sphere that follows a sine wave. You can adjust the size, color, intensity, and opacity of the cursor using the Leva controls.

For now we use a fixed movement, it will simplify the visualisation of the trail. We will replace it with the mouse position later.

Add the Cursor component to the Experience component:

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

export const Experience = () => {
  // ...
  return (
    <>
      <Cursor />
      {/* ... */}
    </>
  );
};

// ...

We can see a moving sphere, it will be the target of our trail.

SimpleTrail component

The group is the target our trail will follow. We will create a new component components/SimpleTrail.jsx to create the trail effect:

Copy
import { useRef } from "react";
import * as THREE from "three";

export function SimpleTrail({
  target = null,
  color = "#ffffff",
  intensity = 6,
  numPoints = 20,
  height = 0.42,
  minDistance = 0.1,
  opacity = 0.5,
  duration = 20,
}) {
  const mesh = useRef();

  return (
    <>
      <mesh ref={mesh}>
        <planeGeometry args={[1, 1, 1, numPoints - 1]} />
        <meshBasicMaterial
          color={color}
          side={THREE.DoubleSide}
          transparent={true}
          opacity={opacity}
          depthWrite={false}
        />
      </mesh>
    </>
  );
}

The parameters are the following:

• target: the ref of the target to follow.
• color: the color of the trail.
• intensity: the emissive intensity of the trail.
• numPoints: the number of positions we will store in the trail. (The higher the number, the longer the trail).
• height: the height of the trail.
• minDistance: the minimum distance between two points.
• opacity: the opacity of the trail.
• duration: the time before the trail starts to fade from its end.

No worries if you don't understand all the parameters yet. We will explain them while we implement the trail.

Import the SimpleTrail component in the Cursor component:

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

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

  return (
    <>
      <group ref={target}>{/* ... */}</group>
      <SimpleTrail
        target={target}
        color={color}
        intensity={intensity}
        opacity={opacity}
        height={size}
      />
    </>
  );
};

The mesh is composed of a <planeGeometry /> with a number of segments equal to numPoints. We will update the position of each segment to follow the target.

Visually as our plane size is 1x1, we can see a square, but because of the number of segments, we will be able to manipulate the vertices to create the trail effect.

Let's see side by side a plane with one segment and a plane with 20 segments:

Copy
<group position-x={5}>
  <mesh position-x={4} scale-y={5}>
    <planeGeometry args={[1, 1, 1, numPoints - 1]} />
    <meshBasicMaterial color={"red"} wireframe />
  </mesh>
  <mesh position-x={2} scale-y={5}>
    <planeGeometry args={[1, 1, 1, 1]} />
    <meshBasicMaterial color={"red"} wireframe />
  </mesh>
</group>

This code is for visualisation purposes only. You can remove it after understanding the concept.

We scale them on the y-axis to see the difference in the number of segments.

You can see the left plane only has 4 vertices while the right plane has many more. We will manipulate these vertices to build the trail effect.

We could use a line instead of a plane to create the trail, but using a plane allows us to create an interesting effect (Works better for wind for example).

The Trail component from drei uses a line, we don't want to recode the same thing.

Manipulating the vertices

We will update the position of the vertices of the plane to follow the target over time.

First we will need to store all the positions of the target in an array. We will use a ref to store the positions.

Copy
// ...
import * as THREE from "three";

export function SimpleTrail(
  {
    // ...
  }
) {
  const mesh = useRef();
  const positions = useRef(
    new Array(numPoints).fill(new THREE.Vector3(0, 0, 0))
  );
  // ...
}

This array will always have a length of numPoints and will store the positions of the target.

When the target moves, we will add the new position to the front of the array, pushing the other positions to the back.

To implement this, we will use the useFrame hook to update the position of the vertices.

Copy
// ...
import { useFrame } from "@react-three/fiber";

export function SimpleTrail(
  {
    // ...
  }
) {
  // ...

  useFrame(() => {
    if (!mesh.current || !target?.current) {
      return;
    }

    const curPoint = target.current.position;
    const lastPoint = positions.current[0];

    const distanceToLastPoint = lastPoint.distanceTo(target.current.position);

    if (distanceToLastPoint > minDistance) {
      positions.current.unshift(curPoint.clone());
      positions.current.pop();
    }
  });

  // ...
}

First, we calculate the distance between the last point and the current point. If the distance is greater than minDistance, we add the current point to the front of the array with unshift and remove the last point with pop.

Now we need to update the position of the vertices of the plane to follow the positions of the target.