We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Nice and smooth camera/mouse wheel effect

Home Forums General Questions Nice and smooth camera/mouse wheel effect

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #14872

    Hello everybody,

    I surfed on the web and found this website dedicated to 3D WebGL :

    What do you think about this nice mouse wheel scroll effect coupled with a bottom screen progress bar, personnaly I think it’s pretty well presented. Is it possible (simple?) with verge3D to play animation’s frames with scroll events ?

    cordially !

    Yuri KovelenovYuri Kovelenov


    We haven’t exposed the deltaY property in the get event property puzzle but it will be there in the next Verge3D update. :)

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博


    Hi Yuri,
    deltaY property ? …it sounds complicated ;-)
    In this demo, I am especially impressed by the smooth transition between camera key frames when the user scroll. It’s a good thing for V3D that you expect this kind of features/effect in the next update ;-)


    Hey brice,
    It’s actually pretty simple, see my post and puzzle screen shot here.

    I created a simple 240 frame camera animation (with keyframe every 40 frames) and gave the user the option to activate each of the 6 segments of the animation forward or backwards depending on scrolling up or down. Basically vey similar to the example you posted.

    I also put an option box where you can change things a bit to where you your scroll wheel will move through the animation frame by frame.


    Observations: the default option, scrolling to activate different segments of animation (I had a keyframe every 40 frames) plays rather choppy the first time through but then gets smoother second time around. I remember reading an old thread about ‘prerendering’ onload so the animation plays smoother first time through. Anyone familiar with this please provide your input.

    The second option, scrolling through 1 frame at a time, has very jerky playback.
    I think now the reason for that might be how I setup the animation (i am not very good at blender or animations in general). I added a ‘track to’ camera constraint (fyi, the camera mode was set to no-controls) to an empty to help keep the camera looking in a general direction as moved it through the scene dropping the occasion keyframe every 40 frames. I never removed the track to constraint. I would imagine that was causing some of the jerky movement. I will create another example but this time ‘bake’ the animation and remove all constraints before exporting.

    source puzzles attached

    You must be logged in to view attached files.

    Hello Crunch,

    I´m since some month Blender user and also Verge3D….

    I have actual a camera animation in Blender 2.82.. BUT I am not able to
    transfer and build it up in Verge3D :-(

    If I send you the file.. is it possibe that you support me with this issue ?

    I hope the best on your answer ..

    Best regards,


    Hi Guys,

    I am new to Verge3D and a designer and no coder. But I am also looking for an effect similar to naker.io
    I tried some stuff and what I managed to create is an animation starting by mouse wheel scroll, but I was not able to manage to scroll the opposite direction. Also I am very interested in the camera moving effect like you can see at naker.io – I mean the camera moving a littel by moving the cursor over the screen.
    And what I am wondering is: how can I implement a WebGl-App like this with scroll events and combine them with scrolling text blocks above.
    Is somebody around here who can write me a kind of a template?

    Many thanks in advance.


    You must be logged in to view attached files.

    I’m trying the same thing right now.
    I think throttling the rate of scroll by computing a variable from the deltaY then applying it might work. That’s what I’m trying.

    Cool tho, I’ve never tried the “change variable by” with anything except a number like the puzzle is in the menu.
    Gotta mess with that.

    If I make any progress, I’ll post here.

    Edit, I did make a smooth scroll earlier by using the animate puzzle with the deltaY.

    • This reply was modified 3 weeks, 3 days ago by GlifTekGlifTek.

    Is this maybe something you could integrate as a sample in verge3D in general?


    Did you find a way to reproduce the effect yet? :)


    @gliftek Did you find a way to reproduce the effect yet? :)

    Kind of.
    Download this project Gliftek Examples Color Levels COLOR RAMP

    Check out the PROCESS_MOUSEWHEEL_DELTA_Y procedure.

    If you play with the last value in the equation around .5-1.0 you can change the resolution of the scroll.

    I’m trying another way to average a certain msec times worth of scroll.


    Working on this…

    I’ll update my scroll wheel setup.
    None of that should be inside the wheel html puzzle. Gotta normalize its input to 1 or -1 then go from there in an external procedure(function) mousewheel input varies way too much from browser to browser and OS to OS, but mostly, OS mouse input settings.

    I’ll post when I have a working version.


    Interesting topic, keep me in the loop.


    Interesting topic, keep me in the loop.

    yeah.. this stuff is bonkers.
    There’s just WAY too many in-congruencies involved in calculating something that’s across-the board going to work for everyone.

    perfect quote summing it up…(albeit 2016′ things still haven’t changed..)

    tl;dr**: Calculating mouse wheel value across browsers is a real pain in the ass. Avoid it as long as you can.

    link – Developing for The Real Web – Mouse Wheel Programming

    This is concerning raw nilla JS.
    There’s probably something for it in Vue, React, Angular ecosystems now, however not something I have the time to spend days experimenting with. At least not now.

    something interesting to play with that might help someone –
    Normalized WheelDelta JavaScript


Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.