LineBasicMaterail changes lineWidth on Chrome but not on firefox

Questions
,
1

Hello all,

Using react-three-fiber, I have multiple “BoxGeomtry” meshes and I want to create width-adjustable edges around each one of them.

As in the examples I create the edges for each of them using “EdgesGeometry”, “LineBasicMaterail”, and “LineSegments”.

Using this arrangement changing the lineWidth works well on Chrome for values greater or less than 1.
However this doesn’t work on Firefox and the value stays fixed to 1.

I have tried using “lines” classes like in the example Here
But it doesn’t work and expresses a weird behavior, I don’t know maybe it doesn’t work with r3f?

Could anyone please give me a suggestion of how to solve this one?

Thanks

2

Mentioned in LineBasicMaterial docs, this property tells WebGL what line width to use, but WebGL does not support that on many platforms. For thicker lines that work in all devices you may want to use other methods:

https://threejs.org/examples/?q=line#webgl_lines_fat

3 Likes
3

Thanks for your fast response!
I tried it out one more time and it now works, I had to multiply the lineWidth value with 0.001 for some reason.
I think this might be a bug.