Get edges of plane - vertices not in right order

[curlytalegames]

I’m trying to loop through the vertices of a plane to get the distance between outside edges of a plane.

I can get vertex data, but I don’t know how to find which vertices are connected. Right now I’m incrementing through the array of vertices with hopes that it would follow the perimeter, but unfortunately that isn’t the case.

Any ideas how I can find the edge vertices and loop through them in order to get the distances between each pair?

Here is a screenshot of the vertices labeled in ThreeJS and the model in blender illustrating what I’m trying to do:

Here is the code I’m using to get the edges of the mesh and loop through the vertices:

function getEdges(mesh){

	//convert the mesh to edges
    var edgesGeom = new THREE.EdgesGeometry(mesh.geometry);
    var edges = new THREE.LineSegments(edgesGeom, new THREE.LineBasicMaterial({color: "yellow"}));
    scene.add(edges);

	//get the vertices of the edges
	var vertices = edgesGeom.attributes.position.array;

	for (let i = 0; i < vertices.length; i=i+6) {
		//creates a label at the XYZ position of the vertex
        console.log( vertices[i] + " " + vertices[i+1] + " " + vertices[i+2]);
		showDistanceLabel(vertices[i] + " " + vertices[i+1] + " " + vertices[i+2]);
    }
	
}

Thanks!
-Ben

[hofk]

You need a helper to show you the location of the vertices to their numbering:

From the Collection of examples from discourse.threejs.org

NumberingHelperExamples

see also

threejsResources/THREEn at master · hofk/threejsResources · GitHub

[curlytalegames]

Thanks hofk, I already have the vertex numbers and can label them.

Is there a way to get which vertices are connected to which vertices? And, is there a way to know if the edges/vertices are on the interior or perimeter of the mesh?

[hofk]

In the NumberingHelperExamples, the vertices and faces of the official geometries are shown.

In other examples of mine I have used self created geometries. These have partly another systematics in the order.

But independent of this there is always a systematics. Therefore it is possible to calculate the searched things with elementary mathematics. In my examples you can see the formulas in the geometry definition in the corresponding form.

Let’s take the official plane geometry.

We define
ws = widthSegments,
wss = ws + 1,
hs = heightSegments,
hss = hs + 1,
lv = last vertex = wss * hss - 1,

Edge vertices
Loops:
0 … ws;
lv - ws … lv;
0, wss, 2 * wss, … hs * wss;
wss - 1, 2 * wss - 1, … hss * wss - 1 = lv;

Accordingly, it is easy to obtain connected vertices.

---

UPDATE:

I forgot to mention that the corners appear twice. So you can choose in which loop you want to include them.

[curlytalegames]

Thanks hofk, maybe I simplified my question too much, but the planes I’m dealing with aren’t the built in ThreeJS planes, they are meshes from a GLTF file and they aren’t all rectangular. These planes are floorplans of rooms.

I’m trying to calculate the distance between vertices so I can overlay how long in feet/meters each section of the room is.

So I can’t use the number of segments in a plane, since it’s not a perfect rectangular plane.

If I can get which vertices are connected to which vertices, and which vertices are on the edge of the model then I can measure the distances between each vertex. I’m just not finding any documentation or examples on how to do that.

Is it even possible to do what I’m trying to do in ThreeJS?

[hofk]

I’m sorry , but I’ve never bothered with their internals other than loading ready-made GLTF files. I create geometries procedurally.

But in the forum there are GLTF experts!

[Yin_Cognyto]

Everything is possible, not just in Three.js, but as a general rule - it only depends on how much you want to achieve it. Now, I’m not an expert in GLTF models, barely used one or two, yet a simple fiddle illustrating the problem might be helpful - if GLTF can be used in a fiddle, that is.

Other than that, I can only see what it looks like a rotated M in your screenshot, so I personally have a hard time understanding how you define vertices that are on the “edge of the perimeter” and why the edges geometry can’t help with that. Maybe you mean that the shape these things follow can be an open (and not closed) one?

Bottom line, from my point of view, a bit of clarification, preferably via a graphical example, could make others understand what exactly do you have in mind, and how such a layout would look like.

[curlytalegames]

I’m trying to measure the distance between pairs of vertices on the outside edge of a mesh. Here is a screenshot of one of the meshes in blender. It’s a flat plane.

I can loop through each vertex, the problem is in ThreeJS I don’t know how find what vertices are connected to what vertices. And the order of the array of vertices don’t walk around the mesh.

[tfoller]

If you work in Blender it might be possible to extract edges of such geometry before triangulation via Python script and save that info to a file.

[curlytalegames]

Thanks tfoller, yeah that would work, ideally I could grab that data in ThreeJS but if it’s the only way I’ll have to bite the bullet and write a python script to generate a json file with the data

[tfoller]

Yeah, I don’t think 3D has a concept of “outer edge” built in it since all triangles are processed independently. Maybe it possible to do a check on a mesh if an edge is an outer one but I suspect it’s gonna be a lot of math.