Three.js 挤出二维面，同时绕挤出轴旋转

Question

我希望在挤压过程中旋转形状，以显示绕 Z 轴的“扭曲”效果，如下所示

\n\n

\n\n

和这里

\n\n

\n\n

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

\n\n

var squareShape = new THREE.Shape();\nsquareShape.moveTo(10,0);\nsquareShape.lineTo(0,10);\nsquareShape.lineTo(-10,0);\nsquareShape.lineTo(0,-10);\nsquareShape.lineTo(10,0);\n\n\nvar extrudeSettings={amount:10, bevelEnabled:false};\nvar geometry = new THREE.ExtrudeGeometry( gearShape, extrudeSettings );\n

\n\n

显然，这只会沿着 z 轴直线挤压形状。使用geometry.applyMatrix();似乎不可能将立方体剪切成绕z轴的扭曲。

\n\n

做到这一点的唯一方法可能是在挤压时将某些内容硬编码到 2D 形状的法线、双法线和切线中。我相信答案就在 extrudePath \xe2\x80\x94 THREE.CurvePath 和frames-THREE.TubeGeometry.FrenetFrames 内，但不确定是否有更简单的方法。

\n\n

任何有关此事的帮助将不胜感激！

\n

Answer 1

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

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;
    }