Three.js - 沿法线挤出旋转输出网格

Question

我有一个只有2个面的PlaneGeometry（图中的红色面）。我正尝试使用以下函数将其中一个沿其法线挤出：

function extrude( mesh, amount ) {

var geometry = mesh.geometry;

//execute only on the first face
for( var f = 0; f < geometry.faces.length -1; f++){

    var face = geometry.faces[ f ];
    var f_normal = face.normal;

    //This is the vertex used by the extrusion path//
    var vertex = geometry.vertices[ face.a ]; 

    //create extrusion path
    var spline = new THREE.SplineCurve3( [
        new THREE.Vector3( vertex.x, vertex.y, vertex.z ),
        new THREE.Vector3( vertex.x + (f_normal.x * amount), vertex.y + (f_normal.y * amount), vertex.z + (f_normal.z * amount) )
        ] );

    //get vertices
    var v1 = geometry.vertices[ face.a ];
    var v2 = geometry.vertices[ face.b ];
    var v3 = geometry.vertices[ face.c ];

    //draw shape
    var shape = new THREE.Shape();

    shape.moveTo( v1.x, v1.y, v1.z );

    shape.lineTo( v2.x, v2.y, v2.z );

    shape.lineTo( v3.x, v3.y, v3.z );

    shape.lineTo( v1.x, v1.y, v1.z );

    //extrude it

    var extrudeSettings = { amount: amount, extrudePath: spline, steps: 1, bevelEnabled: false };

    var extrudedGeo = new THREE.ExtrudeGeometry( shape, extrudeSettings );


    var material = new THREE.MeshPhongMaterial( {color: 0x00ff00, wireframe: true} );

    //create new mesh
    var mesh = new THREE.Mesh( extrudedGeo, material);

    scene.add( mesh);


}

}

它沿着它的法线完美地挤出，但是挤出的网格似乎是旋转的（我使用face.a顶点作为挤出路径，但是如果切换到b或c则会发生相同的情况）。为什么会这样？我希望新的几何/网格完美地坐在它被挤出的面上，我该怎么办？

Answer 1

在路径上拉伸形状时，允许结果在路径上自由旋转。这是因为如果形状例如在样条曲线上挤出，则需要旋转以挤出成一致的形状。

可悲的是，你无法轻易控制/预测初始轮换。

如果您不希望旋转形状，可以考虑使用拉伸深度而不是拉伸路径：

var extrudeSettings = {
    bevelEnabled: false,
    steps: 1,
    amount: depth // depth or height for extrusion
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var mesh = new THREE.Mesh( geometry, material );

另请阅读我关于挤出深度和挤出路径的不同行为的相关问题 on stackoverflow here

UPDATE1：

我同意你的意见：

  

＆＃34;这是每个3D建模软件中最基本的修饰符之一，认为它更容易复制＆＃34;

我希望它更加用户友好，但显然这就是当前版本的three.js中的情况。对于不同方向的挤出，可以在执行挤出后应用剪切矩阵。您可以在 another question of mine on this topic 的答案中了解如何执行此操作。

UPDATE2：

我还记得曾经使用过以下技巧：

使用深度挤出形状然后 将变换应用于拉伸结果的一半顶点（geometry.vertices）（换句话说，几何体的上平面）。 这有时可能比确定正确的剪切矩阵对于期望的结果更容易。