Is there a solution to add stops when camera is following path using scroll controls

[TomasGonzalez]

I have been experimenting with three.js for a website I’m making.

I came across the spline curve solution in order to make a camera follow a cinematic path, and linked it to the drei’s scroll component in order to make the camera follow a cinematic path relative to the current scroll of the page.

The problem that I’m facing is that I want the camera to have smoothed out stop points, I have already successfully added stop points without the smoothing, by using the range function from the offset object from the Drei’s scroll component and it works just fine.

I’m looking for a way to slow down the camera before it stops. Already tried to change the offset.range value (which is linear) to an exponential value, this partially works it slows down the camera movement until half of the function and after coming to a complete stop it turns around and goes in reverse in the path.

This is basically how I manage to add the stop points.

    const scrollReduction = stops.reduce((acc, value) => {
      const currentRange = scroll.range(value, individualBreakOffset);

      return acc + individualBreakOffset * currentRange;
    }, 0);

    let currentScroll =
      Math.abs(scrollReduction - scroll?.offset) / maximunScrollAmount;

[mwmwmw]

You could try to use an easing function like easeInOutCubic.

This function takes a range between 0 and 1.

function easeInOutCubic(x) {
   return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}

'start' and 'end' are your previous and next breakpoint. You'll need to figure out which two breakpoints you're between. You could get that with a simple filter and lookup of the stops.

start + easeInOutCubic( (currentPosition - start) / (end-start) ) * (end-start)

Here is a demonstration. It's not in R3F, but just drawing the math on a canvas.
Imagine the x axis is time, and the green line on the x axis is a position. More green lines = finer movement.
https://codepen.io/mwmwmw/pen/KKZaKXb/7c2a91cea3aa4c3f05e76e0182cd50e1

This way, you don't need to mess with the scroll. The scrolling can work as always, and let the math handle the smooth movement.

[mwmwmw]

Nah, this idea doesn't quite work.

It just makes the scroll feel like it's broken.

Here is an example.
https://codesandbox.io/s/xenodochial-sky-urqtqf?file=/src/index.js

If you scroll really slowly you'll see what I was going for.