Wireframe of quads

Hi, community!
Here is a solution for those types of geometries that are a distorted plane in general.



setGeom(new THREE.PlaneBufferGeometry(5, 5, 11, 12), 0x00ffff, -10, 0, 0);
setGeom(new THREE.CylinderBufferGeometry(1, 2, 5, 11, 12), 0xffff00, -5, 0, 0);
setGeom(new THREE.RingBufferGeometry(1, 2.5, 11, 6), 0x888888, 0, 0, 0);
setGeom(new THREE.TorusBufferGeometry(2, 0.5, 11, 12, Math.PI * 1.5), 0xff00ff, 5, 0, 0);
setGeom(new THREE.TorusKnotBufferGeometry(1.5, 0.5, 36, 11), 0xffffff, 10, 0, 0);
setGeom(new THREE.TubeBufferGeometry(new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 5, -5),
  new THREE.Vector3(-10, -5, 0),
  new THREE.Vector3(10, -5, 5)
], false), 36, 0.5, 11), "orange", 0, 0, 0);
setGeom(new THREE.LatheBufferGeometry(new THREE.CatmullRomCurve3([
	new THREE.Vector3(2.5, 10, 0),
  new THREE.Vector3(5, 7.5, 0),
  new THREE.Vector3(12, 5, 0),
  new THREE.Vector3(13, -5, 0)
]).getSpacedPoints(12), 11, Math.PI * 0.5, Math.PI), 0x444444, 0, 0, 0);

function setGeom(g, color, x, y, z) {
  let m = new THREE.LineBasicMaterial({
    color: color
  let o = new THREE.LineSegments(g, m);
  o.position.set(x, y, z);

function ToQuads(g) {
  let p = g.parameters;
  let segmentsX = (g.type == "TorusBufferGeometry" ? p.tubularSegments : p.radialSegments) || p.widthSegments || p.thetaSegments || (p.points.length - 1) || 1;
  let segmentsY = (g.type == "TorusBufferGeometry" ? p.radialSegments : p.tubularSegments) || p.heightSegments || p.phiSegments || p.segments || 1;
  let indices = [];
  for (let i = 0; i < segmentsY + 1; i++) {
    let index11 = 0;
    let index12 = 0;
    for (let j = 0; j < segmentsX; j++) {
      index11 = (segmentsX + 1) * i + j;
      index12 = index11 + 1;
      let index21 = index11;
      let index22 = index11 + (segmentsX + 1);
      indices.push(index11, index12);
      if (index22 < ((segmentsX + 1) * (segmentsY + 1) - 1)) {
        indices.push(index21, index22);
    if ((index12 + segmentsX + 1) <= ((segmentsX + 1) * (segmentsY + 1) - 1)) {
      indices.push(index12, index12 + segmentsX + 1);


Hi prisoner,
This is what I’ve been looking for to display only quads in a wireframe view of objects to avoid the cluttered mess tris do.

I’m advaced novice in three.js, so is there any way you (or anyone else here) could supply a “dumbed down” version of this for easier adaptation into any customized project?

(In the meantime I’ll try to port it over to my needs)


Maybe you can take something from there.


lines 36, 108, 311, 600, 1332, 2349, 2370, 2394, 2517, 2584, 2610, 2954, 2985, 3017

Try it out there https://hofk.de/main/threejs/sandboxthreef/


Maybe this is more clear.

On page https://github.com/hofk/THREEf.js/tree/master/THREEf_90


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

try it out

Prisoner, is there a way to use your technique here to have quad only wireframe only be shown on a solid surface (not transparent)…

BUT … Show lower res quad lines on a higher res object?

Ie: every “loop” on a torus is smooth, yet every longitudinal line is shown only every. 4th or 8th strip?

Create two objects, one that’s the solid surface, then another one with a slightly larger radius with the modified subdivisions that you want.

1 Like

Or draw a grid in shaders with the desired segmentation: Anti-Aliased Grid Shader - Made by Evan
Use UV coordinates instead of position.


daaamn that’s awesome. thanks!

Hi prisoner,
Just realizing that shader is in a format I’m not yet accustomed to.
This is gl library stuff yes?
Any pointers/links you’d give as to learning beginner level material on how to implement the code on that page into a three.js material?

I am specifically interested in the last option on the selection buttons…the radial “spider web” type.


Here you are, an option of how you can implement that grid into MeshStandardMaterial:

Example: https://jsfiddle.net/prisoner849/5bk9tvjd/

And just in case, as you’re looking for a “spider web”-like stuff: Grid: Spider Web


thanks! the toroid one is exactly what i need!
Edit: this is truly great.
I busted up the count on the geometry and down on the wireframe, and it’s a low count, SMOOTH quad wireframe.
Looks just like NURBS.

my ideal look…

Why can’t js fiddle work well in mobile??
It’s 2021!


check out how fantastic that shader works.
i just switched out the torus for a teapot.
follows the contours of the different parts without any extra adjustments.

1 Like

@GlifTek Looks nice :slight_smile: I usually use it for such things, to visualize UV coordinates.

How i can do this for buffergeometry and i dont want to remove the inbetween lines, i only want to make than invisible so that my geometry still have same structure


Some thing like this

Wireframe of quads - #10 by prisoner849 This post has a jsfiddle with the GUI option “Quad wireframe”. Or you mean something different?

Hi, I’ m trying to do the shame but I can’t seem to load my 3d model in a type compatible with the to Quads function. How did you solve this problem?

Hey! I just tried to make this work for any arbitrary geometry imported from an OBJ file which now comes under the new BufferGeometry class and I don’t seem to wrap my head around the fact that how can we implement something like quads instead of tri for these shapes which show up just fine in the blender wireframe. I did try something around barycentric coordinates but that’s a relatively complex solution, I am sure there must be something that could help.