在 Three.js 中更改点击边缘的颜色答案

【问题标题】：Change colour of clicked edge in Three.js在 Three.js 中更改点击边缘的颜色
【发布时间】：2016-03-04 02:08:24
【问题描述】：

var egh = new THREE.EdgesHelper(cube, 0xff0000);
egh.material.linewidth = 5;
scene.add(egh);

我使用

创建了多维数据集

new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial(materials));

其中不透明度设置为 0，只有边缘可见。现在，如果我单击任何边缘，它的颜色应该会改变。我从 Raycaster.intersectObjects 得到面子，但找不到点击的边缘。请帮忙。

【问题讨论】：

标签： javascript jquery three.js raycasting

【解决方案1】：

当光线投射到 THREE.Line 时，你应该设置 raycasters 参数

raycaster.linePrecision

设置为高于默认值 1 的值，因为只有与射线的距离低于该值的线才会被返回（本质上这会设置 raycaster 的线的“厚度”）

您还应该注意，这会使线在对象的内部和外部“增长”，因此即使对于像立方体这样的简单对象，将最近面的点与相交的线匹配也是一个好主意

另一种方法是计算面部与每条线相交的距离，最近的一条将是正确的边缘 - 这看起来比在已有相交点时使用光线投射器更容易和更强大

var intersectPoint = raycastresult[0].point;
var line = new THREE.Line3();
var positions = edges.geometry.getAttribute("position").array
for(var i = 0; i < positions.length;i+=2)
{
    line.start.fromArray(positions,i*3);
    line.end.fromArray(positions,i*3+3);
    var closestPoint = line.closestPointToPoint(intersectPoint);
    distance = closestPoint.distanceTo(intersectPoint);
    if(distance < minDistance)
    {
        minDistance = distance;
        closestEdgeIndex = i;
    }
}

【讨论】：

获取未定义的行。
缺少“new”关键字，但代码未经测试，它应该更像是一个指南而不是一个解决方案