# Three.js set a break when using Line2 and LineMaterial

**URL:** <https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095>\
**Category:** Questions\
**Tags:** linegeometry, linematerial\
**Created:** [July 13, 2024, 1:31am UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095 "2024-07-13T01:31:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![casamigos17](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/casamigos17/32/38994_2.png) [@casamigos17](https://discourse.threejs.org/u/casamigos17)\
**Post date:** [July 13, 2024, 1:31am UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095/1 "2024-07-13T01:31:30Z")

</div>

I have a bunch of points that are part of each cube face and are set in consecutive order. when passing all those points to the LineGeometry there is a diagonal line as a result of connecting all the data points. Is there a way of jumping onto a new point?

What I tried is to set vertex colors, however, it creates a weird effect and I also can not set a transparent color.

```javascript
const pos =
  edgeLines.geometry.clone().attributes.position;
const geoLine = new LineGeometry();
const linePositions: number[] = [];
const lineColors: number[] = [];

for (let k = 0; k < 4; k++) {
  const s = k * 6;
  const val1 = (pos.array as Float32Array).slice(
    s,
    s + 3
  );
  const v1 = mesh.localToWorld(
    new THREE.Vector3(val1[0], val1[1], val1[2])
  );
  const val2 = (pos.array as Float32Array).slice(
    s + 3,
    s + 6
  );
  const v2 = mesh.localToWorld(
    new THREE.Vector3(val2[0], val2[1], val2[2])
  );
  linePositions.push(
    v1.x,
    v1.y,
    v1.z,
    v2.x,
    v2.y,
    v2.z
  );
  lineColors.push(k % 2 === 0 ? 1 : 0, 0, 0, 1, 0, 0);
  //add an extra line to close the shape!
  if (k !== 0 && (k + 1) % 2 === 0) {
    const kk = k - 1;
    const ss = kk * 6;
    const _val1 = (pos.array as Float32Array).slice(
      ss,
      ss + 3
    );

    const _v1 = mesh.localToWorld(
      new THREE.Vector3(_val1[0], _val1[1], _val1[2])
    );
    linePositions.push(_v1.x, _v1.y, _v1.z);
    lineColors.push(0, 0, 0);
  }
}
geoLine.setPositions(linePositions);
geoLine.setColors(lineColors);
const matLine = new LineMaterial({
  // color: "red",
  linewidth: 2,
  resolution: gl.getSize(new THREE.Vector2()),
  alphaToCoverage: true,
  vertexColors: true,
});
const line = new Line2(geoLine, matLine);
line.computeLineDistances();
line.scale.set(1, 1, 1);
scene.add(line);

```

I wish to omit this diagonal line!

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0a26fc66b8d5b931f1fcf5f4c786c42a44292c1.png)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 13, 2024, 4:58am UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095/2 "2024-07-13T04:58:32Z")

</div>

> [@casamigos17](#):
>
> Is there a way of jumping onto a new point?

Try inserting invalid point. This is one line:

[https://codepen.io/boytchev/full/BagNJwv](https://codepen.io/boytchev/full/BagNJwv)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/75ad8ef43d5c9ad2666a3fc988874cc6a2fc554c.png)](https://codepen.io/boytchev/full/BagNJwv)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 13, 2024, 7:57pm UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095/3 "2024-07-13T19:57:42Z")

</div>

Something related: [Using NaN in attributes - #2 by Mugen87](https://discourse.threejs.org/t/using-nan-in-attributes/1952/2)

---

<div class="post-metadata">

**Author:** ![casamigos17](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/casamigos17/32/38994_2.png) [@casamigos17](https://discourse.threejs.org/u/casamigos17)\
**Post date:** [July 16, 2024, 12:45am UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095/4 "2024-07-16T00:45:18Z")

</div>

Great workaround, I believe I would create separate lines though due to the post prisoner849 shared with us.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [July 16, 2024, 9:26am UTC](https://discourse.threejs.org/t/three-js-set-a-break-when-using-line2-and-linematerial/68095/5 "2024-07-16T09:26:28Z")

</div>

Yeah. using NaN’s IS a solution used in some other (GL) rendering environments, but there are assumptions in threejs that preclude it. For instance computing normals/bounding boxes of Geometries with NaNs in them will throw warnings/errors.

If you manually compute all that, I think you could get it to work, by avoiding those checks in three, but… yea. Sounds like some hoops to make it work and might break later.