How can I bend a corner of the plane in three.js

Questions
1

image

I am seeking assistance with bending a PlaneGeometry to achieve a desired shape similar to the one shown in the provided image. I have already attempted using the official NURBS example from the Three.js library (accessible at https://threejs.org/examples/webgl_geometry_nurbs.html),
codes: https://github.com/mrdoob/three.js/blob/b637cbfc83ec819bcc362d0ccdc489213fdb4266/examples/webgl_geometry_nurbs.html
but I am encountering difficulties in understanding how to bend a corner of the geometry. Furthermore, I am interested in animating the bending process for each frame, gradually bending the corner backwards. I would greatly appreciate any suggestions or guidance on how to accomplish this. Thank you sincerely for your assistance!

2

Check out AnimatingBookPages from the collection.

See also ColorWave :

function calculateCoordinates( c, t ) { 
	
	vIdx = 0;

	for ( var j = 0; j < lss; j ++ ) {  // length
			
		for ( var i = 0; i < wss; i ++ ) { // width
			
			// --- calculate here the coordinates according to your wishes ---
			
			x = j / 10 - 2;
			y = c * Math.sin(  2 * Math.PI * j / 100  + t );
			z = i  ;
			
			//----------------------------------------------------------------
			
			xyzSet();
			
			vIdx ++;
			
		}
		
	}
	
 }
1 Like
3

Ah, page turning :slight_smile:

3 Likes