Wireframe line width

Question

how is it possible to add a wireframe with thicker lines than 1? As with using LineBasicMaterials the linewidth property doesn't work, and I was unable to make it work with MeshLines.

Thanks

PS

     loader.load('assets/' + baseName + '.obj', function (object) {
            object.traverse(function (child) {
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                    let geo = new THREE.EdgesGeometry( child.geometry ); // or WireframeGeometry
                    let mat = new THREE.LineMaterial( {
                        color: 0x000000,
                        linewidth: 10, // in pixels
                        vertexColors: THREE.VertexColors,
                    } );
                    let wireframe = new THREE.LineSegments( geo, mat );
                    child.add( wireframe );
                    child.material.emissive.r = 0.98;
                    child.material.emissive.g = 0.98;
                    child.material.emissive.b = 0.98;
                }
            });

[Coming Soon](https://github.com/mrdoob/three.js/pull/11349). — WestLangley, Aug 07 '17 at 11:39
Linewidth property works just under certain context. [Here some more info](https://stackoverflow.com/questions/25683295/three-js-linewidth-contradiction). — juagicre, Aug 07 '17 at 12:05
West Langley I cloned the repository, but my issue now is that the lines are not showing (but no errors are shown) I updated the question — GruberEDU, Aug 07 '17 at 12:46

score 0 · Answer 1 · answered Jan 04 '19 at 11:12

Current WebGL2 is based on OpenGL ES 3.0. On desktops it runs on top of OpenGL 4 or ANGLE both of which have a limit of 1 wireframes.

You can use THREE.MeshLine refer: https://github.com/spite/THREE.MeshLine

var line = new MeshLine();
line.setGeometry( geometry ); //Create your own required geometry 

line.setGeometry( geometry, function( p ) { return 2; } ); // makes width 2 * lineWidth

Refer the original document to get more insight.

PS: There is no simple(specially logically simpler in internal workings) way as of now to get thicker lines with WebGL.

Wireframe line width

1 Answers1