Smooth Scroll Control

🌵 Needle Engine
1

Hey There!
I’m trying to implement a similar Navigation as this page is using: https://www.joshuas.world. As of this point, i got my camera rotating around the middle of my scene on mouse scroll. My problem is that this isn’t really Smooth right now, but feels a bit choppy.
Any Help would be appreciated!
Cheers :slightly_smiling_face:

image.png
image.png884×373 21.5 KB

Original Post on Discord

by user 263717937473519619

2

Hi, what you want to do is save the scroll target value/angle in a variable and use e.g. the update function to interpolate to that value:


private _targetAngle : number = 0;
private _currentAngle : number = 0;

start() {
  window.addEventListener(..., evt => {
    this._targetAngle += evt.deltaY;
  }
} 

update() {
  if(this.char){
     this._currentAngle = lerp(this._currentAngle, this._targetAngle, this.context.time.deltaTime);
    this.char.position.applyAxisAngle(direction.....
  }
}

Something like the above (altough applyAxisAngle might not what you want since the code I sent does store the full angle and i think applyAxisAngle just takes a delta)

3 
private _deltaSum: number = 0;
private _currentAngle : number = 0;

start() {
  window.addEventListener(..., evt => {
    this._deltaSum += evt.deltaY;
  }
} 

update() {
  if(this.char){
     
     const t = lerp(0, this._deltaSum, this.context.time.deltaTime);
    this._deltaSum -= t;
    this.char.position.applyAxisAngle(direction, t);
  }
}

^ alternative that might work with applyAxisAngle

4

That did the trick! Thank you so much marcel :blobaww:

by user 263717937473519619