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

https://jsfiddle.net/prisoner849/sgaywqf3/show

Code:

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

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);
}
}
g.setIndex(indices);
}

``````
16 Likes

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)

Thanks!

Maybe you can take something from there.

https://github.com/hofk/THREEf.js/blob/7b76151f112779f48f16878c571541d44b00a70b/THREEf_90/THREEf.js

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/

2 Likes

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

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

2 Likes

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.

Thanks!

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

And just in case, as youâ€™re looking for a â€śspider webâ€ť-like stuff: Grid: Spider Web

2 Likes

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.
Perfecto

my ideal lookâ€¦
https://jsfiddle.net/GlifTek/jcbkwxsq/4/

Why canâ€™t js fiddle work well in mobile??
Itâ€™s 2021!

2 Likes

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

@Alex
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?