Highlighting the edge of a cube on hover LineSegmentsGeometry

Questions
,
1

I am using LineSegmentsGeometry and LineMaterial to create thick cube edges. I want to change the color of the edge on hover.

const edgesGeometry = new LineSegmentsGeometry().fromEdgesGeometry(
  new THREE.EdgesGeometry(mesh.geometry, 40)
);
const colors = [];
for (let i = 0; i < edgesGeometry.attributes.position.count; i++) {
  colors.push(0, 0, 0);
}
edgesGeometry.setAttribute(
  "color",
  new THREE.Float32BufferAttribute(colors, 3)
);
const edgesMaterial = new LineMaterial({
  color: "black",
  vertexColors: true,
  linewidth: 0.001
});
const line = new THREE.LineSegments(edgesGeometry, edgesMaterial);

const setLineColor = (color) => {
  const { index, object } = intersected;
  object.geometry.attributes.color.setXYZ(index, color.r, color.g, color.b);
  object.geometry.attributes.color.setXYZ(index + 1, color.r, color.g, color.b);
  object.geometry.attributes.color.needsUpdate = true;
};

This code only works if using thin lines with LineBasicMaterial. Can I do it somehow with bold lines?
I also have other shapes with this logic
sandbox here
[Line Segment Research (forked) - CodeSandbox]

2

Hi!
Is it necessary to change the color of edges with setting it per vertex?
Remove this line:
vertexColors: true,
in the material, so you can set the color simply just with edgesMaterial.color.set("aqua");

Also, is it not an option to have such edges?
Example: https://jsfiddle.net/prisoner849/9pwozejq/
Picture:

изображение
изображение831×825 38.7 KB

2 Likes
3

Thanks for the answer. I need a specific edge to be highlighted on hover. Like here

4

Solution https://jsfiddle.net/kirill321592/1yx5pro6/22/

1 Like