CODEWITHSUNDEEP
javascriptthree.js
anon
anon

Reputation: 634

Mousewheel event - Velocity/Momentum

I'm currently experimenting with a THREE.JS project, and using a mousewheel scroll event to go from 0 to 1.

However, I would like to achieve the same momentum that you see here at this link playdoh by merci Michael

At the moment, this is what I've done so far. 

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;
    }
}

It works, but doesn't achieve the same effect in the example link I sent. I'd like the person to scroll, and have it with some velocity so it continues to scroll more. At the moment, when you scroll, it just stops almost immediately.

Upvotes: 0

Views: 435

Answers (1)

manthrax
manthrax

Reputation: 5026

Perhaps instead of 

this.dolly.cameraPosition = clamped;

something like

this.dolly.cameraPosition += (clamped-this.dolly.cameraPosition)*0.5

instead?

You can change the 0.5 to different values like 0.1 or 0.9 to change the snappiness of the transition.

Upvotes: 1

Related Questions