1

I noted that at the LineBasicMaterial THREE documentation is said that on Windows systems the linewidth is set-up automatically to 1 and cannot be changed.

On the other hand we have a very cool example from threejs.org using the same THREE version (r68) where using a Windows system the linewidth gets modified from 1 to 5 and from 5 to 1 when the mouse overs one of the lines on the scene.

So, my question is, can this parameter be modified? How to do it? I tried with simply set the material.linewidth to a different number but it had no effect.

juagicre
  • 1,065
  • 30
  • 42
  • some more people worrying about this problem [here](http://stackoverflow.com/questions/11638883/thickness-of-lines-using-three-linebasicmaterial). BUT, again, why is the "very cool example from threejs.org" working? – juagicre Sep 05 '14 at 11:49

2 Answers2

4

The example you linked uses the CanvasRenderer (not the WebGLRenderer) which does support lineWidth. WebGLRenderer however has to rely on what the WebGL implementation provides.

On Windows, both Chrome and Firefox default to using ANGLE (some layer on top of DirectX) which does not support lineWidth. Firefox on Windows can however be switched to OpenGL, and then (depending on the video card drivers) lineWidth may be supported.

(Chrome has a command line option to switch it to OpenGL mode, but that's no longer a supported or functional configuration, it just hangs on startup ... you don't need to bother trying).

Leeft
  • 3,827
  • 1
  • 17
  • 25
  • Interesting and very useful answer. I will wait until ANGLE people gives support to this feature... or there is any workaround to get this working??? Thanks @Leeft! Is a pity I have not enough reputation to give to you at least +1 to your answer – juagicre Sep 05 '14 at 13:28
  • There are no real workarounds, and this has been an issue for years now so don't hold your breath for ANGLE supporting it. The nice thing about lines is that they are easy to animate, but they they do have a disadvantage of always being N pixels wide, whether close or far away. If your lines are static, replacing them with geometry (e.g. cylinders) could be an option. If your lines are moving then replacing with geometry is perhaps an option, but a lot more work and it might not perform well enough. – Leeft Sep 05 '14 at 13:33
  • My conclusion is that the documentation should somehow warn about those two renders, the **Canvas** and the **WebGL** Thanks @Leeft – juagicre Sep 08 '14 at 10:19
  • While perhaps the documentation could require a bit more clarification, the only mention of `lineWidth` I'm aware of is in `LineBasicMaterial` and putting documentation on the renderers there might be quite out of place. It does accurately tell you that ANGLE and Windows don't support lineWidth, but it doesn't tell you that OpenGL doesn't use ANGLE nor does it tell you that the CanvasRenderer doesn't use it. Should it? – Leeft Sep 08 '14 at 10:31
  • From my point of view, as more clear documentation as better. In this case there are differences between the visual result different renders give, so, it should be somewhere explained, perhaps in the element itself if is an exception or in the renders if is a general rule that affects more elements. – juagicre Sep 09 '14 at 06:16
0

I would guess that the documentation is outdated there. Because the example that you linked does indeed set:

currentIntersected.material.linewidth = 5;

where currentIntersected instanceof THREE.Line and currentIntersected.material instanceof THREE.LineBasicMaterial

After the value is set to 5, if I try to get it, it does indeed return 5, and the line renders as thick. Even in IE on Windows.

If it doesn't work for you, can you please post your example in a jsfiddle or something?

PS: did you remember to call render?

Jovan Milosevic
  • 195
  • 8
  • Yes, the example renders as it should, so, when the mouse overs on the line, it gets fatty. My example is not working unless I change the firefox property 'webgl.prefer-native-gl' to: true as suggested in one answer [here](http://stackoverflow.com/questions/21067461/workaround-for-lack-of-line-width-on-windows-when-using-three-js). So I guess I am doing something different but I am not sure what. I render, sure, and as well I call updateMatrix(). The line I try to modify is the one in the **ArrowHelper** stored in property named `line`. Thanks anyway for all your ideas, @Jovan ! – juagicre Sep 05 '14 at 11:42