# Raycaster: Get ID of individual geometries of a mergeBufferGeometry

**URL:** <https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154>\
**Category:** Questions\
**Tags:** buffergeometry, raycaster, geometry\
**Created:** [June 12, 2020, 9:12am UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154 "2020-06-12T09:12:18Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 12, 2020, 9:12am UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/1 "2020-06-12T09:12:18Z")

</div>

Hi all,

I have the following object ‘myBeautifulMesh’ in my Scene.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cb38e47a58ac5bcb38fc6f3536efd9b719b1c1a4.png)

This object has been created using

```
const geometry = BufferGeometryUtils.mergeBufferGeometries(geom)

```

Where `geom` is an array of `THREE.BufferGeometry()`; the individual hexagonal cells that you can see in the picture. Each cell has its unique ID in the database and I want to access this ID based on the intersection of the `raycaster`. To do that, I added an attribute the `geom`s with

```
geom.setAttribute('id', new THREE.BufferAttribute(id, 1)); // id is is the database id.

```

I execute the `raycaster` like this

```
const m = this.scene.getObjectByName('myBeautifulMesh')
const intersects = this.raycaster.intersectObjects([m],true);
console.log(intersects)
for (let i = 0; i < intersects.length; i++) {
    intersects[i].object.material.color.set( 0xff0000 );
    console.log("Clicked on cell" + intersects[i].object.name + " with faceIndex: " + intersects[i].faceIndex );
}

```

This returns the name of the merged Object ‘myBeautifulMesh’ and the face index of the intersection. By logging `intersects` I can also see the BufferGeometries attributes - the id I assigned in `setAttribute`.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/536210496e956ba0cb69c0ed6bd7963e2fede982.png)

How do I get from the face index to the ID? Is my approach wrong or is there a simpler way of doing this?

I should note that each cell has 6 faces and that there are a total of 6788 cells.

Thanks!

---

<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:** [June 12, 2020, 9:26am UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/2 "2020-06-12T09:26:43Z")

</div>

You can use the `faceIndex` to access data in your buffer attributes. It’s only necessary to distinct between indexed and non-indexed geometries.

If the geometry has an index, `faceIndex` belongs to the index attribute. Meaning you have to use `faceIndex` to read the vertex index first and then use this value to access your buffer attributes. If there is no index, you should be able to directly use `faceIndex` to read values of your `id` attribute like so:

```auto
const idAttribute = geom.getAttribute( 'id' );
const id = idAttribute.getX( faceIndex );

```

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 15, 2020, 8:51am UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/3 "2020-06-15T08:51:37Z")

</div>

