Exploring a new THREE.JS project, I am implementing a mousewheel scroll event to transition from 0 to 1 smoothly.
Nevertheless, my goal is to replicate the momentum effect seen on this website playdoh by merci Michael
So far, here's what I have accomplished:
this.R = 0
mouseWheel(dx, dy) {
if (this.R < 0) {
this.R = 0
return
}
if (this.R > 1) {
this.R = 1
return
}
inertia.update(dy)
this.R += dy / 45500
let clamped = this.clamp(0, 1, this.R);
// UPDATE THREEJS CAMERA POS
this.dolly.cameraPosition = clamped;
this.dolly.lookatPosition = clamped;
this.dolly.update();
}
clamp(min, max, v) {
if (v < min) {
return min;
} else if (v > max) {
return max;
} else {
return v;
}
}
The current implementation functions correctly but lacks the dynamic scrolling behavior observed in the provided example link. Scroll action abruptly stops instead of carrying on with velocity as desired.