How to display imported geometry with thick lines?

I would like to achieve a display-style like that:

or that

In my case I import a simple geometry of a house.

I tried this example:

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const edges = new THREE.EdgesGeometry( geometry , 15);
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { 
    color: 0xff0000,
    linewidth: 100
 } ) );

But the linewidth property is ignored in my Browser (Chrome).
It seems to be a limitation of the OpenGL Core Profil.

The MeshLine Class looks very promising (very smooth lines) but I have no idea how to “transform” the imported geometry into this nice looking lines (and how to ignore triangles on flat surfaces).

If anybody could guide me to the right direction :slight_smile:

Kind regards

This might be just what you are looking for :thinking: (live example)


@mjurczyk Wow! That’s a fantastic example! Exactly what I was looking for. Thank you alot! :slight_smile:
Now it remains on my littly braincapaticity if it can handle this :wink:

1 Like

It seems to work :smiley:

Thanks to Garrett Johnson and @mjurczyk for the hint.

1 Like