Thank you for your help. I basically build the geometry of each cell according to the [webgl\_buffergeometry\_indexed](https://threejs.org/examples/webgl_buffergeometry_indexed.html) example and I guess, this index is preserved after `BufferGeometryUtils.mergeBufferGeometries(geom)`.

Do I need to do something like:

```auto
const idAttribute = geom.getAttribute( 'id' );
const vertexIndex = ?
const id = idAttribute.getX( vertexIndex );

```

I tried to solve it over the weekend, but cannot seem to get it to work, though. When logging the `face` with `intersects[i].face` I can see the `faceIndex` and `a`,`b`, and `c` (I assume those are the indices of the vertices?). I tried to get help from your [SE answer](https://stackoverflow.com/questions/55334455/three-js-how-to-find-vertices-of-the-face-by-face-index) but that refers only to the position.

---

<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:** [June 15, 2020, 9:51am UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/4 "2020-06-15T09:51:35Z")

</div>

Sorry, I’ve realized right now that `faceIndex` just represents the triangle number of the intersection. Does this work?

```auto
const idAttribute = geom.getAttribute( 'id' );
const index = geom.index;
const vertexIndex = index.getX( face.a );
const id = idAttribute.getX( vertexIndex );

```

BTW: I’m a bit irritated about your geometry structure. You say each cell has a unique ID. That means vertices can’t be shared across faces since otherwise they would have the same ID. So why do you use an index geometry then? The main purpose of an indexed geometry is to share vertices.

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 15, 2020, 12:17pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/5 "2020-06-15T12:17:37Z")

</div>

> [@Mugen87](#):
>
> BTW: I’m a bit irritated about your geometry structure. You say each cell has a unique ID. That means vertices can’t be shared across faces since otherwise they would have the same ID. So why do you use an index geometry then? The main purpose of an indexed geometry is to share vertices.

Each cell (= hexagon) is calculated based on its center point. The center point (vertex index = 0) is delivered by the database. After some calculation to create the locations of the other vertices of the cell, I create the 6 faces of the hexagon with something like `geometry.setIndex([0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5, 0, 5, 6, 0, 6, 1])`. Once I have all the geometries of the cells ready, I run the mentioned `mergeBufferGeometries`. In that sense, you are right, I do not share vertices in the merged version, only in the individual hexagonal cells.

---

<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:** [June 15, 2020, 2:04pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/6 "2020-06-15T14:04:22Z")

</div>

@MichaelJendryke  
You can have less amount of triangles (thus index data) per hexagon: [Comparing 2 approaches using BufferGeometry - #5 by marquizzo](https://discourse.threejs.org/t/comparing-2-approaches-using-buffergeometry/3967/5)

I couldn’t resist to write a small example 🙂 [https://jsfiddle.net/prisoner849/jpz78w1L/](https://jsfiddle.net/prisoner849/jpz78w1L/) (have a look at browser console, when click the hexagons)

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 16, 2020, 2:22pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/7 "2020-06-16T14:22:38Z")

</div>

> [@prisoner849](#):
>
> I couldn’t resist to write a small example 🙂 [https://jsfiddle.net/prisoner849/jpz78w1L/](https://jsfiddle.net/prisoner849/jpz78w1L/) (have a look at browser console, when click the hexagons)

I appreciate your input, the idea to create the hexagon out of 4 triangles is good, and the fiddle almost perfectly sums up what I am doing. The only problem I see is this line:

```
let instIdx = Math.floor(o.faceIndex / 4);

```

Your example works as you know that each hexagon has 4 faces. However, and I should have mentioned that before, there are 12 locations on the planet where I have a pentagon that does not have 4 faces per cell. I did not bother mentioning that, because I am hoping that there is another solution. I have added an attribute to `geomHex` (IDs 1000, 1001, and 1002) and that is the ID I would like to get. I added @Mugen87 's code and the right ID shows up if I click on the center face of the first hexagon. [Raycaster: Get ID of individual geometries of a mergeBufferGeometry - JSFiddle - Code Playground](https://jsfiddle.net/MichaelJendryke/uoanwxcm/39/)

I am also hoping to change the color of the entire cell once I have it’s ID.

---

<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:** [June 16, 2020, 3:03pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/8 "2020-06-16T15:03:11Z")

</div>

> [@MichaelJendryke](#):
>
> However, and I should have mentioned that before, there are 12 locations on the planet where I have a pentagon that does not have 4 faces per cell.

Seriously? 🙂  
You are the Master of the world you create 💪 . So, your world, your rules: any n-gon with amount of sides less than 7, and greater than 2, is a hexagon of 4 triangles 😄

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/prisoner849/b9xny8qs/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/ab5fe74c36472bf342020b3190364c36ae9acf7b.png)

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 16, 2020, 3:13pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/9 "2020-06-16T15:13:07Z")

</div>

Yeah, right, it is possible 😅 I just did not adjust my code to the 4 face hexagons and still thought about the version that I currently have with the vertex in the center…

---

<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:** [June 16, 2020, 3:15pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/10 "2020-06-16T15:15:57Z")

</div>

Feel free to use this concept 😄 🍻

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 16, 2020, 3:35pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/11 "2020-06-16T15:35:37Z")

</div>

Thanks, will do. In the fiddle I can get my `ID` with

```
o.object.geometry.getAttribute('id').getX(instIdx) 

```

Will try to set the color now…

---

<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:** [June 16, 2020, 3:45pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/12 "2020-06-16T15:45:24Z")

</div>

So, when you know that all your instances have 4 faces, you don’t need that additional attribute with IDs, just get the floor of division of faceId by 4. Though it works only when those IDs are related to the order of adding geometries into the array for merging.

---

<div class="post-metadata">

**Author:** ![MichaelJendryke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/michaeljendryke/32/3233_2.png) [@MichaelJendryke](https://discourse.threejs.org/u/MichaelJendryke)\
**Post date:** [June 16, 2020, 3:53pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/13 "2020-06-16T15:53:02Z")

</div>

Right, however I need that specific ID. After clicking the cell I make an API request to the database to retrieve more information about that cell/location. Its a spatial information system.

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [June 16, 2020, 6:04pm UTC](https://discourse.threejs.org/t/raycaster-get-id-of-individual-geometries-of-a-mergebuffergeometry/16154/14 "2020-06-16T18:04:56Z")

</div>

You can iterate through the vertices of a face and assign that face index to them. It does not matter if a face has 3 points or 12