CODEWITHSUNDEEP
three.jsline
Serginho
Serginho

Reputation: 69

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

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

Upvotes: 0

Views: 909

Answers (2)

Denny
Denny

Reputation: 28

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

Upvotes: 1

houssk
houssk

Reputation: 156

You can use LineDashedMaterial instead MeshLineMaterial

const material = new THREE.LineDashedMaterial( {
    color: 0xffffff,
    linewidth: 1,
    scale: 1,
    dashSize: 3,
    gapSize: 1,
} );

Upvotes: 0

Related Questions