# Giving faces UIDs

**URL:** <https://discourse.threejs.org/t/giving-faces-uids/15420>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [May 21, 2020, 11:32am UTC](https://discourse.threejs.org/t/giving-faces-uids/15420 "2020-05-21T11:32:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![DH-UK](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DH-UK](https://discourse.threejs.org/u/DH-UK)\
**Post date:** [May 21, 2020, 11:32am UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/1 "2020-05-21T11:32:24Z")

</div>

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/](https://jsfiddle.net/DH_UK/w2vbyjgk/4/)

Thank you in advance

Update: Fixed link

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 21, 2020, 11:38am UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/2 "2020-05-21T11:38:08Z")

</div>

The provided jsfiddle doesn’t work.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 21, 2020, 11:46am UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/3 "2020-05-21T11:46:05Z")

</div>

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

[https://jsfiddle.net/chagd7zt/](https://jsfiddle.net/chagd7zt/)

---

<div class="post-metadata">

**Author:** ![DH-UK](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DH-UK](https://discourse.threejs.org/u/DH-UK)\
**Post date:** [May 21, 2020, 11:46am UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/4 "2020-05-21T11:46:56Z")

</div>

Sorry, that’s exactly what I did

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 21, 2020, 12:04pm UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/5 "2020-05-21T12:04:01Z")

</div>

> [@DH-UK](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 21, 2020, 12:18pm UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/6 "2020-05-21T12:18:25Z")

</div>

This can help:

```auto
  // 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);

```

---

<div class="post-metadata">

**Author:** ![DH-UK](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DH-UK](https://discourse.threejs.org/u/DH-UK)\
**Post date:** [May 21, 2020, 12:44pm UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/7 "2020-05-21T12:44:49Z")

</div>

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?](https://discourse.threejs.org/t/solved-are-segments-in-a-side-selectable/2042)

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

---

<div class="post-metadata">

**Author:** ![DH-UK](https://avatars.discourse-cdn.com/v4/letter/d/838e76/32.png) [@DH-UK](https://discourse.threejs.org/u/DH-UK)\
**Post date:** [May 21, 2020, 12:47pm UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/8 "2020-05-21T12:47:17Z")

</div>

Thank you,

This helped a lot.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 21, 2020, 12:48pm UTC](https://discourse.threejs.org/t/giving-faces-uids/15420/9 "2020-05-21T12:48:51Z")

</div>

@DH-UK You’re welcome 🍻