Hi everyone,
I am new to this 3d Web development and was wondering how this corn revolution website is working ? Is it layers of plane ? or an sphere rotating on scroll ? “I am confusion”. if anyone could elaborate or give me a working idea would be really helpful.
Thanks in advance.
You can read about it here:
4 Likes
Yuri made a video about creating corn revolution’s text effect in three js. You can check that too for rendering text in three js using shader and adding animation
3 Likes
This tells alot, Thanks
But I am still confused about the scroll part, how is scroll giving out feel of parallax and layers.
Thats gonna go way above my head RN ,Thanks.
For scrolling, you can use the document.body.onscroll event to work out some properties that you can then use to trigger other things.
eg, you can set the current time of an animation, so when you scroll you update which keyframe the animation is at.
So in the cornrevolution website, some parts of the animation will be pre created using blender or other program good for this purpose, and then the current frame is set by using the scroll event.
There are many libraries that offer to help you use scroll events for animations in a html document.
I have created a very simple example that show you some of the basics that you can write manually from scratch instead.
I do agree that they are animating on scroll but the fact that either they are changing scene on this
intersection or they are using layers of plane is what confusing me.
It’s a pretty advanced technique. They’re rendering different scenes to different textures, then creating these transitions with the 2 textures in a custom post-processing effect. You could look at this example for the source-code of something similar.
2 Likes
Not as simple as I thought but this is helpful, Thankyou soo much.
So they did something like this horizontally.
Such a shame, they took down the Behind the Corn Revolution | Pioneer® Seeds website, and replaced it with low-quality screenshots. It was beautiful while it lasted :’(