Highlighting the edge of a cube on hover LineSegmentsGeometry

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

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/


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

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

1 Like