Giving faces UIDs

Questions
1

Hi All,

So I am relatively new to Three.js and i have set myself the challenge of making a cube menu. I have managed to get my cube slowly rotating continuously, rotate the cube with OrbitControls and have been able to select faces thanks to help from this forum.

My next move is to be able to identify each face individually so I know which face the user has selected and can respond accordingly. Is this possible in three.js?

Here is my code: https://jsfiddle.net/DH_UK/w2vbyjgk/4/

Thank you in advance

Update: Fixed link

2

The provided jsfiddle doesn’t work.

3

Probably the OP forgot to save the version with OrbitControls included:

https://jsfiddle.net/chagd7zt/

4

Sorry, that’s exactly what I did

5

What exactly do you mean with face? Are you referring to a single side of the cube or just a triangle?
You can identify the clicked triangle over the faceIndex property from the intersection. However, there are no indices for the cube’s sides. This something you have to manage in your application.

1 Like
6

This can help:

  // find the new indices of faces
  faceIdx1 = intersects[0].faceIndex;
  faceIdx2 = faceIdx1 % 2 === 0 ? faceIdx1 + 1 : faceIdx1 - 1;
  
  var sideId = Math.floor(faceIdx1 / 2);
  console.log(sideId);
1 Like
7

By face I mean a single side of the cube, The idea is that every face will be a menu item that can be selected.
Identifying through faceIndex has solved it for me, using that I can get an identifying value and use that.

For the indices of the cubes sides, the bit of code below replicates that I think, when clicking on one of the triangles it finds its face partner.

Taken from this post: [SOLVED] Are segments in a side selectable?

 // find the new indices of faces
 faceIdx1 = intersects[0].faceIndex;
 faceIdx2 = faceIdx1 % 2 === 0 ? faceIdx1 + 1: faceIdx1 - 1;
8

Thank you,

This helped a lot.

1 Like
9

@DH-UK You’re welcome :beers: