When I click on the edge of the green wireframe (red circle) nothing happens…
var intersects = raycaster.intersectObjects(targetListMouse);
if (intersects.length > 0) {
console.log("intersects[0]", intersects[0])
}
this is how I create the wireframe
let geoWireframe ;
let wireframe ;
let Linegeometry = new THREE.Geometry();
Linegeometry.vertices.push(tempGeo.vertices[edge[1]], tempGeo.vertices[edge[0]],tempGeo.vertices[edge[1]]);
Linegeometry.faces.push(new THREE.Face3(0,1,2));
geoWireframe = new WireframeGeometry2( Linegeometry );
wireframe = new Wireframe( geoWireframe, matLineEdges );
wireframe.computeLineDistances();
wireframe.visible = true;
scene.add( wireframe );
targetListMouse.push(wireframe) // used by the raycaster
Would it be an option to create a fake wireframe by forwarding an extra per-vertex vector attribute that defines a local coordinate system on each face, and use this in a shader for drawing the lines? Or perhaps a much simpler solution would be to raycast on the mesh and just filter the results by local coordinates (or even texture coordinates).
This could be a problem in your code. If the raycast returns multiple intersections, you have to evaluate the result and ensure only to pick the relevant one for your use case.
But it seems @gkjohnson is planning to work on this in the near future
I am! It may be a couple weeks before I can get a PR in but in the mean time I’ve been using the interactive lines example approach (as you suggested in another comment) for raycasting while rendering with fat lines. It’s not perfect but it does the job for thin lines.