在Three.js中更改单击边缘的颜色

Question

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获得面孔，但是找不到被点击的边缘。 请帮忙。

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