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 有很大不同，因此必须更新方法。

查看您的示例，有几点需要注意：

创建粗线时，会为每行的开头和结尾创建实例化的 BufferAttributes（instanceStart 和 instanceEnd）。您不能使用 geometry.attributes.position 来确定段所需的颜色数。相反，您应该使用 attributes.instanceStart.count 并使用 LineSegmentsGeometry.setColors 函数来确保为每个段设置正确的实例化颜色属性。
LineMaterial 颜色应设置为白色，以便在相乘时显示顶点颜色。
与粗线相交时不提供“索引”。相反，您应该使用“faceIndex”并使用它来设置 instanceColorStart 和 instanceColorEnd 属性上的颜色字段并相应地更新它们。

这是针对您提供的代码修改的演示，展示了如何使用一些简短的内联注释来完成此操作：

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

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

three.js Highlighting the edge of a cube on hover LineSegmentsGeometry

javascript

geometry

three.js

raycasting