How to have different line types for Line

Hii,
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
linetypes-in-r-line-types

Thanks & Regards
Akshay

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:

DashDotLine

https://jsfiddle.net/prisoner849/gfjnLakc/

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 ) {
      discard;
    }

    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 https://github.com/spite/THREE.MeshLine for thicker lines like the ones you posted.

2 Likes

Just as an addition:

2 Likes