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);
//transform linear movement into exponential.
//const scrollSmoothOffset =
//(Math.pow(breakingSmoothing, currentRange) - 1) /
//(breakingSmoothing - 1);
return acc + individualBreakOffset * currentRange;
}, 0);
let currentScroll =
Math.abs(scrollReduction - scroll?.offset) / maximunScrollAmount;
Please let me know if you need any information.