Javascript Three.js-沿法线拉伸将旋转输出网格

我有一个只有两个面的平面几何体（图中红色的那个）。我尝试使用以下函数沿法线拉伸其中一个：

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


}

函数挤出（网格、数量）{
var geometry=mesh.geometry；
//仅在第一个面上执行
对于（var f=0；f

}

它沿着法线完美地挤出，但挤出的网格似乎是旋转的（我使用的是面。挤出路径的顶点，但如果切换到b或c，也会发生同样的情况）。为什么会这样？我想让新的几何体/网格完美地位于从中挤出的面上，我该怎么办？

---

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

遗憾的是，您无法轻松控制/预测初始旋转

如果你不想让形状旋转，你可以考虑使用挤压深度代替挤压路径：

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

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

更新1： 我完全同意你的评论：

“这是每个3d建模软件中最基本的修改器之一，虽然复制起来更简单”

我希望它对用户更友好，但显然这就是当前版本three.js中的情况。对于以不同方向拉伸，可以在执行拉伸后应用剪切矩阵。您可以在的答案中阅读如何执行此操作

更新2： 我还记得有一次使用了以下技巧：

使用深度拉伸形状，然后 对拉伸结果的一半顶点（

几何体。顶点

）应用变换（换句话说，几何体的上平面）。

---

这有时可能比计算出所需结果的正确剪切矩阵更容易。

原始形状是否也会旋转？您是否对初始几何体所在的形状应用了矩阵或旋转？@Wilt否形状不旋转，甚至平面几何体也不旋转。它是使用默认参数创建的，没有应用旋转使用深度的问题是它只沿Z方向拉伸，我无法指定方向。因此，如果输入形状被旋转，或者如果我试图挤出一个球体的面（其中法线指向所有不同的方向），它会把整个事情搞砸。有什么建议吗？这也不是每个3d建模软件中最基本的修改器之一，虽然复制起来更简单：（@user3276178我用另一个链接更新了我的anser。希望它能对你有更多帮助。非常感谢。“var dir=new THREE.Vector3”这是我的脸的法向量吗？我试过用它，但实际上不起作用，我旋转错误谢谢你的回答很好helpful@Wilt还有其他解决方法吗？我需要车削一个面（围绕一个中轴拉伸）。如果我使用一个拉伸面，形状是任意旋转的，这是我不想要的。