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，也会发生同样的情况）。为什么会这样？我想让新的 geometry/mesh 完美地坐在它被挤出的脸上，我该怎么做？

Answer 1

当您在路径上挤出一个形状时，结果可以在路径上自由旋转。这是因为如果形状例如在样条曲线上挤压，则需要旋转以挤压成一致的形状。

遗憾的是，您无法轻易地 control/predict 初始旋转。

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

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 Whosebug here

更新 1：

我完全同意你的评论：

"this is one of the most basic modifiers in every 3d modelling software, thought it was simpler to replicate"

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

的答案中阅读如何执行此操作

更新 2：

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

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

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

Three.js - Extruding along normal rotates the output mesh

javascript

3d

normals

更新 1：

更新 2：