I’m trying to implement website similar with this.
When you scroll down/up once, page(also object) will be changed with animation.
I searched google for 3hours, can’t find anything related this technic.
Is there any existed method or solution here?
Thanks.
Just add your transition function to a scroll event listener
Something similar to
window.onscroll = function() {myFunction()}; function myFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { //first transition } else { //next transition } }
Hi!
Maybe this topic will give you some ideas:
Hi, community!
I can’t say that I’ve discovered something unusual. I just want to show to beginners (like me ) the using of .clampLength() method of THREE.Vector3(). It allows to make an interesting effect: morphing the points from one formation to another, having the same constant speed for each vertex, when you know its start and end coordinates.
https://jsfiddle.net/prisoner849/d9ar8j07/
[Constant_speed_of_vertices_2]
P.S. Long ago, I’ve seen a very similar question on SO (though I …
Thanks! It is almost same with my question. Can you explain about using shader or example related that?
Well, implement the idea with clamping in a vertex shader. Start point of a vertex, direction (a normalized vector) and the limit of length. That limit of the length you can pass as a parameter into the clamp()
function:
clamp( currentLength, 0, lengthLimit);
where the current length is direction multiplied by time.
As a first approximation of what to do in shaders
Also, have a look at this reply from another topic:
Here is an example of something I made a few years ago: http://games.clarklavery.com/meshMorpher/index.html
Move your cursor left/right over the page in order to make it work.
The 3d artist started with the same sphere for each model, and by only moving the vertices around, produced the four models. Then you load up the models and use linear interpolation for each vertex of the mesh to position in somewhere in between the first and second model. The example does a bit more complex math than ju…
Very helpful example! So I have to combine your example with addEventListener(‘mousewheel’)