Mesh with a clickable corner and side

Hello, I am trying to create a 3d object with interactive sides and corners. I think The best way to represent what I want to can be seen in this picture with this hexagon.

In a 3d environment, I guess you can get the index of each face and that would help to work around the problem of the side, however, I still don’t know how I could get the corners to be clickable. Can anyone help, tnx?

Fake it - add visible / invisible spheres and boxes at the locations you want to be interactive (same as you added circles on your picture to show us where the corner and the center are) - then listen to events on these meshes.

The issue with using edges and corners for such interactions would be their either size - since they do not really have a size (corner is just a position with no volume, edge is a line with <1 pixel thickness.) Trying to click on them could lead to an irritating experience for the user.

1 Like

I did something like this quite some time ago. In the then three.js version there was a problem that has since been fixed.

From the Collection of examples from discourse.threejs.org

see eXtended eXamples 2018

Modify indexed BufferGeometry (mouse or input)

modify Geo

1 Like

Never even thought about this approach, but it will definitely do. Tnx.

Tnx for the link. But your approach is a bit too complex for my needs and for me personally and have found myself a bit lost in your code :slight_smile:

The code is a bit extensive, but the idea is quite simple.

With

if (intersects.length > 0) {        //  cutting object
...
   handlePos = intersects[0].point;
...
   faceIdx = intersects[0].faceIndex;
...
   a = intersects[0].face.a;
   b = intersects[0].face.b;
   c = intersects[0].face.c;

you determine the corners of the triangle.

Then some geometry comes into play.

abpD = Math.sqrt( paV.dot( paV ) - abVn.dot( paV ) * abVn.dot( paV ) ); // ab, p Distance
bcpD = Math.sqrt( pbV.dot( pbV ) - bcVn.dot( pbV ) * bcVn.dot( pbV ) ); // bc, p Distance
capD = Math.sqrt( pcV.dot( pcV ) - caVn.dot( pcV ) * caVn.dot( pcV ) ); // ca, p Distance

We check whether the ray/triangle meeting point is close to a corner.

If not, we check the proximity to an edge. If both checks are false, we have hit the interior of the triangle.

The tolerances for the check are hard coded, but of course they can be changed.

if ( paD < ( pbD + pcD ) / 8 ) {
...
   vertexPickedA = true;
...

...