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的值，因为只返回与光线之间的距离低于该值的行（基本上这将设置＆＃34;厚度＆＃34;为raycaster的行）

你还应该注意，这将使线条增长＆＃34;在对象的内部和外部，所以即使对于简单的对象作为立方体，匹配最近面的点与相交的线也是一个好主意

另一种方法是计算与每条线相交的面的距离，最接近的一条将是正确的边 - 当你已经有一个交叉点时，这看起来比使用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;
    }
}

更改Three.js

1 个答案: