Not consistent line width.

[pumanitro]

Any idea how to make a line to be consistent even it is not straight?

[jacopocolo]

Hard to say without seeing the code.

• What points/vertices are you passing to Meshline?
• Are you using setPoints after?
• Are you maybe passing some strange arguments to the setPoints second parameter that sets the width?

[pumanitro]

@jacopocolo

1. Any points that are not straight-line looks like above
2. I am using setPoints
3. my second parameter looks like this:
   line.setPoints(new Float32Array(points), p => 1);
   So it does nothing special. I just tested it.

Additionally, my material looks like this:

const color = new THREE.Color(getColor(propertiesColor, 'hex'));

const material = new MeshLineMaterial({
    map: null,
    useMap: false,
    color,
    dashArray: false,
    resolution: new THREE.Vector2( window.innerWidth, window.innerHeight ),
    sizeAttenuation: true,
    lineWidth: 1200
  });

[jacopocolo]

I'm not one of the devs and they may help more BUT it looks like a bug. Meshline really struggles with too much variation on the z-axis. If you add wireframe: true to your material you may see that the mesh itself is not evenly wide.

I did a quick test here and it confirms the issue:

• https://pacific-alike-justice.glitch.me/ (preview)
• https://glitch.com/edit/#!/pacific-alike-justice?path=script.js%3A23%3A115 (source)

Reducing the Math.random() in the z of points visibly solves the problem and the mesh stops bending. So maybe adding more points in your geometry could solve the problem.

[pumanitro]

adding more points in your geometry could solve the problem

I thought about this too, but I am not sure about the performance + I would need to calculate points in between 2 points (shouldn't be hard). Still, I was really surprised how hard it is to create such a line path in three.js in XXI century 😄

[jacopocolo]

Take a look at the various curves in three (like https://threejs.org/docs/#api/en/extras/curves/CatmullRomCurve3) you can pass your points to the curve and then get back however many points you need with curve.getPoints( number ). Playing around with the various settings may work!

[chimeiaiwangliang]

Has the problem been solved?

[jon-mcclung-fortyau]

Ran into the same issue today, it appears that duplicating each point besides the first and last works pretty well. You get a thick, consistent line between each point.
Instead of this:

points = [
      new THREE.Vector3(-5, 0, 0),
      new THREE.Vector3(5, 0, 0),
      new THREE.Vector3(5, 10, 0),
      new THREE.Vector3(-5, 0, 0),
]

You want this:

points = [
      new THREE.Vector3(-5, 0, 0),
      new THREE.Vector3(5, 0, 0),
      new THREE.Vector3(5, 0, 0),
      new THREE.Vector3(5, 10, 0),
      new THREE.Vector3(5, 10, 0),
      new THREE.Vector3(-5, 0, 0),
]