Javascript 在Three.js几何体中旋转面

嗨，我想用threejs做一个扭转变形。我有一个圆柱体，我想旋转它的一端，让另一端固定，这样我可以重新创建这个效果

我所拥有的：

我想要的是：

我想知道的是，是否有一个函数可以用来对几何体进行所需的修改，我已经尝试过了，但没有找到任何函数

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 100;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.CylinderGeometry(50, 50, 1000, 20);
var material = new THREE.MeshBasicMaterial({wireframe: true});
var cylinder = new THREE.Mesh( geometry, material );
cylinder.rotation.z = Math.PI/2;
scene.add( cylinder );

---

网格边不能弯曲。它必须是模拟的。我只是在想，实际上你会想要很多无形的圆柱体像盘子一样排成一行。圆柱体的每个侧面通过一条线连接到下一个圆柱体的相应侧面。可以使用面法线查找侧面。然后，可以旋转直线中的任何圆柱体，并设置一个规则，说明如何沿任一方向沿圆柱体直线传播旋转值。挤压属性可以通过连接线中心点创建的半径缩减进行插值。您必须自己编写修改原始几何体顶点和法线的函数。或者，可以创建自定义的

着色器材质

，该材质修改顶点着色器中的几何体。