Изменить цвет щелкнули края в 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

когда raycasting на THREE.Line следует установить параметр raycasters

raycaster.linePrecision 

на значение выше, чем по умолчанию 1, как только строки, которые имеют на расстояние от луча ниже этого значения будут возвращены (в основном это наборы «толщина» линий для raycaster)

Вы также должны принять во внимание, что это заставит линии «расти» как внутри, так и снаружи объекта, так что совпадение точек ближайшей грани с пересекающимися линиями является хорошим идея даже для простого объекта как куба

другой путь будет расчет расстояния лица пересекаются каждой линии и ближе всего один будет правильным краем - это выглядит проще и надежнее, чем с помощью 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; 
    } 
}