Beginner to Three.js looking for guidance on working with the vertices of a mesh

Questions
1

I am trying out Three.js to code a magazine where the pages can be flipped.

However I am having some difficulties figuring out how to work in Three.js.

I animated the top left and bottom right vertices of a PlaneGeometry to follow a bezier curve. The top vertice is animated slower than the bottom vertice to make the PlaneGeometry bend. However this is only working while the the PlaneGeometry consists of four vertices, one for each corner. This is too low a poly count to make the animation look realistic. How would you go about making an animation on a mesh with multiple vertices? are there any helper methods I can use to make an animation like this or do I need to make the calculation for every vertice on the mesh?

In a perfect world I might even use a fragment shader but I have no previous knowledge of working with these and the examples I have found seem quite advanced.

An example of how far I got using the current method can be found here:

I am looking for any input on the way this example has been set up. Thank you very much!

2

Hi!
Seems you’re looking for bilinear interpolation:
https://jsfiddle.net/prisoner849/311z5ceo/
Keep in mind, it’s just a concept, not the ultimate solution, that was written years ago :slight_smile:

3

Thank you very much!

This definitely looks promising will give it a shot.

4

I re-wrote it now and put the logics of interpolation to the vertex shader of a material.
It takes an array of 4 vectors in a uniform for control points

[0]--[1]
 |    |
[2]--[3]

https://codepen.io/prisoner849/pen/NVVJBW

BilinearInterpolationVS
BilinearInterpolationVS.png720×325 110 KB

1 Like