How to have different line types for Line

i am trying to apply line type for line. I used LineDashedMaterial to get the dashed line and i succeed in doing so, but i also want to apply other line type such as dashdot ,border,Center Lines,etc.
Is this possible to do this or is there any inbuilt property in three.js.
the line types

Thanks & Regards

Just out of curiousity, what are those lines?

1 Like

You can use THREE.LineBasicMaterial() and THREE.LineDashedMaterial() for most of them, except 4 and 6.
But nobody keeps you out of creativity :wink:


Here is just a concept, made with THREE.ShaderMaterial() and based on the shaders for a dashed line.

  var lineVertShader = `
  attribute float lineDistance;
  varying float vLineDistance;
  void main() {
    vLineDistance = lineDistance;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;

  var lineFragShader = `
  uniform vec3 diffuse;
  uniform float opacity;

  uniform float dashSize;
  uniform float gapSize;
  uniform float dotSize;
  varying float vLineDistance;
  void main() {
	float totalSize = dashSize + gapSize;
	float modulo = mod( vLineDistance, totalSize );
    float dotDistance = dashSize + (gapSize * .5) - (dotSize * .5);
    if ( modulo > dashSize && mod(modulo, dotDistance) > dotSize ) {

    gl_FragColor = vec4( diffuse, opacity );
1 Like

Note that the default lines will always have width of 1 on Macs (and possibly other systems in the future). You can take a look at for thicker lines like the ones you posted.


Just as an addition: