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.
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!
