Wireframe -- how to implement and with user settable toggle?

I’ve looked at many user questions and reader discussions about wireframes in both Discourse and Stackoverflow. But I am still pretty fogged about to actually implement a wireframe at all and with a toggle in my lil-gui interface.

I would really like to implement an edges-only option (no diagonals in the triangles) that makes the underlying geometry disappear. See this discussion:

And this one:

However, I would be extremely grateful for an explanation of just this example:


which shows the ‘wireframe’ on/off switch in the user interface. Unfortunately I can’t produce the actual response code that implements the switch.

Thanks, in advance, for expert tips.

I don’t use lil-gui, so not an expert, but the checkbox is added by this line of code:

function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
  folder.add( material, 'wireframe' );

It seems that in the absence of an explicit handler, lil-gui toggles the property of the material specified as a boolean, in this case material.wireframe = true/false;

The implementation should be somewhere inside lil-gui library code.

As a starting point: Wireframe of quads

From the Collection of examples from discourse.threejs.org


This may also be helpful? Grid Collection

1 Like

Thank you for your answer.
I think the user interaction through lil-gui is working. I just don’t know how to transform a given geometry such as a cube so that the wireframe appears.

Thanks prisoner849!
I will look into your suggestion.

hofk: thanks for the links! I will look into both of them for help.

You don’t need to transform the geometry. When you set the material’s wireframe property to true, the same geometry will be rendered as a wireframe instead of a solid surface.

A geometry is a collection of points, you can render them in three different modes: points, lines and triangles, setting material.wireframe = true tells the GPU to render lines.

tfoller: thanks again for your advice.
Initially I was trying to use this pattern:

const auxGeometry = new THREE.EdgesGeometry( geometry );
const auxMaterial = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
 const wireframe = new THREE.LineSegments( auxGeometry, auxMaterial );
 mesh.add( wireframe );

I will continue experimenting using your suggestion.

Mesh is a combination of a geometry and a material.

There are Mesh materials, they can be used to render a solid or a wireframe.

The pattern for using a Mesh materials is:

const geo = new THREE.BoxGeometry(...);
const mat = new THREE.MeshPhongMaterial(...); // to produce a wireframe MeshPhongMaterial( { wireframe: true })
const mesh = = new THREE.Mesh(geo, mat);

Materials that have Line in their name are for drawing lines only, you don’t need to use wireframe property, and you use Line instead of Mesh, the pattern is:

const geo = new THREE.BufferGeometry();
const vertices = [...]; // the list of all points coordinates from the BoxGeometry above
geo.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
const mat = new THREE.LineBasicMaterial(...);
const line = new THREE.Line(geo, mat);