- 2019-05-17 at 8:00 pm #14872briceNewbie
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 !2019-05-19 at 8:09 am #14879Yuri KovelenovDeveloper2019-05-19 at 6:29 pm #14883briceNewbie
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 update2019-05-23 at 6:38 pm #14996CrunchLicensee
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
Attachments:You must be logged in to view attached files.2020-05-22 at 6:19 pm #27911doehlmaLicensee
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 ..
Marcus2020-06-11 at 11:22 pm #28752
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.
Attachments:You must be logged in to view attached files.2020-06-12 at 2:41 am #28761
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.
2020-06-12 at 7:57 am #28772
- This reply was modified 3 weeks, 3 days ago by GlifTek.
Is this maybe something you could integrate as a sample in verge3D in general?
Cheers.2020-06-30 at 6:30 pm #294542020-07-01 at 4:25 am #29461
@gliftek Did you find a way to reproduce the effect yet?
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.2020-07-02 at 6:02 am #29505
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.2020-07-02 at 9:07 am #29521kubuzLicensee
Interesting topic, keep me in the loop.2020-07-04 at 4:36 pm #29641
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.
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 –
- You must be logged in to reply to this topic.