Question

我想从THREE.Geometry对象中挤出面，所以我的方法是： - 指定要拉伸的面 - 提取外边缘上的顶点 - 绘制带有这些顶点的THREE.Shape - 使用THREE.ExtrudeGeometry挤出它（我实际上使用的是一个不生成正面的修改版本，因为我自己克隆它们以保持原始拓扑）。

似乎在XY平面上使用CircleGeometry，因此在Z方向上进行挤压。

但如果我稍微旋转一下这就是我得到的。它在Z World Axes上挤出，而不是沿着它的局部方向

我可以解决这个问题吗？这是我正在使用的功能：

function faceExtrude( geometry, face_group, amount ) {

if ( geometry.type === "undefined" ) {

    console.log( "faceextrude error" );

    return;

}

//convert face_group to vertex_group
var vertex_group = [];

for ( var i = 0; i < face_group.length; i++ ) {

        //get vertices ID
        var f = face_group[i];
        var a = f.a;
        var b = f.b;
        var c = f.c;

        //clone vertices
        var v1 = geometry.vertices[a].clone();
        var v2 = geometry.vertices[b].clone();
        var v3 = geometry.vertices[c].clone();

        //add them to an array
        vertex_group.push(v1, v2, v3);

}


// Side Faces

var vertsToExtrude = [];


//Get only verts in outer edge
for ( var v = 0; v < vertex_group.length; v++ ) {

    var shareCount = 0;

    //count their presence in each face
    for ( var f = 0; f < face_group.length; f++ ) {

        if( v == face_group[ f ].a || 
            v == face_group[ f ].b ||
            v == face_group[ f ].c ) 
        {

            shareCount++;
        }
    }

    //if < 4 than it's in an outer edge. Add it to an array
    if ( shareCount < 4) {

        vertsToExtrude.push( vertex_group[ v ].clone() );

    }
}


//make a shape with them

var shape = new THREE.Shape();


shape.moveTo( vertsToExtrude[ 0 ].x, vertsToExtrude[ 0 ].y );

for ( var i = 1; i < vertsToExtrude.length; i++ ){

    shape.lineTo( vertsToExtrude[ i ].x, vertsToExtrude[ i ].y );

}

shape.lineTo( vertsToExtrude[ 0 ].x, vertsToExtrude[ 0 ].y );

//extrude it

var extrudeSettings = { amount: amount, steps: 2, bevelEnabled: false };

var sideGeo = new THREE.MyExtrudeGeometry( shape, extrudeSettings );


//Front Faces

var frontGeo = new THREE.Geometry();

for ( var i = 0; i < face_group.length; i++ ) {

        //get vertices ID
        var f = face_group[i];
        var a = f.a;
        var b = f.b;
        var c = f.c;

        //new vertices IDs
        var new_a = frontGeo.vertices.length;
        var new_b = frontGeo.vertices.length + 1;
        var new_c = frontGeo.vertices.length + 2;

        //clone vertices
        var v1 = geometry.vertices[a].clone();
        var v2 = geometry.vertices[b].clone();
        var v3 = geometry.vertices[c].clone();
        frontGeo.vertices.push(v1, v2, v3);

        //translate them depending on "amount"
        v1.z = v1.z + amount;
        v2.z = v2.z + amount;
        v3.z = v3.z + amount;

        //add them to a face 
        var f = new THREE.Face3(new_a, new_b, new_c);
        frontGeo.faces.push(f);

}

frontGeo.computeFaceNormals();

geometry.merge( sideGeo );

geometry.merge( frontGeo );

};

Answer 1

我是瞎子。在阅读有关ExtrudeGeometry的文档时错过了这个：

“extrudePath - THREE.CurvePath.3d样条曲线路径沿着拉伸形状。（如果（未定义框架），则创建框架”

认为这是我正在寻找的解决方案：）

Three.js - 沿着法线向量挤压面部

1 个答案: