How can I get the Dashed THREE.MeshLine to work?

Question

I´m trying to Use THREE.MeshLine to get a dashed line with thickness.

I´ve locked around for examples and put together this codepen to show what I´m trying to achieve:

Dashed THREE.MeshLine

Where you see a continuos white line, I would like to get a Dashed Line.

I'm am setting up the paramenters for the material:

const materialX = new MeshLineMaterial({
  color: 0xffffff,
  lineWidth: 3,
  // 0 -> no dash ; 1 -> half dashline length ; 2 -> dashline === length
  dashArray: 0.1,
  // 0.5 -> balancing ; 0.1 -> more line : 0.9 -> more void
  dashRatio: 0.5    
});

But, even then get no Dashed Line.

How can i get this dashed line to work?

Any help is welcome!

Thank you

Answer 1

You need to specify that the material is transparent by specifying transparent to true when creating the MeshLineMaterial.

const materialX = new MeshLineMaterial({
  color: 0xffffff,
  lineWidth: 3,
  // 0 -> no dash ; 1 -> alf dashline length ; 2 -> dashline === length
  dashArray: 0.1,
  // 0.5 -> balancing ; 0.1 -> more line : 0.9 -> more void
  dashRatio: 0.5,
  transparent: true,
});

Reference: https://github.com/spite/THREE.MeshLine/issues/66