I am currently trying to generate an arrow based on the values of a sensor in real-time on a point map. The size and direction of the arrow has to be determined by the values from the sensor.
At the moment I have managed to generate an ArrowHelper to do exactly what I want, the problem however is that the scale I am working with renders the 1px line almost invisible.
Because of this, I have tried to edit the linewidth of the specific line inside the ArrowHelper, but this doesn’t seem to work because of a WebGL problem.
Is there any way I can change the material from LineBasicMaterial to another that will do what I want, or are there any other solution that may help me here?
I was thinking about maybe creating the arrow as an object, but don’t know enough about 3D and Three.js to be confident that I can control the variables of size, length and direction of an object. To try this without knowing if it is remotely possible this way, would use up a lot of my time for this project.
It’s not actually a WebGL problem but a known limitation. From MDN:
The webgl spec, based on the OpenGL ES 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined. The maximum minimum width is allowed to be 1.0. The minimum maximum width is also allowed to be 1.0. Because of these implementation defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user’s browser will display any other width.
As of January 2017 most implementations of WebGL only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.
A different material won’t help here. A proper solution is to render lines based on triangles (so called MeshLines or Ribbons). three.js supports this feature as you can see in the following example: