Idea to make lines more visible?

Questions
1

I’ve got a mesh whose edges I highlight. the problem is edges with a certain angle between two surfaces aren’t as visible as the others, what could I do here? I’m currently using LineMaterial and WireframeGeometry2

grafik
grafik.jpg1698×996 574 KB

Making the line fatter doesn’t solve the problem, even with this width:

grafik
grafik.png1357×1015 267 KB

Could I somehow use the cameras current side? Maybe set the lines to somehow “follow” the cameras view?

2

It seems the lines you are missing are the objects intersections, not lines pertaining to the objects geometry.

You could use a CSG (a.k.a. boolean operation) plugin or library. There are some of them for Three.js. Then you do the union operation between all parts of your object, and the missing lines will show up on the resulting object.

1 Like
3

I’m actually using csg. The lines you see are made between the corners of the csg result.

                let p1 = tempGeo.vertices[edge[0]] // 1. corner
                let p2 = tempGeo.vertices[edge[1]] // 2. corner
                let Linegeometry = new THREE.Geometry();
                Linegeometry.vertices.push(p1, p2,p1);
                Linegeometry.faces.push(new THREE.Face3(0,1,2));
                let geoWireframe = new WireframeGeometry2( Linegeometry );
                let wireframeEdge = new Wireframe( geoWireframe, matLineEdges.clone() );
                wireframeEdge.computeLineDistances();
                scene.add( wireframeEdge );

If you look closely in the red circles you see that the lines are actually drawn but aren’t fully visible

4

Yes… I saw those green pixels after posting.

You are creating 3 edges for each original edge, because you are defining a Face3. Perhaps it is related to the visual problem. This way you only define one edge:

...
let lineGeometry = new THREE.BufferGeometry()
let verts = [ p1.x, p1.y, p1.z, p2.x, p2.y, p2.z ];
lineGeometry.setAttribute( 'position', new Float32BufferAttribute( verts, 3 ) );
let geoWireframe = new WireframeGeometry2( lineGeometry );
...
5

Thanks, but the result is the same. Is there somehow an order that I could edit, which decides which mesh should be in front if there are multiple meshes at the same spot? Such as layers in other frameworks

6

Yes: Try to set the polygonOffset property to true, and play with polygonFactor and polygonOffsetUnits, all values of the green material.

The polygon offset draws the triangles closer to the camera (or farther away, if it is negative)