Three.js挤出2d面，同时围绕挤出轴旋转

Question

我想在挤压过程中旋转一个形状，以显示关于Z轴的“扭曲”效果，就像这里一样

在这里

我尝试生成这个扭曲的立方体如下：

var squareShape = new THREE.Shape();
squareShape.moveTo(10,0);
squareShape.lineTo(0,10);
squareShape.lineTo(-10,0);
squareShape.lineTo(0,-10);
squareShape.lineTo(10,0);


var extrudeSettings={amount:10, bevelEnabled:false};
var geometry = new THREE.ExtrudeGeometry( gearShape, extrudeSettings );

显然，这只是沿z轴直线挤出形状。使用geometry.applyMatrix（）;

似乎无法将立方体剪切成围绕z轴的扭曲

可能这样做的唯一方法是在2D形状的法线，双法线和切线中进行硬编码。我相信答案在于expanddePath - THREE.CurvePath和frames-THREE.TubeGeometry.FrenetFrames，但不确定是否有更简单的方法。

非常感谢任何有关此事的帮助！

Answer 1

如果您知道顶点创建面的z值，则可以将网格扭曲一定的螺旋角。在这种情况下，如果宽度/ 2乘以某个角度，我们将所有顶点旋转z值

function twistMesh(mesh, helixAngle, width) {
    for (var i = 0; i < mesh.geometry.vertices.length; i++) {
        if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * Math.cos(helixAngle)
                    - mesh.geometry.vertices[i].y * Math.sin(helixAngle);
        var updateY = mesh.geometry.vertices[i].y * Math.cos(helixAngle)
                    + mesh.geometry.vertices[i].x * Math.sin(helixAngle);
        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;
        }  
    }
        return mesh;
   }

你也可以通过......逐渐变细网格。

function taperMesh(mesh, scaleFactor, width) {

     for (var i = 0; i < mesh.geometry.vertices.length; i++) {
       if (mesh.geometry.vertices[i].z == width/2.0) {
        var updateX = mesh.geometry.vertices[i].x * scaleFactor;
        var updateY = mesh.geometry.vertices[i].y * scaleFactor;

        mesh.geometry.vertices[i].x = updateX;
        mesh.geometry.vertices[i].y = updateY;

        }  else {
           }
      }
        return mesh;
    }