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

Posted 2023-02-27

【中文标题】three.js 在悬停 LineSegmentsGeometry 上突出显示立方体的边缘

【英文标题】：three.js Highlighting the edge of a cube on hover LineSegmentsGeometry

【发布时间】：2021-10-05 10:19:05

【问题描述】：

我正在使用 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

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

感谢您的帮助。我正在使用a-frame，也许您知道如何将renderer.getSize(edgesMaterial.resolution) 与a-frame 一起使用

我不熟悉 A Frame。