Best way to get vertices of a mesh three.js

Question

I am new to Three.js so perhaps I am not going abut this optimally,

I have geometry which I create as follows,

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

I then apply a rotation to it

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

then I create a Mesh from it

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

I then apply a bunch of operations to the mesh to position it correctly, as follows:

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

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

Now what is the best way to get the vertices of the mesh both before and after it's position is changed? I was surpised to discover that the vertices of a mesh are not in-built into three.js.

Any hints and code samples would be greatly appreciated.

Answer 1

I think you're getting tripped-up by some semantics regarding three.js objects.

1) A Mesh does not have vertices. A Mesh contains references to Geometry / BufferGeometry , and Material (s). The vertices are contained in the Mesh 's geometry property/object.

2) You're using PlaneBufferGeometry , which means an implementation of a BufferGeometry object. BufferGeometry keeps its vertices in the position attribute ( mesh.geometry.attributes.position ). Keep in mind that the vertex order may be affected by the index property ( mesh.geometry.index ).

Now to your question, the geometric origin is also its parent Mesh 's origin, so your "before mesh transformation" vertex positions are exactly the same as when you created the mesh. Just read them out as-is.

To get the "after mesh transformation" vertex positions, you'll need to take each vertex, and convert it from the Mesh 's local space, into world space. Luckily, three.js has a convenient function to do this:

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

Answer 2

Here's an example written by typescript.

It gets the grid's position in the world coordinate system.

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

or

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