How would I go about making something like this?

Questions
,
1

How would I make something like this?

https://imgur.com/OrwSCHO
https://youtu.be/633x6HwnGPE?t=135 (2:15 - 2:32)

The website is no longer available (http://ftrctzn.com/) and I can’t seem to find anything related to its creation.
I have no idea where to begin and what to search for.
Steps, instructions, explanations, source code… anything helps!
Thanks in advance!

2

The idea is to have a grid-like geometry like in this example and then use vertex displacement in order to animate the vertices according to user input. The animation can be computed on the fly in the vertex shader or by using morph target animation.

I suggest you take your time and study the related topics since it requires intermediate three.js/computer graphics skills to implement something like shown in the video.

3

heres a basic template: https://codesandbox.io/s/youthful-mccarthy-rrnf0?file=/src/Terrain.js

there’s a lot you can do now, change the animation, add vertex colors etc.

1 Like
4

And for a grid of quads you can use:

1 Like
5

Thank you guys!
How would I make the waves animate on all four sides but not in the center like what ftrctzn has created (like a cave - hollow center with wave movement on the sides).
Would I have to use seperate 4 planes on each side or use one plane standing vertically?
Hope that makes sense…