Thickness of lines using THREE.LineBasicMaterial

Question

I am using the code below to create hundreds of lines in my three.js scene

edgeGeometry[i] = new THREE.Geometry(); edgeGeometry[i].vertices[0] = v(x1,y1,z1); edgeGeometry[i].vertices[1] = v(x2,y2,z2); edgesMat[i] = new THREE.LineBasicMaterial({     color: 0x6699FF, linewidth: 1, fog:true}); edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]); edge[i].type = THREE.Lines; scene2.add(edge[i]); 

It works just fine, but when i change the value of "linewidth" to a bigger OR smaller value, i see NO difference in the scene.
How should i change the thickness of the lines? Any ideas?
Thanks, Dimitris

Answer 1

1) Use native OpenGL

You can achieve rendering of line thicknesses with a workaround by setting your browser to use native OpenGL instead of ANGLE. You can read here on how to do this on Chrome. Keep in mind that you will experience performance differences if you swap to native OpenGL.

EDIT:

The master MrDoob himself posted here how to do this for both Chrome and Firefox.

Note: This first option is no longer a valid solution since the latest OpenGL versions no longer support line thickness either. Check also @gman his answer. This means if you want to use line thickness the second option is the way to go.

---

2) Use THREE.MeshLine class

There is also another solution; this THREE.MeshLine class on github is a nice workaround. It comes with a special THREE.MeshLineMaterial. According to the docs it is as simple as:

• Create and populate a geometry
• Create a THREE.MeshLine and assign the geometry
• Create a THREE.MeshLineMaterial
• Use THREE.MeshLine and THREE.MeshLineMaterial to create a THREE.Mesh

Answer 2

Are you using Windows?
I remember this not working on Windows because it wasn't implemented in ANGLE.