How to make THREE.LineSegments selectable on scene?

So I have on scene few THREE.Mesh which are selectable (they are rectangles that which I can select with mouse click), but also I have THREE.LineSegments, which are ‘dashed’ styles but I can’t click on them (because they are lines, not objects).

Here is code for elements that I can select:

const baseCubeGeo = new THREE.BoxBufferGeometry(w, d, h);
const baseCubeMat = new THREE.MeshBasicMaterial({ wireframe: true });

return new THREE.Mesh(baseCubeGeo, baseCubeMat);

Here is code for elements I can not select (only if I click on thin verge of it):

const edgesGeo = new THREE.EdgesGeometry(cube.geometry);
const edgesMat = new THREE.LineDashedMaterial({ dashSize: 10, gapSize: 4 });
const dashedCube = new THREE.LineSegments(edgesGeo, edgesMat);


So my question is: how may I implement such object, that will have ‘dashed’ style verges but also clickable?



Yup, I think, here Three.js’s community is bigger than on Stackoverflow :slight_smile:

Have you tried to make the lines interactive like in this example?