Rendering quad mesh and it's edges

Hi all,
For the project i’m working on we need to render quad meshes and in particular it’s edge geometry and correct normals. I am working currently with obj files.

For illustration what i mean, here is a picutre that shows a quad mesh :

and here is what i try in code :

    var object = (new THREE.OBJLoader()).parse(request.response);
    object.children[0].geometry.doubleSided = true;
    object.position.sub((new THREE.Box3()).setFromObject(object).getCenter());

    // last parameter is thresholdAngle
    var geo = new THREE.EdgesGeometry(object.children[0].geometry, 1);

    var mat = new THREE.LineBasicMaterial({color: 0xff0000, linewidth: 2});
    var wireframe = new THREE.LineSegments(geo, mat);

and what i get from the threejs renderer :


Three doesn’t support quads, so if you load a model with quad faces a subdivision algorithm is run to divide them into triangular faces.

If you need to show a quad wireframe overlay you’ll have to load up the original vertices separately and build a line geometry from them.

Thanks for reply,
but i can not find a line geometry, if you mean EdgeGeometry i already use this and get the shown result.

Is there any way to get the index list of the loaded mesh ? This would be enough for me to do what i want as long as the index list is the same as in the loaded file. In addition its important that it’s independent from the used loader (may be we want not only use obj)

In the Mesh class source code i can not find any thing about this …

if you mean EdgeGeometry

Sorry, I meant a shape geometry, generated from the list of vertices in some way, although there may be other approaches.

Is there any way to get the index list of the loaded mesh

If you are using OBJ format the list of vertices should be easily visible in the .obj file. Taking the list of vertices from the mesh.geometry won’t work as it will have been converted to triangles on load, so you’ll need to extract it from the file.

Thanks for response, but i can not see how this should work with ShapeGeometry … did you mean i have to generate a quadshape for
every quad ?
Then i have much duplicated edges/vertices … not so optimal if i dont know the size of meshes that are user defined …

More questions :

  • How does threejs work in general, is the face(index) list not stored in the mesh class ?
  • In opengl there is the posibility to use something called indexbuffers, is threejs using this ?
  • so if i understand correctly the duplication of vertex positions is done at load time(from file), right ?
  • is the only difference between Geometry and BufferGeometry that BufferGeometry not uses Vector3 ?

I’m not sure if that’s helpful:

Because three.js disassembled rectangles into two triangles, I have formed a center point and realized a decomposition into four triangles. Thus, the rectangles are “spatially”.

When I read this question, I thought to simulate quad. For this I have the vertices simply horizontally and vertically connected to a line.

This works with Geometry, indexed and non-indexed BufferGeometry.

See (only firefox), lines Geometry: 300, 2358, BufferGeometry: indexed: 580, 2570 , non indexed 1303, 2945

See also Addon. Produces almost infinite many time-varying geometries with functions

  1. no, it’s stored in two types of “geometry” classes Geometry and BufferGeometry. Also depends on the geometry, but it supports indexes.
  2. yes
  3. correct, but really depends on the file, there are many formats and you can easily store them in json of your choosing. An obj is just a text file, it can hold not only quads but polygons. Three crunches all this into the only format it knows - fittingly, threeangles :smiley:
  4. not the only difference, it also stores Face3, along with uvs which should be packed in Vector3 it’s just a javasript friendly structure. BufferGeometry is definitely more raw, corresponding 1:1 to what you send to the gpu.

If you know how to work with geometry, designing your own ngon class is pretty trivial, and objs already hold polygons. Heck you dont even need anything complicated, all you have to do is parse the indecis into an array and draw a line for each four. The only fancy thing needed might be a map to eliminate the duplicate edges.

@pailhead threeangles? What’s that?

j/k :slight_smile: @looeee

funny because triangles, (three)angles, and because three no longer supports quads

Id write a solution but my mind melts when reading regular expressions and last i looked obj loader relies on those :confused:

Upon obtaining the indecis, a0,a1,a2,a3,b0,b1,b2,b3,c0,c1,c2,c3… it should be easy

Yeah I guessed that after I typed, but figured I’d still call you out on it cos that joke is terrible :laughing:

I have find this

and this

but the first not work… it’s for r51

1 Like