javascript - Three.js 在绕挤压轴旋转的同时挤压二维面

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 轴直线拉伸(stretch)形状。似乎不可能使用 geometry.applyMatrix( ); 将立方体剪切成绕 z 轴的扭曲；

可能做到这一点的唯一方法是在挤压时将某些东西硬编码到二维形状的法线、双法线和切线中。我相信答案在于 extrudePath — THREE.CurvePath 和 frames-THREE.TubeGeometry.FrenetFrames 但不确定是否有更简单的方法。

如有任何帮助，我们将不胜感激!

Answer 1

如果您知道顶点创建面的 z 值，您可以将网格扭曲一定的螺旋 Angular 。在这种情况下，如果 width/2 以一定 Angular 旋转所有具有 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;
    }