three.js 在悬停 LineSegmentsGeometry 上突出显示立方体的边缘

Question

我正在使用 LineSegmentsGeometry 和 LineMaterial 创建厚立方体边缘。我想改变悬停时边缘的颜色。

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;
};

此代码仅在使用带有 LineBasicMaterial 的细线时有效。我可以用粗线以某种方式做到这一点吗？ 我也有这个逻辑的其他形状 沙箱在这里 https://codesandbox

Answer 1

你可以用粗线做到这一点！不过，LineSegmentsGeometry（粗线）的结构与 EdgesGeometry 有很大不同，因此必须更新该方法。

看看你的例子，有几点需要注意：

1. 在创建粗线时，会为每行的开头和结尾创建实例 BufferAttributes（instanceStart 和 instanceEnd）。您不能使用geometry.attributes.position 来确定段所需的颜色数。相反，您应该使用attributes.instanceStart.count 和LineSegmentsGeometry.setColors 函数来确保为每个段设置正确的实例颜色属性。

2. LineMaterial 颜色应设置为白色，以便在相乘时显示顶点颜色。

3. 与粗线相交时不提供“index”。相反，您应该使用“faceIndex”并使用它来设置instanceColorStart 和instanceColorEnd 属性上的颜色字段并相应地更新它们。

以下是为您提供的代码修改的演示，展示了如何使用一些简短的内联 cmets 来完成此操作：

https://jsfiddle.net/juoz5yLv/1/