CODEWITHSUNDEEP
javascriptthree.js
tomc
tomc

Reputation: 427

Three.js - Editing faces

I thought I'd ask this here because I can't find any information anywhere (SO or the three.js documentation) - How do you get the average x,y,z coordinates of a specific face? Or at the very least, is there a way to get the x,y,z coordinates of the three vertices that make up a face? And then use those to calculate the average?

So far I have

var fLength = plane.geometry.faces.length;
for (var i = 0; i < fLength; i++) {
    var f = plane.geometry.faces[i];
    //How do I get the x,y,z of the current/i face?
    //Is there a way to move this face? 
    //Is there a way to extrude this face? Or do -anything- with it for that matter?
}

Additionally, are there any methods for moving a face apart from moving the vertices? What about extruding faces? I realize it's quite a few questions however the process for all of this seems a little unclear to me...

Upvotes: 1

Views: 1473

Answers (1)

Paul-Jan
Paul-Jan

Reputation: 17278

Each Three.js Face3 contains properties a, b and c. Those are the indices into the vertex array of the same geometry object. For example, use

v1 = plane.geometry.vertices[f.a];

to get the Vector3 representing the position of the first vertex in the face.

Three.js doesn't offer much convenience methods for modifying the geometry of an existing object. Like the underlying graphics API's, its focus is on quickly composing and displaying a scene of mostly static objects (vertex shader operations aside).

You'll have to manually adjust the individual vertice that make up the faces (and set the correct dirty flags), or even rebuild faces if your modifications effectively modify edges. Depending on your use case, your operation might be simpler to perform using a vertex shader.

The point is, the topic of building and modifying geometry quickly gets pretty hairy. If you need any help there, make sure to ask a specific question, outlining your desired operation on the geometry.

Upvotes: 4

Related Questions