How dashArray works? - Githubissues

spite / THREE.MeshLine

Mesh replacement for THREE.Line

MIT License

2.13k stars 379 forks source link

How dashArray works? #128

Closed ahsan-sabir closed 3 years ago

ahsan-sabir commented 3 years ago

Coming from the svg world, I am trying to wrap my head around how the dashArray option works here.

Given the description in readme (dashArray - the length and space between dashes. (0 - no dash)), I was assuming that in a line of like 50 units, a dashArray of like 25 would mean 1 dash and 1 gap. But things seem to work differently here. How to accomplish this in THREE.MeshLine?

https://codesandbox.io/s/optimistic-snowflake-y62s0

Jeremboo commented 3 years ago

Hi there!

const material = new MeshLineMaterial({
      color: "red",
      lineWidth: 1,
      dashArray: 1 / 50
    });

Gives you a combinaison of 50 dashes and 50 gaps equal in size!

ahsan-sabir commented 3 years ago

Can I specify dashes and gaps in units like we do in svg in px, for example the dash of 12 units and gap of 6 units? I have some svg designs that I am converting to webgl.

Jeremboo commented 3 years ago

The dashArray will divide the current length of your line by the number you want. For example 1 / 50 will give you 50 dashes + 50 gaps whatever le length of your line. So if you line = 100 units, 1 dash will be 1 unit for sure.

Now, we have the dashRatio property too. That will help you to get a different a size for your dash compared to the gap. Following your needs (12 units for the dash, 6 units for the gap), the gap should be 1 / 3 of the dash. So you can use those values: