Not consistent line width. about three.meshline HOT 7 OPEN

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!

from three.meshline.

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.

from three.meshline.

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?

from three.meshline.

@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
  });

from three.meshline.

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 😄

from three.meshline.

Has the problem been solved?

from three.meshline.

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),
]

from three.meshline.