0

I'm rendering a grid using Three.js (v0.86.0): 

let grid = new THREE.GridHelper(1000, 20);
scene.add(grid);

The lines generated by GridHelper seem to have a thickness of 1 pixel.

grid screenshot

I'd like to increase the thickness of lines to 3 pixels, but have no idea how to do it. I tried changing the value of grid.geometry.getAttribute("position").itemSize but it doesn't work.

Any ideas?

XåpplI'-I0llwlg'I -
  • 21,649
  • 28
  • 102
  • 151
  • 1
    Do you know if it can be done? that line of code is as arbitrary as `grid.geometry.gremlin.hamburger["price"]`. Some reading: https://stackoverflow.com/questions/11638883/thickness-of-lines-using-three-linebasicmaterial – pailhead Aug 24 '17 at 18:48
  • 1
    In particular, see [this](https://stackoverflow.com/a/41911520/1461008) and [this](https://github.com/mrdoob/three.js/pull/11349). – WestLangley Aug 24 '17 at 20:27

1 Answers1

2

Unfortunately, you can't change the line thickness on Windows.

This is because GridHelper uses LineBasicMaterial internally, and as they write in the documentation: "Due to limitations in the ANGLE layer, with the WebGL renderer on Windows platforms linewidth will always be 1"

Holger Ludvigsen
  • 2,320
  • 1
  • 26
  • 31
  • According to the comment above from @WestLangley, it is actually a problem on all platforms: https://stackoverflow.com/a/41911520/1461008 – Holger Ludvigsen Aug 26 '17 at 16:06