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
    Posts
  • #14872
    Avatarbrice
    Newbie

    Hello everybody,

    I surfed on the web and found this website dedicated to 3D WebGL :
    https://naker.io/scenes/caval.html

    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 !

    #14879
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    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 | 新浪微博

    #14883
    Avatarbrice
    Newbie

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

    #14996
    CrunchCrunch
    Licensee

    Hey brice,
    It’s actually pretty simple, see my post and puzzle screen shot here.
    https://www.soft8soft.com/topic/verge3d-2-12-1-maintenance-update/#post-14994

    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.

    https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:04931cc0ad/applications/mousewheel/mousewheel.html

    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

    Attachments:
    You must be logged in to view attached files.
    #27911
    Avatardoehlma
    Licensee

    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,
    Marcus

    #28752
    Avatarwurstseppl
    Newbie

    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.

    Cheers

    Attachments:
    You must be logged in to view attached files.
    #28761
    GlifTekGlifTek
    Licensee

    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.
    :good:

    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.
    #28772
    Avatarwurstseppl
    Newbie

    @yuri
    Is this maybe something you could integrate as a sample in verge3D in general?
    Cheers.

    #29454
    Avatarwurstseppl
    Newbie

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

    #29461
    GlifTekGlifTek
    Licensee

    @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.

    #29505
    GlifTekGlifTek
    Licensee

    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.

    #29521
    kubuzkubuz
    Licensee

    Interesting topic, keep me in the loop.

    #29641
    GlifTekGlifTek
    Licensee

    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

    :wacko:

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