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

Questions
1

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:

https://threejs.org/docs/scenes/material-browser.html#MeshPhongMaterial

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.

2

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.

3

As a starting point: Wireframe of quads

4

From the Collection of examples from discourse.threejs.org

SphereWithoutDiagonals

This may also be helpful? Grid Collection

1 Like
5

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.

6

Thanks prisoner849!
I will look into your suggestion.

7

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

8

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.

9

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.

10

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);
scene.add(mesh);

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);
scene.add(line);