获取网格three.js的顶点的最佳方法答案

【问题标题】：Best way to get vertices of a mesh three.js获取网格three.js的顶点的最佳方法
【发布时间】：2018-04-29 05:37:57
【问题描述】：

我是 Three.js 的新手，所以也许我不会以最佳方式解决这个问题，

我有如下创建的几何图形，

const geo = new THREE.PlaneBufferGeometry(10,0);

然后我对其应用旋转

geo.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI * 0.5 ) );

然后我从它创建一个网格

const open = new THREE.Mesh( geo, materialNormal);

然后我对网格进行了一系列操作以正确定位它，如下所示：

open.position.copy(v2(10,20);
open.position.z = 0.5*10

open.position.x -= 20
open.position.y -= 10
open.rotation.z = angle;

现在在更改位置之前和之后获取网格顶点的最佳方法是什么？我惊讶地发现网格的顶点没有内置到 three.js 中。

任何提示和代码示例将不胜感激。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

我认为您被有关 three.js 对象的某些语义所迷惑。

1) Mesh 没有顶点。 Mesh 包含对 Geometry/BufferGeometry 和 Material(s) 的引用。顶点包含在Mesh 的geometry 属性/对象中。

2) 您正在使用PlaneBufferGeometry，这意味着BufferGeometry 对象的实现。 BufferGeometry 将其顶点保留在 position 属性 (mesh.geometry.attributes.position) 中。请记住，顶点顺序可能会受到 index 属性 (mesh.geometry.index) 的影响。

现在回答您的问题，几何原点也是其父 Mesh 的原点，因此您的“网格变换前”顶点位置与创建网格时完全相同。照原样读出来。

要获得“网格变换后”的顶点位置，您需要获取每个顶点，并将其从Mesh 的本地空间转换为世界空间。幸运的是，three.js 有一个方便的函数来做到这一点：

var tempVertex = new THREE.Vector3();
// set tempVertex based on information from mesh.geometry.attributes.position

mesh.localToWorld(tempVertex);
// tempVertex is converted from local coordinates into world coordinates,
// which is its "after mesh transformation" position

【讨论】：

【解决方案2】：

这是一个打字稿写的例子。

获取网格在世界坐标系中的位置。

    GetObjectVertices(obj: THREE.Object3D): { pts: Array<THREE.Vector3>, faces: Array<THREE.Face3> }
{
    let pts: Array<THREE.Vector3> = [];

    let rs = { pts: pts, faces: null };

    if (obj.hasOwnProperty("geometry"))
    {
        let geo = obj["geometry"];
        if (geo instanceof THREE.Geometry)
        {
            for (let pt of geo.vertices)
            {
                pts.push(pt.clone().applyMatrix4(obj.matrix));
            }
            rs.faces = geo.faces;
        }
        else if (geo instanceof THREE.BufferGeometry)
        {
            let tempGeo = new THREE.Geometry().fromBufferGeometry(geo);
            for (let pt of tempGeo.vertices)
            {
                pts.push(pt.applyMatrix4(obj.matrix));
            }
            rs.faces = tempGeo.faces;
            tempGeo.dispose();
        }
    }
    return rs;
}

或

if (geo instanceof THREE.BufferGeometry)
{
    let positions: Float32Array = geo.attributes["position"].array;
    let ptCout = positions.length / 3;
    for (let i = 0; i < ptCout; i++)
    {
        let p = new THREE.Vector3(positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]);
    }
}

【讨论】：