I am currently utilizing LineSegmentsGeometry and LineMaterial to render thick cube edges. My objective is to dynamically change the color of the edge when it is hovered over.
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;
};
Currently, this code is only functional with thin lines using LineBasicMaterial. Is there a way to achieve this effect with bold lines? I also need to apply this logic to other shapes as well. sandbox here https://codesandbox