Mouse wheel scrolling pane/canvas up/down with easing

Questions
1

Hello,

please take a look this website http://www.revolution.pn/pillars-of-panem (click the the button in the middle of the page, to load the mouse wheel functionality and the content in order to scroll) I would like an example to start similar scrolling effect with mouse wheel.

in theory this developer did a fullscreen threejs application (i can do it no problem) he hide the window scrollbars (also I can do) and he build a big canvas? (I think) and he enable mouse wheel function on it (also i can do). But how he moves it like that while scrolling?

Thanks in advance and have a nice day.

2

Hello,

While accessing the site, I am getting

Uncaught TypeError: Cannot read property 'length' of undefined

3

I am sorry about that, I haven’t develop this website (maybe there are errors, I have run it with my browser console off).

Actually I am looking for fullscreen page scroller through ThreeJS, I mean a long in height for example CubeGeometry (or anything else that can be light to run) full browser in width object (in center of the browser) that I can scroll up/down with mouse wheel.

Screenshot https://screenshot.net/evy9kiq this wall scrolls up/down with mouse wheel.

Thanks in advance and have a nice day.

4

Re Bob,

I was able to run the site above on firefox dev. and now I see the effect you are trying to achieve.

Have you looked at this example yet? https://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer

The example scrolls on the z-axis (depth buffer), you will need to scroll on y-axis, but it can be a good start for your purpose.

1 Like
5

You are awesome, yes, this helps a lot. Thank you.

Have a nice day :slight_smile:

6

Thanks Bob for the cheers! The real awesome people are the example authors: @mrdoob, @jbaicoianu, @WestLangley and @TristanVALCKE :wink:

1 Like